Делаем аудиоплеер

Онлайн-инструмент, который позволяет вам создать аудиоплеер с плейлистом для вашего сайта без знаний программирования. Вы выбираете настройки плеера, добавляете список треков, а генератор создаёт готовый HTML-код плеера.



Предпросмотр плеера

Подробнее о генераторе

Все ваши настройки автоматически сохраняются в браузере (localStorage). Это поможет не потерять изменения при случайном обновлении страницы. Если хотите начать с чистого листа, нажмите кнопку "Сброс настроек" и все параметры вернутся к значениям по умолчанию.

Плеер поддерживает все форматы, которые может воспроизводить HTML5 audio: MP3, WAV, OGG и другие. Трек может быть один или необходимое количество. После проигрывания трека, плеер автоматически переключается на следующий. Используется зацикливание, если проиграет последний трек, автоматически начнётся воспроизведение первого.

Плейлист вводится в текстовое поле и должен содержать треки в формате:

URL - Название - Исполнитель - Альбом - Год, URL - Название - Исполнитель - Альбом - Год, ...

В таком формате правильно:

URL - Название - Исполнитель - Альбом, URL - Название - Исполнитель - Альбом, ...

И в таком формате правильно:

URL - Название, URL - Название, ...

Обязательные поля: URL и Название. Остальные поля - по желанию.

Каждый трек разделяется запятой, а поля внутри трека через " - " (пробелы вокруг дефиса обязательны).

Работающий пример, можно скопировать в поле добавления треков (для просмотра):

https://bootstraptema.ru/music/a/anna-asti.mp3 - Название - Исполнитель - Альбом - 2020, https://bootstraptema.ru/music/s/silent.mp3 - Название - Исполнитель

Выбирайте между Малый, Средний и Большой - влияет на ширину и размер элементов.

Минимальный - только кнопка воспроизведения/паузы.

Стандартный - кнопки воспроизведения, стопа, следующего и предыдущего трека.

Расширенный - стандартный набор + регулятор громкости.

Цвет плеера: задаёт цвет фона всего плеера. Доступны форматы цветов: RGB, HSL и HEX.

Цвет фона кнопок: цвет фона для всех кнопок управления. Доступны форматы цветов: RGB, HSL и HEX.

Цвет текстовых компонентов: цвет иконок на кнопках, цвет цифр времени и текста используемого в треках. Доступны форматы цветов: RGB, HSL и HEX.

Шрифт: выбирайте из популярных шрифтов Google Fonts.

Размер текста: размер шрифта в пикселях для текста внутри плеера и иконок кнопок.

Форма кнопок: кнопки могут быть квадратные, с закруглёнными углами или круглые кнопки.

Стиль прогресс-бара: линейный или градиентный прогресс-бар (отображает ход воспроизведения композиции).

Внутренний и внешний отступы: управление отступами в (px) внутри и вокруг плеера.

Расположение элементов: кнопки сверху и плейлист снизу или наоборот.

Тени и эффекты: включение/отключение тени и эффекта подсветки кнопок при наведении.

Видимость элементов на мобильных: включение/отключение показа кнопок и плейлиста на мобильных устройствах.

Код, созданный в генераторе можно "допилить" до необходимых внешних параметров вручную. Сам код состоит из CSS стилей, HTML и JavaScript кода:

<style>
Здесь находятся стили плеера
</style>

Здесь HTML код

<script>
Здесь код скрипта
</script>

Внешний вид регулируется в стилях аудиоплеера, полная работоспособность гарантируется при размещении HTML кода в теле документа, внутри тега <body>.

Быструю проверку полученного кода вы сможете провести воспользовавшись нашим HTML редактором кода.

Ещё генераторы