Я использую WordPress. У меня есть аудиоплеер на моем сайте. Когда пользователь нажимает кнопку воспроизведения на отдельной песне, он будет воспроизводить песню. Идентификатор поста - это то, как игрок определяет, какую песню проигрывать.
Таким образом, в DIV, который оборачивает тег кнопки, я назначаю атрибут: data-id, который является идентификатором записи песни. Затем мое приложение получает файл MP3, связанный с этим идентификатором записи. Простой.
Мой тег кнопки воспроизведения по сути такой:
<div class="item item-action" data-id="1161">
<button class="btn-playpause"></button>
</div>
Ниже приведены важные части моего файла player.js, который обрабатывает событие click и воспроизводит песню:
Имитация кнопки воспроизведения
// simulate the play btn
$(document).on('click.btn', '.btn-playpause, .btn-queque', function(e){
e.stopPropagation();
var self = $(this),
item = $(this).closest('.item'),
id = item.attr('data-id'),
type = item.data('user-id') ? 'user' : 'post',
play = true;
if(!player){
getItem(id, type).done(function(obj){
if(obj.status == 'success'){
mep.mepPlaylistTracks = obj.tracks;
initPlayer();
player && player.mepSelect(0, true);
}
});
return;
}
if(self.is('.btn-queque')){
play = false;
self.parent().dropdown('toggle');
}
if( self.hasClass('is-playing') ){
self.removeClass('is-playing');
player.pause();
}else{
var index = player.find(id);
if( index !== -1){
var track = player.mepGetCurrentTrack();
if(track && track.id == id && !play) return;
player.mepSelect(index, true);
}else{
getItem(id, type).done(function(obj){
if(obj.status == 'success'){
addToPlay(obj.tracks, play);
}
});
}
}
});
Функция getItem ()
function getItem(id, type){
return $.ajax({
type : "post",
dataType : "json",
url : ajax.ajax_url,
data : {action: "ajax_music", id : id, type: type, nonce: ajax.nonce}
});
}
функция addToPlay ()
function addToPlay(obj, play){
if(obj.length == 1){
player.mepAdd( obj[0], play );
}else if(obj.length > 1){
if(play){
player.options.mepPlaylistTracks = obj;
player.updatemepList();
player.mepSelect(0, true);
}else{
for(var i=0; i<obj.length; i++){
player.mepAdd( obj[i] );
}
}
}
}
Вы можете видеть, что как только я нажимаю кнопку воспроизведения, в зависимости от условия запускается функция getItem(). getItem () принимает атрибут data-id, определенный ранее как переменную id, и начинает воспроизведение песни.
Функция addToPlay() добавит еще одну песню в список воспроизведения, если уже есть экземпляр открытого проигрывателя. И когда пользователь нажимает другую кнопку воспроизведения, он добавляет эту новую песню в список и начинает воспроизводить эту песню.
Можно ли изменить этот код, чтобы я мог добавить несколько значений идентификатора данных в код кнопки, чтобы мой сценарий распознал, что существует более одного идентификатора песни, и добавил их в мой список воспроизведения, используя функцию addToPlay()
Я бы хотел сделать что-то вроде этого
<div class="item item-action" data-id="1161, 1288, 1456">
<button class="btn-playpause"></button>
</div>
Причина, по которой я хочу это сделать, заключается в том, что я хотел бы добавить функцию, которая позволит моим пользователям воспроизводить все песни на текущей странице, которую они просматривают. Некоторые из наших страниц, например страница каталога, отображают десятки песен, которые соответствуют определенным критериям, и я хотел бы, чтобы опция воспроизводила все песни на странице.
Может кто-нибудь помочь подтолкнуть меня в правильном направлении?
Спасибо.