两次播放后动态声音无法播放

Question

我有一个小的html5应用程序,您可以通过单击按钮播放声音.

我有一个函数,可以为id 添加一个<audio>标签<div>"play".完成后声音自动消失.

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

去掉 HTML 中的 onclick/onend 并在 js 中引用该按钮：

超文本标记语言

<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();
});