Аудиоплеер на HTML и JavaScript

аудиоплеер на javascript
Метки: / /

В это статье вы прочитает о том, как сделать аудиоплеер на JavaScript и HTML, если вы задаётесь вопросом как это сделать, то вам сюда.

Также посмотрите наш учебник по HTML, если вы его плохо знаете.

Создание аудиоплеера:

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

HTML:

Начнём с HTML, тут вообще не чего сложного нет, надо просто написать тег <audio> внутри документа и добавить атрибут controls.

Вот результат.

как добавить аудиоплеер на сайт html

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

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

Давайте разберём, <div> с классом audio-track, это аудио дорожка, внутри него имеется <div> с классом time, это остаток сколько осталось до окончания.

Также дальше идут четыре тега <button>, это кнопки, первая для проигрывания музыки, вторая для паузы, третья переключает на предыдущий трек, четвёртая кнопка на следующий.

CSS:

Теперь перейдём к CSS, с помощью его мы изменим только дорожку, кнопки оставим по умолчанию, как они сделаны в браузере.

Вот что получилось.

аудиоплеер на js

У нас появилась не большая дорожка, серого цвета, также при проигрывание она будет закрашиваться в почти чёрный цвет, за счёт увеличения <div> с классом time.

JavaScript:

Пришло время самому главному, к созданию основной логике на чистом JavaScript, для начала мы возьмём все элементы из HTML.

Мы тут просто взяли элементы с которыми будим работать, элемент <audio> берём через id, а остальные через селектор.

Дальше сделаем массив с названиями треков и переменную в которой будет хранится индекс трека в массиве.

Самое интересное в этом коде, это window.onload, оно нужно что бы выполнять какие то действия, во время загрузки страницы, в нашем случае, присваивает переменной treck значение ноль.

Тут у многих возник вопрос, почему надо присваивать значение переменной именно во время загрузки страница, а не во время объявления переменной, так сделано потому что иначе, её значение всегда было бы ноль, нам же надо использовать для переключения песен.

Теперь перейдём к функции для переключения песен.

В начале мы в функции передаём индекс песни, которая нам нужна, следующие меняем путь до трека, с помощью audio.src назначаем путь до песни которая нам нужна, взяв название песни из playlist.

Потом назначаем audio.currentTime значение ноль, оно отвечает на какой минуте проигрывается песня, то есть мы песню ставим на нулевую секунду.

Последнее это запуск песни через audio.play().

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

Это пожалуй самая сложная часть программы, когда мы нажимаем кнопку «Play».

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

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

Идёт условие, где проверяем что переменная audioTime и audioLength, это нужно что бы убедиться в том что песня закончилась, также проверяем переменную treck, что бы она была меньше трёх, это нужно что бы её значение не стало больше индекса массива и песни не остановились.

Если условие верно, то увеличиваем переменную treck и меняем песню используя функцию switchTreck.

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

Дальше идёт обработки кнопки пауза.

Тут даже не чего рассказывать, всё понятно из комментариев к коду.

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

Думаю из комментариев всё понятно, не буду объяснять что к чему. Вот как переключать на следующую песню.

На этом всё заканчивается, всё прекрасно работает и вот результат.

Конечный результат плеера

Вывод:

В этой статье вы посмотрели как сделать аудиоплеер на JavaScript и HTML, думаю вам понравилось.

Также надо сказать, что тут ещё многое можно доработать и сделать, к примеру, вывод всех треков или изменение громкости и т.д..

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

Но если вы хотите доработать аудиоплеер на JavaScript, то скачайте файлы его и зайдите по этой ссылки, там всё что нужно знать для работы с аудио в JS.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую: