दो नाटकों के बाद गतिशील आवाज नहीं खेलती

Question

मेरे पास एक छोटा HTML5 एप्लिकेशन है जहां आप एक बटन क्लिक करके ध्वनि चला सकते हैं।

मेरे पास एक ऐसा फ़ंक्शन है जो <audio> टैग को <div> पर एक आईडी "प्लेइंग" के साथ जोड़ता है। जब यह किया जाता है तो आवाज स्वयं को हटा देती है।

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

बटन के लिए मेरे पास है:

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

जब मैं बटन पर क्लिक करें, एक <audio> संक्षिप्त तत्व निरीक्षक में दिखाई देता है और जब यह समाप्त हो गया है, अभी जिस तरह मैं यह चाहते गायब हो जाता है, लेकिन उसके बाद इसे दो बार ट्रिगर करना, यह कम से कम क्रोम में काम करना बंद कर देता है। कंसोल में कोई त्रुटि नहीं है।

क्या चल रहा है?

Answer 1

अपने HTML में onclick से छुटकारा/onend और अपने js में बटन संदर्भ:

एचटीएमएल

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

और जे एस

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 सेट तय रूप में यह बाद में
2. जब आईडी "tada" साथ तत्व क्लिक किया जाता है का उपयोग किया जाएगा, हमारे sound समारोह चलाते हैं।
   • ऑडियो निकालें।
   • ऑडियो तत्व बनाएं।
   • जब ऑडियो समाप्त हो जाता है, तो ऑडियो हटा दें।
   • आईडी "playing" के साथ तत्व में ऑडियो संलग्न करें।
   • ऑडियो चलाएं। नोट करने के लिए

एक बात है कि मैं ended घटना, नहीं end घटना का उपयोग करें।

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