Dynamiczne dźwięki nie odtwarzane po dwóch odtworzeniach

Question

Mam małą aplikację html5, w której można odtwarzać dźwięk, klikając przycisk.

Mam funkcję dodającą znacznik <audio> do <div> z identyfikatorem "odtwarzanie". Dźwięk usunie się, gdy zostanie ukończony.

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

dla przycisku mam:

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

Po kliknięciu przycisku pojawi się <audio> krótko w elemencie inspektora i znika po jej zakończeniu, tak, jak ja chcę, ale po uruchamiając go dwa razy, po prostu przestaje działać w przeglądarce Chrome. Nie ma również błędów w konsoli.

Co się dzieje?

Answer 1

Pozbądź onclick/onend w HTML i odwoływać przycisk w swoim JS:

HTML

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

a 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

Okay, pozwala zobaczyć ..

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>

Nie widzę żadnych problemów z tym skryptem.

1. Zdecyduj audioURL, ustaw audioEl null jak zostanie on wykorzystany później
2. Gdy element z ID "tada" kliknięciu uruchomić naszą sound funkcję.
   • Usuń dźwięk.
   • Utwórz element audio.
   • Po zakończeniu audio wyjmij dźwięk.
   • Dołącz dźwięk do elementu o numerze ID "playing".
   • Odtwórz dźwięk.

Jedną rzeczą jest, aby pamiętać, że używam zdarzenie ended, a nie zdarzenie end.

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