Как создать аудио-проигрыватель на JSСегодня мы хотим рассказать о том, как создать весьма интересный и визуально привлекательный аудио-проигрыватель для сайта при помощи JavaScript. Идея состоит в том, что у нас будет небольшой плеер в светлых тонах с навигационными клавишами для переключения треков, а также диск, который будет вращаться при проигрывании музыки. Кроме этого фон будет размываться в дизайн обложки альбома играющей музыки. Также будет реализован статус-бар с индикатором времени трека и возможностью перейти к нужному времени.

 

Много новых шаблонов, а также полная поддержка русского языка, элементатора, а также адаптивности вы можете найти в предложениях наших партнеров:

Как создать аудио-проигрыватель на JS

Шаг 1. HTML

Чтобы создать такой аудио-плеер, нам понадобиться подключить библиотеку jQuery, также для каждого значения плеера мы будем устанавливать определенные ID, названия которых, интуитивно, вы можете понять за что отвечают. К примеру <div id=»bg-artwork»> будет отвечать за размытие фона в тон обложки.

В плеер добавили возможность переключать треки на сайте, а также индикатор проигрывания, кроме этого будет установлена обложка для каждого альбома в плеере.

Создать красивый аудиоплеер для сайта проигрывание подкастов

Шаг 2. CSS

Теперь перейдем к визуальной составляющей плеера. Нам необходимо установить стили для аудио-проигрывателя который будет у нас в белых тонах.  Для начала добавляем параметры для фона и обложки:

Затем нам нужно создать оболочку для плеера, делаем мы это следующим образом:

У нас будет выпадающая плашка, в которой будет отображаться название трека, продолжительность и длинна в секундах, все это мы стилизируем в плеере следующими стилями:

Нам нужно добавить обложку альбомов в аудио-проигрыватель, стилизовать его в круглый диск, и чтобы он создавал эффект вращения при проигрывании:

Также добавим кнопки управления треками, для удобной переключения композиций:

Мы добавили немного адаптивности для плеера, что позволит правильно отображаться на мобильных устройствах, полный код можете просмотреть в исходниках, а сейчас двигаемся дальше.

Шаг 3. JavaScript

Теперь нам необходимо подключить треки к плееру, установить проигрывания песен и отображения таймлайна и многое другое, в этом нам поможет js:

Выводы

Такой плеер, это универсальное средство установки аудио у себя на сайте, кроме этого вы можете установить его в качестве прослушивания подкастов на сайте, что сейчас весьма популярно. Что скажете друзья?

Вот и все. Готово!