Другое Введение возможности отправки аудио файлов .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

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

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

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

Добавить предпросмотр при выборе уника

Добавить адекватную систему черновиков

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

Обновить систему рангов лолза

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

Добавить возможность продавать пустие аки

Кастомная ссылка на тему

Предложение функционала Market API для улучшения анализа аккаунтов

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

Статус серверов LZT

Добавить фиолетовую обводку возле 4 - звездочных конусов в игре Honkai star rail

Обновить информацию на купленных аккаунтах

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

Сделать новую аватарку новокекам

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

Запретить обязательную подписку для использования бота

Ббкод для копирования занесённого в него текста

Переименовать "темы пользователя" в "закреплённые темы"

Добавить парсинг и фильтры украшений дискорд на маркете

История паролей авторег почты (для перепродаж)

Добавить кнопку "Пожаловаться" в мини-профиле

[17+] Удаление текста с помощью крестика в поле ввода

Изменить дизайн главных кнопок при наведении

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

Добавить новую выборку-фильтр "не передовался ранее мной" .. или Хомиаку, опять не удобно...

Продажа 6 тх без всего

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

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

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

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

Да

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

Нет