Âm thanh động không phát sau hai lần phát

Question

Tôi có một ứng dụng html5 nhỏ, nơi bạn có thể phát âm thanh bằng cách nhấp vào nút.

Tôi có chức năng thêm thẻ <audio> vào số <div> có id "đang phát". Âm thanh tự xóa khi nó được thực hiện.

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

Đối với nút Tôi có:

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

Khi tôi bấm vào nút, một <audio> một thời gian ngắn xuất hiện trong thanh tra yếu tố và biến mất khi nó được hoàn tất, chỉ cách tôi muốn nó, nhưng sau khi kích hoạt nó hai lần, nó chỉ ngừng hoạt động trong Chrome, ít nhất. Không có lỗi trong bảng điều khiển.

Điều gì đang xảy ra?

Answer 1

Hãy loại bỏ onclick/onend trong HTML của bạn và tham khảo các nút trong js của bạn:

HTML

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

Và 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

Được rồi, cho phép xem ..

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>

Tôi không thấy bất kỳ sự cố nào với tập lệnh này.

1. Quyết định audioURL, thiết audioEl null vì nó sẽ được sử dụng sau
2. Khi các yếu tố với ID "tada" được nhấp, chạy chức năng sound của chúng tôi.
   • Xóa âm thanh.
   • Tạo phần tử âm thanh.
   • Khi âm thanh kết thúc, hãy xóa âm thanh.
   • Nối âm thanh vào phần tử có ID "playing".
   • Phát âm thanh.

Một điều cần lưu ý là tôi sử dụng sự kiện ended, không phải là sự kiện end.

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