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

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

Update information on purchased accounts

[2] Hidden by banned users from the top

Filter with the number of brawlers maximum strength (currently 11)

Filter + information about ewolf cards in clash royale

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

Add a go to "My Activities" button in dialogs

Optimize animated GIF/Webp

Combine the seniority trophy, draws, sympathies, likes, messages, etc.

Add to a mini profile the first of the fixed topics

Test Mod for Merechangs Lolsa

Search...

The possibility of moving templates

“Favorites 2.0” - a full -fledged user library

Add the "Mention" button to the chat

So that with the user tag does not begin the editing of the last message in the chat

Emoji on the forum

Change the sales policy on the cs go prime market

I propose to make the opportunity to create a second balance

Make a nickname to look for more

Applications for adding games (Steam)

Add the ability to postpone the theme of the topic through the API

Add to trading subsection "promotional codes"

Mass download Instagram accounts | Randomization of personal proxies

In sections with premotiation, to make the topic considered a new

Add a new rule stating that there is no refund for Auto Participation

Remove the loading lane or add the possibility of choosing

Add an adequate draft system

Add a preview when choosing a unique

I suggest adding the "show data" button after buying an autobay account account

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

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

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

Да

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

Нет