jQuery関数audioElement endedが機能しません

Question

< audio>要素を作成し、ボタンをクリックすると、曲を再生するコードがあります。ここまでは順調ですね。クリックすると「Play Music」から「Stop Music」に変わります。

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'); 
}); 
}); 

Answer 1

次の曲を開始するためにあなたのコメントにあなたの質問への答えは：audioタグのsrc -attributeを変更

は、ここで全体のコードです。例えば。新しいbuttonと呼ばれる「次」と、次のスクリプトを追加：

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

も更新 jsfiddleを参照してください。

=== === UPDATE

• まずrandonNumberがインクリメントされます。 modulo %（除算の残り）は、その数が曲の数よりも多いことを防ぎます。
• 次に、audioタグのソースが次の曲に設定されます。
• 誰かがplay buttonをクリックしたように、少なくともclick event will be triggeredなので、play click handlerは曲を開始し、buttonの可視性を変更します。