В это статье вы прочитает о том, как сделать аудиоплеер на JavaScript и HTML, если вы задаётесь вопросом как это сделать, то вам сюда.
Также посмотрите наш учебник по HTML, если вы его плохо знаете.
Создание аудиоплеера:
Для начала разберём логику плеера и что мы тут реализуем, а реализуем переключение треков, и сам плейлист, что касается паузы, то в HTML уже по стандарту это есть.
HTML:
Начнём с HTML, тут вообще не чего сложного нет, надо просто написать тег <audio>
внутри документа и добавить атрибут controls
.
1 | <audio id="audio" src="./audio/treck1.mp3" controls></audio> |
Вот результат.
Как видите стандартный HTML плеер выглядит красиво, но есть одна проблема, его возможности ограниченны, вы можете только останавливать трек и менять громкость и всё, что на мой взгляд не достаточно, поэтому мы уберём атрибут controls
, после чего у нас будет пустой экран.
Так как теперь у нас пустой экран, мы добавим кнопки для управления, также тег для аудио дорожек.
1 2 3 4 5 6 7 | <div id="controls"> <div class="audio-track"><div class="time"></div></div> <button class="play">Play</button> <button class="pause">Pause</button> <button class="prev"><prev</button> <button class="next">next></button> </div> |
Давайте разберём, <div>
с классом audio-track
, это аудио дорожка, внутри него имеется <div>
с классом time
, это остаток сколько осталось до окончания.
Также дальше идут четыре тега <button>
, это кнопки, первая для проигрывания музыки, вторая для паузы, третья переключает на предыдущий трек, четвёртая кнопка на следующий.
CSS:
Теперь перейдём к CSS, с помощью его мы изменим только дорожку, кнопки оставим по умолчанию, как они сделаны в браузере.
1 2 3 4 5 6 7 8 9 10 11 12 | .audio-track { width: 150px; height: 3px; background-color: #dddddd; margin: 20px 0 } .time { width: 0; height: 3px; background-color: #474747 } |
Вот что получилось.
У нас появилась не большая дорожка, серого цвета, также при проигрывание она будет закрашиваться в почти чёрный цвет, за счёт увеличения <div>
с классом time.
JavaScript:
Пришло время самому главному, к созданию основной логике на чистом JavaScript, для начала мы возьмём все элементы из HTML.
1 2 3 4 5 6 | let audio = document.getElementById("audio"); // Берём элемент audio let time = document.querySelector(".time"); // Берём аудио дорожку let btnPlay = document.querySelector(".play"); // Берём кнопку проигрывания let btnPause = document.querySelector(".pause"); // Берём кнопку паузы let btnPrev = document.querySelector(".prev"); // Берём кнопку переключения предыдущего трека let btnNext = document.querySelector(".next"); // Берём кнопку переключение следующего трека |
Мы тут просто взяли элементы с которыми будим работать, элемент <audio>
берём через id, а остальные через селектор.
Дальше сделаем массив с названиями треков и переменную в которой будет хранится индекс трека в массиве.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // Массив с названиями песен let playlist = [ 'treck1.mp3', 'treck2.mp3', 'treck3.mp3', 'treck4.mp3', ]; let treck; // Переменная с индексом трека // Событие перед загрузкой страницы window.onload = function() { treck = 0; // Присваиваем переменной ноль } |
Самое интересное в этом коде, это window.onload
, оно нужно что бы выполнять какие то действия, во время загрузки страницы, в нашем случае, присваивает переменной treck значение ноль.
Тут у многих возник вопрос, почему надо присваивать значение переменной именно во время загрузки страница, а не во время объявления переменной, так сделано потому что иначе, её значение всегда было бы ноль, нам же надо использовать для переключения песен.
Теперь перейдём к функции для переключения песен.
1 2 3 4 5 6 7 8 | function switchTreck (numTreck) { // Меняем значение атрибута src audio.src = './audio/' + playlist[numTreck]; // Назначаем время песни ноль audio.currentTime = 0; // Включаем песню audio.play(); } |
В начале мы в функции передаём индекс песни, которая нам нужна, следующие меняем путь до трека, с помощью audio.src
назначаем путь до песни которая нам нужна, взяв название песни из playlist
.
Потом назначаем audio.currentTime
значение ноль, оно отвечает на какой минуте проигрывается песня, то есть мы песню ставим на нулевую секунду.
Последнее это запуск песни через audio.play()
.
Теперь перейдём к обработку событий этих кнопок, для работы с плеером и музыкой.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | btnPlay.addEventListener("click", function() { audio.play(); // Запуск песни // Запуск интервала audioPlay = setInterval(function() { // Получаем значение на какой секунде песня let audioTime = Math.round(audio.currentTime); // Получаем всё время песни let audioLength = Math.round(audio.duration) // Назначаем ширину элементу time time.style.width = (audioTime * 100) / audioLength + '%'; // Сравниваем, на какой секунде сейчас трек и всего сколько времени длится // И проверяем что переменная treck меньше четырёх if (audioTime == audioLength && treck < 3) { treck++; // То Увеличиваем переменную switchTreck(treck); // Меняем трек // Иначе проверяем тоже самое, но переменная treck больше или равна четырём } else if (audioTime == audioLength && treck >= 3) { treck = 0; // То присваиваем treck ноль switchTreck(treck); Меняем трек } }, 10) }); |
Это пожалуй самая сложная часть программы, когда мы нажимаем кнопку «Play».
Первым делом начинаем проигрывать песню, потом запускаем интервал, он нам нужен, что бы отследить, когда переключать трек на следующий.
Внутри интервала присваиваем переменной audioTime
на какой секунде сейчас трек, и переменной audioLength
, присваиваем сколько всего секунд длится песня, потом вычисляем по формуле сколько процентов песни уже проигралась и назначаем это значение ширине элемента time
, тем самым мы создали линию прогресса.
Идёт условие, где проверяем что переменная audioTime
и audioLength
, это нужно что бы убедиться в том что песня закончилась, также проверяем переменную treck
, что бы она была меньше трёх, это нужно что бы её значение не стало больше индекса массива и песни не остановились.
Если условие верно, то увеличиваем переменную treck
и меняем песню используя функцию switchTreck
.
Иначе опять идёт проверка на то, что песня закончилась, но уже смотрим что бы переменная treck
, была больше или равна трём, если верна присваиваем ей ноль и также меняем трек.
Дальше идёт обработки кнопки пауза.
1 2 3 4 | btnPause.addEventListener("click", function() { audio.pause(); // Останавливает песню clearInterval(audioPlay) // Останавливает интервал }); |
Тут даже не чего рассказывать, всё понятно из комментариев к коду.
Последнее что надо разобрать, это кнопки переключений песен, вот как переключаем на предыдущую.
1 2 3 4 5 6 7 8 9 10 | btnPrev.addEventListener("click", function() { // Проверяем что переменная treck больше нуля if (treck > 0) { treck--; // Если верно, то уменьшаем переменную на один switchTreck(treck); // Меняем песню. } else { // Иначе treck = 3; // Присваиваем три switchTreck(treck); // Меняем песню } }); |
Думаю из комментариев всё понятно, не буду объяснять что к чему. Вот как переключать на следующую песню.
1 2 3 4 5 6 7 8 9 10 | btnNext.addEventListener("click", function() { // Проверяем что переменная treck больше трёх if (treck < 3) { // Если да, то treck++; // Увеличиваем её на один switchTreck(treck); // Меняем песню } else { // Иначе treck = 0; // Присваиваем ей ноль switchTreck(treck); // Меняем песню } }); |
На этом всё заканчивается, всё прекрасно работает и вот результат.
Вывод:
В этой статье вы посмотрели как сделать аудиоплеер на JavaScript и HTML, думаю вам понравилось.
Также надо сказать, что тут ещё многое можно доработать и сделать, к примеру, вывод всех треков или изменение громкости и т.д..
Но тогда бы статья получилось очень большой, на мой взгляд она и так не маленькая, поэтому не стал этого делать.
Но если вы хотите доработать аудиоплеер на JavaScript, то скачайте файлы его и зайдите по этой ссылки, там всё что нужно знать для работы с аудио в JS.