如何自動在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）