HTML5 - 当另一个音频标签开始播放时如何停止音频？

Question

我有这个 JavaScript 函数：

\n

var currentPlayer;\nfunction EvalSound(soundobj) {\n    var thissound = document.getElementById(soundobj);\n    if (currentPlayer && currentPlayer != thissound) {\n        currentPlayer.pause(); \n    }\n    if (thissound.paused) {\n        thissound.play();\n    } else {\n        thissound.pause();\n    }\n    thissound.currentTime = 0;\n    currentPlayer = thissound;\n}\n

\n

这个 html5 音频播放器在 Yii2 的 Gridview 小部件内循环重复（它创建了许多播放器，每个播放器都有不同的歌曲）：

\n

'value'=> function ($data){                      \n    return "<audio controls>\n            <source src='" . $data->ficheiro . "' type='audio/mp3' />\n            </audio>";\n},\n

\n

问题是，当我正在播放一个音频标签并单击另一个音频标签的播放按钮时，它不会停止前一个正在播放的音频标签并开始新的音频标签。两个音频标签同时播放。我正在尝试调整 javascript 函数，但它不起作用。

\n

我也尝试过声明var thisound = $('audio');

\n

它也不起作用。

\n

我需要在音频标签中添加 ID 吗？\n我需要将onClick='EvalSound'事件与音频标签关联吗？

\n

Answer 1

好的，我是这样解决的：

抓取addEventListener开始播放的音频，for循环暂停所有其他音频标签。

document.addEventListener('play', function(e) {
    var audios = document.getElementsByTagName('audio');

    for (var i = 0, len = audios.length; i < len; i++) {
        if (audios[i] != e.target) {
            audios[i].pause();
        }
    }
}, true);