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

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

System of notifications about the expiration of the Holder

Custom link to theme

"You recently searched"

The possibility of moving templates

Rule - TSU be sure to answer in a halava during distribution

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

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

Add Last played to filters

Division of games into "paid" and "free"

Add auto stocking at a petition discount

Add the ability to view the list of games

A couple of sentences

Make likes, likes, messages, etc. clickable in the Top and more.

Add bottom page switching in sweepstakes participants

Displaying Likes/Likes in Sections

Add prefixes for EFT: Arena

Mass download Instagram accounts | Randomization of personal proxies

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

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

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

“Favorites 2.0” - a full -fledged user library

Add complain button in "warnings"

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

Add the ability to specify Matrix in forum contacts

Replace the secret word with stars

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

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

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

Да

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

Нет