動態聲音在兩次播放後不播放

Question

我有一個小小的html5應用程序，您可以通過單擊按鈕播放聲音。

我有一個功能，將<audio>標記添加到ID爲「正在播放」的<div>。完成後，聲音會自行消失。

function sound(track){ 
$("#playing").append("<audio src=\"" + track + "\" autoplay onended=\"$(this).remove()\"></audio>"); 
} 

對於按鈕我：

<button onclick="sound('sounds/tada.mp3')">Tada</button> 

當我點擊按鈕，<audio>短暫出現在元素檢查，當它完成，只是我想要的方式消失，但後觸發它兩次，至少在Chrome中停止工作。控制檯中也沒有錯誤。

這是怎麼回事？

Answer 1

擺脫的onclick的/ onend在你的HTML和引用您的JS按鈕：

HTML

<button id='tada' sound_url='sounds/tada.mp3'>Tada</button> 

而且JS

var sound = function(track){ 
    $("#playing").append("<audio id='played_audio' src='\" + track + \"' autoplay='true'></audio>"); 
} 

$('#tada').on('click', function() { 
    var sound_url = $(this).attr('sound_url'); 
    sound(sound_url); 
}); 

$('#playing').on('end', 'played_audio', function() { 
    $(this).remove(); 
}); 

Answer 2

好吧，讓我們看看..

var audioURL = "http://soundbible.com/mp3/Canadian Geese-SoundBible.com-56609871.mp3"; 
 
var audioEl = null; 
 

 
function removeAudio() { 
 
    if (audioEl && audioEl.parentNode) 
 
    audioEl.parentNode.removeChild(audioEl); 
 
} 
 

 
function sound() { 
 
    removeAudio(); 
 
    audioEl = document.createElement("audio"); 
 
    audioEl.src = audioURL; 
 
    audioEl.controls = true; 
 
    audioEl.addEventListener("ended", removeAudio); // <-- Note it's ended, not end! 
 
    document.getElementById("playing").appendChild(audioEl); 
 
    audioEl.play(); 
 
} 
 

 
document.getElementById("tada").addEventListener("click", sound);

<div id="playing"> 
 
    
 
</div> 
 
<button id="tada">Tada</button>

我沒有看到這個腳本的任何問題。

1. 決定audioURL，設置audioEl爲null，因爲它會在稍後
2. 當單擊帶有ID "tada"元素中使用，運行我們sound功能。
   • 刪除音頻。
   • 創建音頻元素。
   • 音頻結束後，請取出音頻。
   • 將音頻追加到ID爲的元素。
   • 播放音頻。

有一點要注意的是，我用的是ended事件，而不是end事件。

(This answer is here because Andrew really wants us to answer it.)