Другое Введение возможности отправки аудио файлов .mp3, .wav etc

rasez · 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

арктерикс · 25 июн 2025

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

onechance · 25 июн 2025

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

DaleCooper · 25 июн 2025

rasez · 25 июн 2025

BABLO · 25 июн 2025

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

Kefisto · 25 июн 2025

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

228 · 26 июн 2025

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

sunrisetuna · 27 июн 2025

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

savemyfutu · 2 июл 2025

легенда

Vangse · 2 июл 2025

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

inkussia · 7 июл 2025

rasez · 12 июл 2025

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

Suds · 14 июл 2025

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

Автоматически менять пароль на аккаунтах без привязанной почты

Возможность перемещения шаблонов

Заменять секретное слово на звездочки

"Ваш вопрос относится к работе форума?"

Добавить в раздел " буст аккаунтов " префикс игр ZZZ + honkai star rail

Система уведомлений об истечении срока холда

Сделать автозагрузку вместо кнопки "Следующая страница"

[586 ЗА] - Новое повышение групп "Пользователей" - "Нейросеть"

Сделать кликабельными Симпатии, лайки, сообщения и т.д в Топе и не только.

Добавить нижнее переключение страниц в участниках розыгрышей

Отображения Симпатий/Лайков в Разделах

Добавить префиксы для подраздела EFT: Arena

Объединять в темах для отзывов не только сообщения, но и первый комментарий

Добавить в фильтр поиска игр Steam "ИЛИ"

Добавить возможность "скрывать" ненужные игры Steam при поиске

Добавить кнопку хайда для автора темы на стиль 2024 - main page redesign

Дополнить "Пользователи, которые могут..." в настройках приватности.

Добавить в раздел "Valorant" подраздел "Valorant Mobile"

Изменить политику продаж на маркете праймов кс

Предлагаю сделать возможность создать второй баланс

Массовая загрузка Instagram аккаунтов | Рандомизация личных ******

Возможность отключать автопостинг при обновлении аватарки

Добавить возможность видеть только свой отзыв на маркете

Добавить кнопку "упомянуть" в чат

Плашка о временной почте

Добавить префиксы в раздел «Escape From Tarkov»

Добавить новые префиксы в подраздел «EFT:Arena»

“Избранное 2.0” — полноценная библиотека пользователя

Взаимодействие с Администрацией во время бана

Включить эмодзи на форуме

Другое Введение возможности отправки аудио файлов .mp3, .wav etc

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

Да

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

Нет