jQuery函數audioElement結束不起作用

我有一些代碼創建了一個< audio>元素並播放歌曲，當我點擊一個按鈕時。到現在爲止還挺好。該按鈕在點擊時從「播放音樂」變爲「停止音樂」。jQuery函數audioElement結束不起作用

現在我加入這個代碼：

audioElement.addEventListener('ended', function() { 
    $('span#pause').fadeOut('slow'); 
    $('span#play').delay(1500).fadeIn('slow'); 
});

這在技術上應該再次顯示播放按鈕，當歌曲結束。但事實並非如此。有人可以告訴我爲什麼嗎？

這裏是整個代碼：

$(document).ready(function() { 

var songList = [ 
    'song1.ogg', 
    'song2.ogg', 
    'song3.ogg' 
]; 
var randomNumber = Math.floor(Math.random()*songList.length); 

var audioElement = document.createElement('audio'); 
audioElement.setAttribute('src', songList[randomNumber]); 
audioElement.load(); 

audioElement.addEventListener('ended', function() { 
    $('span#pause').fadeOut('slow'); 
    $('span#play').delay(1500).fadeIn('slow'); 
}); 

$('#play').click(function() { 
    audioElement.play(); 
    $('span#play').fadeOut('slow'); 
    $('span#pause').delay(1500).fadeIn('slow'); 
}); 

$('#pause').click(function() { 
    audioElement.pause(); 
    $('span#pause').fadeOut('slow'); 
    $('span#play').delay(1500).fadeIn('slow'); 
}); 
});

來源

2011-09-10 Mausoleum

沒人能幫到這裏嗎？ – Mausoleum

找不到問題（使用Firefox 6）。看我的[jsfiddle]（http://jsfiddle.net/DN8wT/14/）。 – scessor

不知何故，現在它也適用於我...真是awkard。現在你是如何開始下一首歌的？ – Mausoleum

答案在您的評論，開始下一首歌曲你的問題：改變audio標籤的src -attribute。例如。添加一個新的名爲button「下一步」，下面的腳本：

$('#next').click(function() { 
    randomNumber = (randomNumber + 1) % songList.length; 
    audioElement.setAttribute('src', songList[randomNumber]); 
    $('#play').click(); 
});

也看到更新jsfiddle。

=== UPDATE ===

首先randonNumber將遞增。 modulo %（除法餘數）可以防止該數字高於歌曲數量。
然後audio標籤的來源將被設置爲下一首歌曲。
至少有一個click event will be triggered，就像有人點擊了play button，因此play click handler開始播放歌曲並更改button的可見性。

來源

2011-09-10 21:32:06 scessor

謝謝你。你能解釋我到底發生了什麼嗎？ – Mausoleum

謝謝！你真棒！ – Mausoleum

jQuery函數audioElement結束不起作用

回答

相關問題