Создание динамического плейлиста и индикатора выполнения не должно быть сложной задачей. Я создал довольно простой способ реализации динамического музыкального плейлиста вместе с индикатором выполнения из начальной загрузки. Для начала убедитесь, что bootstrap импортирован в ваш проект — это для индикатора выполнения. Вам также необходимо убедиться, что JQuery импортирован.
Давайте сразу приступим к делу.
Во-первых, создайте аудиоэлемент с пустым src, а также div, который содержит кнопки воспроизведения/паузы и вперед и заголовок, чтобы мы могли динамически добавлять к нему текст, например, название песни, когда песня воспроизводится следующим образом:
<div class="alert text-center" role="alert"> <i class="fas fa-volume-mute pause-btn" id="volume-toggler"></i> <span id="song">DaBaby - BOP</span> <i class="fas fa-forward forward"></i> </div> <audio id=”audio” preload=auto> <source src=”” type=”audio/mpeg”> Your browser does not support the audio element. </audio>
Вам решать, добавлять текст в диапазон или нет, но имейте в виду, что если вы этого не сделаете, пользователь не увидит ничего, кроме кнопки воспроизведения и вперед. Это не идеально (имхо). Поскольку мы знаем, что такое первая песня, мы можем просто поместить ее в диапазон, чтобы пользователю было понятно, что происходит. Хорошо, так как мы разобрались с этим.. СЛЕДУЮЩИЙ
Вы оставляете audio src пустым, потому что вы будете динамически изменять его с помощью Javascript.
Во-первых, мы хотим настроить таргетинг на элемент audio в нашем js-файле, чтобы мы могли использовать его позже:
let song = document.getElementById(‘audio’);
И пока мы на этом, давайте инициализируем другие переменные, которые нам понадобятся, такие как диапазон заголовков, который имеет идентификатор «song», счетчик песен, чтобы мы могли отслеживать позицию в списке воспроизведения, и вложенный массив песен. .
let title = document.getElementById(‘song’); let numberOfSong = 0; let playlist = [ [‘path-to-mp3’, ‘artist info’], [‘path-to-mp3’, ‘artist-info’]];
Теперь о функциях…
Мы хотим, чтобы наш плейлист воспроизводил песню при нажатии кнопки, и так, как я ее настроил, кнопка представляет собой значок, который сначала находится в отключенном состоянии, а при нажатии трансформируется в звуковое состояние (просто, переключение значков). Итак, когда пользователь нажимает кнопку отключения звука, я хочу, чтобы песня воспроизводилась и меняла значок на звук. Теперь вы можете легко сделать это следующим образом (имейте в виду, что значки отключения звука/звука имеют класс pause-btn):
function play(){
song.play();
}
$('.pause-btn').click(() => {
play();
})
Но это было бы не очень эффективно, потому что наша цель — создать плейлист, который обрабатывает несколько песен, действительно динамичный плейлист. При таком подходе вам придется написать несколько функций, которые проверяют, какая песня воспроизводится, воспроизводится ли песня вообще и т. д. Вместо этого мы хотим сохранить обработчик кликов для pause-btn, но мы хотели бы знать в каком «состоянии» он находится. Мы можем сказать это по значку. Если значок отключен, песня не воспроизводится. Если значок является значком звука, то песня воспроизводится. Итак, мы можем проверить это, вызвав метод hasClass для класса pause-btn в операторе if, а затем заставить его что-то сделать. Нравится:
$(‘.pause-btn’).click(() => {
let pauseOrPlay = $(‘.pause-btn’);
if(pauseOrPlay.hasClass(‘fas fa-volume-up’) || pauseOrPlay.hasClass(‘fa-volume-up fas’) {
//do something
}
})
Затем мы хотим заставить его что-то делать. Прежде всего, мы хотим изменить значки, поэтому мы можем сделать это с помощью метода toggleClass. Затем мы хотим узнать, поставлена ли песня на паузу или вообще не воспроизводится. Это важно, потому что, если песня была поставлена на паузу, мы хотим начать с того места, где она закончилась в последний раз, как только пользователь снова нажмет кнопку паузы. Мы можем увидеть это, используя оператор if и проверив длительность аудиоэлемента. Если продолжительность аудиоэлемента больше 0, мы знаем, что музыка была приостановлена, и пользователь хотел бы воспроизвести ее снова. Если продолжительность аудиоэлемента равна 0, то это первый раз, когда пользователь нажал кнопку паузы, и мы хотели бы начать с начала списка воспроизведения. Итак, вы можете сделать это:
$(‘.pause-btn’).click(() => {
let pauseOrPlay = $(‘.pause-btn’);
if(pauseOrPlay.hasClass(‘fas fa-volume-mute’) || pauseOrPlay.hasClass(‘fa-volume-mute fas’) {
if(song.duration > 0){
playCurrentSong();
} else {
next();
}
}
})
Затем, используя тот же обработчик кликов, мы хотим написать оператор if, если кнопка паузы находится в отключенном состоянии. Если он отключен, все, что нам нужно сделать, это изменить значок и приостановить воспроизведение песни. Вот так:
$(‘.pause-btn’).click(() => {
let pauseOrPlay = $(‘.pause-btn’);
if (pauseOrPlay.hasClass(‘fas fa-volume-mute’) || pauseOrPlay.hasClass(‘fa-volume-mute fas’)) {
$(‘.pause-btn’).toggleClass(‘fas fa-volume-up fas fa-volume-mute’);
if (song.duration > 0) {
playCurrentSong();
} else {
next();
}
} else if (pauseOrPlay.hasClass(‘fas fa-volume-up’) || pauseOrPlay.hasClass(‘fa-volume-up fas’)) {
$(‘.pause-btn’).toggleClass(‘fas fa-volume-up fas fa-volume-mute’);
pauseSong();
}
});
Прежде чем мы напишем наши основные функции, давайте избавимся от JQuery. Давайте сделаем кнопку «вперед» функциональной. Как только пользователь нажмет кнопку «Вперед», он запустит функцию «Далее».
$(‘.forward’).click(() => {
next();
});
Теперь перейдем к самой важной функции, чтобы этот плейлист работал. Следующая функция. Во-первых, мы хотим проверить, равна ли переменная numberOfSong длине плейлиста. Если это так, мы хотим, чтобы плейлист начинался с самого начала. Поскольку переменная numberOfSong в основном является нашим счетчиком для нашего массива списков воспроизведения, мы используем ее для управления воспроизводимой песней. Итак, мы меняем src с помощью счетчика, но поскольку это вложенный массив, нам нужно явно указать, к какому индексу в массиве мы пытаемся получить доступ. Поскольку мы знаем, что каждый вложенный массив имеет только два значения, мы можем получить доступ к каждому значению, явно указав на него по его индексу, который в данном случае равен либо 0, либо 1. В этом случае 0 всегда будет песней, а 1 всегда будет названием песни. Затем мы хотим изменить название песни динамически, и мы можем сделать это, изменив innerHTML переменной title, которая является классом песни в HTML (помните тот диапазон, о котором мы говорили? Если нет, прокрутите вверх, чтобы увидеть переменные, которые мы создали в начале урока). Затем мы хотим увеличивать переменную-счетчик numberOfSong каждый раз, когда вызывается эта функция. Нам также нужно загрузить аудиофайл, а затем воспроизвести его.
function next() {
if (numberOfSong === playlist.length) {
numberOfSong = 0;
}
song.src = playlist[numberOfSong][0];
title.innerHTML = playlist[numberOfSong][1];
numberOfSong++;
song.load();
song.play();
}
Далее у нас есть две меньшие функции, которые в основном приостанавливают воспроизведение песни или продолжают воспроизведение текущей песни. Я назвал эти функции playCurrentSong и pauseSong.
function pauseSong() {
song.pause();
}
function playCurrentSong() {
song.play();
}
Теперь, что касается последней части... было бы неправильно, если бы у нас не было индикатора выполнения, верно? Итак, нам нужно добавить элемент индикатора выполнения в наш HTML. Везде, где вы хотите, чтобы это было честно, желательно на виду. Для моего проекта я закрепил его наверху вместе с песней.
<div class=”progress”> <div class=”progress-bar” role=”progressbar” aria-valuenow=”30" aria-valuemin=”0" aria-valuemax=”100"></div> </div>
Теперь все, что нам нужно сделать, это динамически увеличивать ширину индикатора выполнения каждый раз, когда время обновляется. Мы можем сделать это, добавив прослушиватель событий…
song.addEventListener(‘timeupdate’, onLoadProgress);
и функция, которая вычисляет время воспроизведения звука:
function onLoadProgress(){
var progress = parseInt(((song.currentTime / song.duration) * 100), 10);
var progressToString = ‘’ + progress + ‘%’;
$(‘.progress-bar’).attr(‘aria-valuenow’, progressToString);
$(‘.progress-bar’).css(‘width’, progressToString);
}
Тада! Теперь у вас есть динамический плейлист. Похлопайте себя по плечу, и если вы прочитали весь этот документ — большое вам спасибо. Если вы нашли это полезным, дайте мне пару хлопков :) Надеюсь, это кому-то поможет. До следующего раза, удачного кодирования.
