Suoni dinamici non riprodotti dopo due riproduzioni

Question

Ho una piccola applicazione html5 in cui è possibile riprodurre un suono facendo clic su un pulsante.

Ho una funzione che aggiunge un tag a un con un ID "riproduzione". Il suono si rimuove da solo quando è finito.

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

Per il pulsante che ho:

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

quando clicco sul pulsante, un breve <audio> appare nell'elemento di ispezione e scompare quando è finito, proprio come lo voglio, ma dopo attivandolo due volte, smette di funzionare in Chrome, almeno. Non ci sono errori nemmeno nella console.

Che cosa sta succedendo?

Answer 1

Sbarazzarsi della onclick/onend nel tuo codice HTML e di riferimento il tasto nella vostra js:

HTML

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

E il 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

Va bene, vediamo ..

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>

Non vedo alcun problema con questo script.

1. Decidete URL_audio, impostare audioEl null come verrà utilizzato in seguito
2. Quando l'elemento con ID "tada" viene cliccato, eseguire la nostra funzione sound.
   • Rimuovere l'audio.
   • Crea l'elemento audio.
   • Al termine dell'audio, rimuovere l'audio.
   • Aggiunge l'audio all'elemento con ID "playing".
   • Riproduci l'audio.

Una cosa da notare è che io uso l'evento ended, non l'evento end.

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