Other Introduction of the possibility of sending audio files .mp3, .wav etc

rasez · Jun 25, 2025

отредактировал страницу на гитхабе чутка
11.07.2025

Я БУДУ ГОТОВ ЛИЧНО МОДЕРИРОВАТЬ ВСЕ АУДИО ЗАГРУЖАЕМЫЕ НА ФОРУМ
И так форумчане дополнение к моей прошлой теме про аудио файлы, для треков гс и тп на форуме

С прошлой темы много кто писал что это хорошая идея и вот я ее дополняю
Это было бы полезно на оценку треков музыкальные сливы просто песнями делится на форуме.
Также как вариант отправка голосовых сообщений
Так как у лолза подобраный дизайн я посидел и чутка поделал плеерок +- подходящий под дизайн и пришел к чему то такому:

Я не супер про фронтенда проблема небольшая с иконкой Играть и Пауза но думаю это легко пофиксить использовал SVG для этого
новый код на гтхабе
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>LoLz.Live идеяы</title>
<style>
* {
box-sizing: border-box;
}

body {
margin: 0;
background-color: #303030;
color: #fff;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.player {
background-color: #262626;
padding: 22px;
border-radius: 20px;
width: 400px;
display: flex;
flex-direction: column;

}

.controls {
display: flex;
align-items: center;
gap: 8px;
}

.play-btn {
background-color: #00ba78;
border: none;
color: #444;
padding: 12px 16px;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
transition: background-color 0.3s ease;
}

.play-btn:hover {
background-color: #029b63;
}

.progress-container {
flex: 1;
height: 10px;
background-color: #444;
border-radius: 5px;
cursor: pointer;
overflow: hidden;
position: relative;
}

.progress {
height: 100%;
background-color: #00ba78;
width: 0%;
border-radius: 5px;
transition: width 0.14s linear;
}

.time {
font-size: 15px;
min-width: 50px;
text-align: right;
color: #d6d5d5;
}

.volume-container {
display: flex;
align-items: center;
gap: 8px;
}

.volume-slider {
width: 100px;
accent-color: #00ba78;
}

.pla1 {
display: flex;
background-color: #262626;
border-radius: 20px;
padding-right: 15px;
}
.volume-slider {
width: 100px;
-webkit-appearance: none;
background: transparent;
cursor: pointer;
}

.volume-slider::-webkit-slider-runnable-track {
height: 6px;
background: #444;
border-radius: 3px;
}

.volume-slider::-moz-range-track {
height: 6px;
background: #444;
border-radius: 3px;
}

.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #00ba78;
border-radius: 50%;
border: none;
margin-top: -7px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
background: #029b63;
}

.volume-slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: #00ba78;
border-radius: 50%;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}

.volume-slider::-moz-range-thumb:hover {
background: #029b63;
}

</style>
</head>
<body>
<div class="pla1">
<div class="player">
<audio id="audio" src="demon.m4a"></audio>

<div class="controls">
<button class="play-btn" id="playPauseBtn"></button>

<div class="progress-container" id="progressContainer">
<div class="progress" id="progress"></div>
</div>

<div class="time" id="duration">0:00</div>
</div>
</div>
<div class="volume-container">
<input type="range" min="0" max="1" step="0.01" value="1" id="volumeSlider" class="volume-slider">
</div>
</div>
<script>
const audio = document.getElementById('audio');
const playPauseBtn = document.getElementById('playPauseBtn');
const progress = document.getElementById('progress');
const progressContainer = document.getElementById('progressContainer');
const durationText = document.getElementById('duration');
const volumeSlider = document.getElementById('volumeSlider');

let isPlaying = false;

const updateButton = () => {
playPauseBtn.innerHTML = isPlaying
? `<svg width="27" height="27" fill="#262626" viewBox="0 0 24 24"><path d="M6 4h4v16H6zM14 4h4v16h-4z"/></svg>` // pause
: `<svg width="27" height="27" fill="#262626" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>`; // play
};

playPauseBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play();
isPlaying = true;
} else {
audio.pause();
isPlaying = false;
}
updateButton();
});

audio.addEventListener('timeupdate', () => {
const percent = (audio.currentTime / audio.duration) * 100;
progress.style.width = percent + '%';

const minutes = Math.floor(audio.currentTime / 60);
const seconds = Math.floor(audio.currentTime % 60).toString().padStart(2, '0');
durationText.textContent = `${minutes}:${seconds}`;
});

progressContainer.addEventListener('click', (e) => {
const width = progressContainer.clientWidth;
const clickX = e.offsetX;
const duration = audio.duration;
audio.currentTime = (clickX / width) * duration;
});

volumeSlider.addEventListener('input', () => {
audio.volume = volumeSlider.value;
});

updateButton();
</script>

</body>
</html>

</body>
</html>

HTML
<!DOCTYPE html>

<html lang="ru">

<head>

  <meta charset="UTF-8">

  <title>LoLz.Live идеяы</title>

  <style>

    * {

      box-sizing: border-box;

    }



    body {

      margin: 0;

      background-color: #303030;

      color: #fff;

      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

      display: flex;

      justify-content: center;

      align-items: center;

      height: 100vh;

    }



    .player {

      background-color: #262626;

      padding: 22px;

      border-radius: 20px;

      width: 400px;

      display: flex;

      flex-direction: column;

 

    }



    .controls {

      display: flex;

      align-items: center;

      gap: 8px;

    }



    .play-btn {

      background-color: #00ba78;

      border: none;

      color: #444;

      padding: 12px 16px;

      border-radius: 50%;

      cursor: pointer;

      font-size: 18px;

      transition: background-color 0.3s ease;

    }



    .play-btn:hover {

      background-color: #029b63;

    }



    .progress-container {

      flex: 1;

      height: 10px;

      background-color: #444;

      border-radius: 5px;

      cursor: pointer;

      overflow: hidden;

      position: relative;

    }



    .progress {

      height: 100%;

      background-color: #00ba78;

      width: 0%;

      border-radius: 5px;

      transition: width 0.14s linear;

    }



    .time {

      font-size: 15px;

      min-width: 50px;

      text-align: right;

      color: #d6d5d5;

    }



    .volume-container {

      display: flex;

      align-items: center;

      gap: 8px;

    }



    .volume-slider {

      width: 100px;

      accent-color: #00ba78;

    }



 

    .pla1 {

        display: flex;

         background-color: #262626;

         border-radius: 20px;

         padding-right: 15px;

    }

    .volume-slider {

  width: 100px;

  -webkit-appearance: none;

  background: transparent;

  cursor: pointer;

}





.volume-slider::-webkit-slider-runnable-track {

  height: 6px;

  background: #444;

  border-radius: 3px;

}



.volume-slider::-moz-range-track {

  height: 6px;

  background: #444;

  border-radius: 3px;

}







.volume-slider::-webkit-slider-thumb {

  -webkit-appearance: none;

  appearance: none;

  width: 20px;

  height: 20px;

  background: #00ba78;

  border-radius: 50%;

  border: none;

  margin-top: -7px;

  cursor: pointer;

  transition: background-color 0.3s ease;

}



.volume-slider::-webkit-slider-thumb:hover {

  background: #029b63;

}



.volume-slider::-moz-range-thumb {

  width: 20px;

  height: 20px;

  background: #00ba78;

  border-radius: 50%;

  border: none;

  cursor: pointer;

  transition: background-color 0.3s ease;

}



.volume-slider::-moz-range-thumb:hover {

  background: #029b63;

}



  </style>

</head>

<body>

  <div class="pla1">

  <div class="player">

    <audio id="audio" src="demon.m4a"></audio>



    <div class="controls">

      <button class="play-btn" id="playPauseBtn"></button>



      <div class="progress-container" id="progressContainer">

        <div class="progress" id="progress"></div>

      </div>



      <div class="time" id="duration">0:00</div>

    </div>

  </div>

<div class="volume-container">

      <input type="range" min="0" max="1" step="0.01" value="1" id="volumeSlider" class="volume-slider">

    </div>

    </div>

  <script>

  const audio = document.getElementById('audio');

  const playPauseBtn = document.getElementById('playPauseBtn');

  const progress = document.getElementById('progress');

  const progressContainer = document.getElementById('progressContainer');

  const durationText = document.getElementById('duration');

  const volumeSlider = document.getElementById('volumeSlider');



  let isPlaying = false;



  const updateButton = () => {

    playPauseBtn.innerHTML = isPlaying

      ? `<svg width="27" height="27" fill="#262626" viewBox="0 0 24 24"><path d="M6 4h4v16H6zM14 4h4v16h-4z"/></svg>` // pause

      : `<svg width="27" height="27" fill="#262626" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>`; // play

  };



  playPauseBtn.addEventListener('click', () => {

    if (audio.paused) {

      audio.play();

      isPlaying = true;

    } else {

      audio.pause();

      isPlaying = false;

    }

    updateButton();

  });



  audio.addEventListener('timeupdate', () => {

    const percent = (audio.currentTime / audio.duration) * 100;

    progress.style.width = percent + '%';



    const minutes = Math.floor(audio.currentTime / 60);

    const seconds = Math.floor(audio.currentTime % 60).toString().padStart(2, '0');

    durationText.textContent = `${minutes}:${seconds}`;

  });



  progressContainer.addEventListener('click', (e) => {

    const width = progressContainer.clientWidth;

    const clickX = e.offsetX;

    const duration = audio.duration;

    audio.currentTime = (clickX / width) * duration;

  });



  volumeSlider.addEventListener('input', () => {

    audio.volume = volumeSlider.value;

  });





  updateButton();

</script>



</body>

</html>



</body>

</html>
Html+Css+Js
Вроде выглядит приятно
Также ссылка на сайт

https://97shizzy.github.io/Lolz.live-AUDIO/

И гитхаб репозиторий
GITHUB

арктерикс · Jun 25, 2025

полностью согласен

onechance · Jun 25, 2025

давно не хватало такого, приходилось на саундклауд грузить, будет намного лучше если сразу на форум

DaleCooper · Jun 25, 2025

rasez · Jun 25, 2025

BABLO · Jun 25, 2025

форум заблокирован по причине: нарушил авторские права испольнителя

Kefisto · Jun 25, 2025

Такое нужно да

228 · Jun 26, 2025

Нет практического применения, для того чтобы делиться музыкой уже есть соундлауд, яндексмузыка, и все они прекрасно интегрированы в форум(как кликабельный баннер), а голосовые, ну нахуй, только рыготню можно слушать в оффтопике будет

sunrisetuna · Jun 27, 2025

и так через медиа можно с ск споти яндеха грузить, на крайняк с тг
для форума это уже лишнее

savemyfutu · Jul 2, 2025

легенда

Vangse · Jul 2, 2025

круто выглядит так то

inkussia · Jul 7, 2025

rasez · Jul 12, 2025

Введите пжж я старался

Suds · Jul 14, 2025

И какой вообще смысле? И так нормально

Add a table to the forum

Group and reduce images

Add the statute of limitations of warnings

Add a new filter to the home page

Ability to hide spoilers in the editor

Automatically change the password on accounts without tied mail

[587 For] - a new increase in groups of "users" - "neural network"

Add a preview when choosing a unique

Add an adequate draft system

The possibility of moving templates

Update rank system lolz

Combine not only messages, but also the first comment in review topics

Add the opportunity to sell empty Akki

Custom link to theme

MARKET API functional offer to improve account analysis

Change the sales policy on the cs go prime market

LZT servers status

Add violet stroke near 4 - star cones in the game Honkai Star Rail

Update information on purchased accounts

"Does your question relate to the work of the forum?"

Make a new avatar to the novecks

Add the opportunity to add unique to favorites

Prohibit the mandatory subscription to use the bot

BB Code for copying the text entered in it

Rename "user topics" to "pinned topics"

Add parsing and filters of discord jewelry on a market

Auto-registered mail password history (for resale)

Add the "complain" button in a mini-profile

[17+] Removing the text using a cross in the input field

Change the design of the main buttons when hovering

Other Introduction of the possibility of sending audio files .mp3, .wav etc

Согласны ли вы с предложением?

Да

Да, но нужно доработать (опишу в комментариях)

Нет