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

Для создания данного плеера мы будем использовать скрипт MediaElement.js. Сначала нам необходимо создать разметку HTML, при этом также подключаем скрипты и стили:

После этого вызываем сам плагин, это делаем с помощью команды:

Следующим этапом будет стилизация плеера с помощью CSS.

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

Теперь давайте стиль полоски плеера, при этом мы установим ширину 400px и высоту 120px. Также добавим CSS3 градиент фона с закругленными углами.

Теперь рассмотрим основные элементы плеера (воспроизведение / пауза, отключение звука / включение звука) . Для этого мы зададим некоторые общие стили для кнопок, а затем мы установили фиксированную ширину и высоту. Мы позиционируем  кнопки "пауза / воспроизведение"  и "отключение / включение микрофона" кнопки в том же положении, при этом они будут переключать события:

Для стиля ползунка громкости мы зададим позиционирование, 200px ширина и высота 8px. Нам также необходимо установить цвет фона, тени и закругленные углы.

Затем нам нужно задать стиль "текущей позиции песни" , делать это мы будем с помощью фонового изображения, закругленных углов и т.д.

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

Далее создаем ручки для громкости, которые будут отображаться в виде стальных кругов:

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

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

Читайте также: