如何自动在HTML5播放器

Question

播放下一首歌曲我有一个HTML5的音频播放器，我似乎无法弄清楚如何使我的脚本会自动播放下一首歌曲在播放列表中的当前歌曲结束后。目前播放器播放一首歌然后停止。如果用户点击快进按钮，播放器自动播放歌曲也是理想的。

这里是我的JS代码：

jQuery(document).ready(function() { 

// inner variables 
var song; 
var tracker = $('.tracker'); 
var volume = $('.volume'); 

function initAudio(elem) { 
    var url = elem.attr('audiourl'); 
    var title = elem.text(); 
    var cover = elem.attr('cover'); 
    var artist = elem.attr('artist'); 

    $('.player .title').text(title); 
    $('.player .artist').text(artist); 
    $('.player .cover').css('background-image','url(' + cover+')');; 

    song = new Audio(url); 

    // timeupdate event listener 
    song.addEventListener('timeupdate',function(){ 
     var curtime = parseInt(song.currentTime, 10); 
     tracker.slider('value', curtime); 
    }); 

    $('.playlist li').removeClass('active'); 
    elem.addClass('active'); 
    playAudio(); 
} 
function playAudio() { 
    song.play(); 

    tracker.slider("option", "max", song.duration); 

    $('.play').addClass('hidden'); 
    $('.pause').addClass('visible'); 
} 
function stopAudio() { 
    song.pause(); 

    $('.play').removeClass('hidden'); 
    $('.pause').removeClass('visible'); 
} 
// play click 
$('.play').click(function (e) { 
    e.preventDefault(); 

    playAudio(); 
}); 

// pause click 
$('.pause').click(function (e) { 
    e.preventDefault(); 

    stopAudio(); 
}); 

// forward click 
$('.fwd').click(function (e) { 
    e.preventDefault(); 

    stopAudio(); 

    var next = $('.playlist li.active').next(); 
    if (next.length == 0) { 
     next = $('.playlist li:first-child'); 
    } 
    initAudio(next); 
}); 

// rewind click 
$('.rew').click(function (e) { 
    e.preventDefault(); 

    stopAudio(); 

    var prev = $('.playlist li.active').prev(); 
    if (prev.length == 0) { 
     prev = $('.playlist li:last-child'); 
    } 
    initAudio(prev); 
}); 

// show playlist 
$('.pl').click(function (e) { 
    e.preventDefault(); 

    $('.playlist').fadeIn(300); 
}); 

// playlist elements - click 
$('.playlist li').click(function() { 
    stopAudio(); 
    initAudio($(this)); 
}); 

// initialization - first element in playlist 
initAudio($('.playlist li:first-child')); 

// set volume 
song.volume = 0.8; 

// initialize the volume slider 
volume.slider({ 
    range: 'min', 
    min: 1, 
    max: 100, 
    value: 80, 
    start: function(event,ui) {}, 
    slide: function(event, ui) { 
     song.volume = ui.value/100; 
    }, 
    stop: function(event,ui) {}, 
}); 

// empty tracker slider 
tracker.slider({ 
    range: 'min', 
    min: 0, max: 10, 
    start: function(event,ui) {}, 
    slide: function(event, ui) { 
     song.currentTime = ui.value; 
    }, 
    stop: function(event,ui) {} 
}); 
}); 

Answer 1

我觉得关键，这是监听（或“绑定”，在jQuery的说法），在“端”上的音频播放标签事件。只要媒体播放完成，该功能就会启动。神秘魔术引用的例子利用了这一点，因此在该页面中搜索“已结束”以便看到这一行动。

Answer 2

我想做同样的事情，但我不能为一个很长一段时间。在查找了几个事件听众之后，我终于设法使其工作：D

function playAudio() { 

    song.addEventListener('ended', function() 
    { 
     var next = $('.playlist li.active').next(); 
       if (next.length == 0) 
      { 
         next = $('.playlist li:first-child'); 
       } 
     initAudio(next); 

    song.addEventListener('loadedmetadata', function() { 
       playAudio(); 

      }); 
     },false); 




    tracker.slider("option", "max", song.duration); 
song.play(); 
      $('.play').addClass('hidden'); 
       $('.pause').addClass('visible'); 


} 

把它作为您的playAudio函数。第一个eventlistener将歌曲循环播放列表中的下一首歌曲。而第二个事件监听器是这恰好是空（怪异），如果我不使用此事件侦听的song.duration。

如果你想使音频播放单击播放列表元素或进/快退按钮之后，然后添加到您的播放列表的点击功能和FWD /快退功能。

song.addEventListener('loadedmetadata', function() { 
       playAudio(); }); 

希望这可以帮助!!!! （我的第一个回答后：d）