javascript - 两次播放后动态声音不播放

Question

我有一个小的 html5 应用程序，您可以在其中通过单击按钮播放声音。

我有一个添加 <audio> 的函数标记为 <div> ID为“正在播放”。完成后声音会自行消失。

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 中引用按钮:

HTML

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