Делаем аудиоплеер
Онлайн-инструмент, который позволяет вам создать аудиоплеер с плейлистом для вашего сайта без знаний программирования. Вы выбираете настройки плеера, добавляете список треков, а генератор создаёт готовый 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 редактором кода.
Ещё генераторы
