javascript - 2 个音频声音，我想一次播放一个 HTML5 音频元素

Question

问题:我有 2 个音频声音，我想一次播放一个 HTML5 音频元素。

类似帖子:Play one HTML audio element at a time .

我看到了与我的问题类似的帖子。然而，作为一个 JavaScript 初学者，我并不理解这些代码。所以我尝试了一种更简单的方法，这样我就能理解，但不起作用。如果有任何建议，我将不胜感激。

HTML5 代码:(仅对于此示例，我使用了与上一篇文章相同的音频源:http://jsfiddle.net/RE006/8djstmvy/

<div>
<h2>Example 1</h2>
<audio id="sound1" src=http://geo-samples.beatport.com/lofi/5005876.LOFI.mp3 controls="controls" preload="none">
<p>Your browser does not support the audio element.</p>
</audio>
</div>

<div>
<h2>Example 2</h2>
<audio id="sound2" src=http://geo-samples.beatport.com/lofi/5005933.LOFI.mp3 controls="controls" preload="none">
<p>Your browser does not support the audio element.</p>
</audio>
</div>

JavaScript:

var $ = function (id) {
return document.getElementById(id);
}

var sound1_click = function() {
//starts playing
$("sound1").play ();
//pause playing
$("sound2").pause();
}

var sound2_click = function() {
//starts playing
$("sound2").play ();
//pause playing
$("sound1").pause();
}

window.onload = function () {
$("sound1").onclick = sound1_click;
$("sound2").onclick = sound2_click;
}

Answer 1

我认为问题是您列出了 click 事件，而您应该监听 play 事件，也由于某种原因，window.onload 在 jsfiddle 中无法正常工作，因此替换

window.onload = function () {
    $("sound1").onclick = sound1_click;
    $("sound2").onclick = sound2_click;
}

与

$("sound1").onplay = sound1_click;
$("sound2").onplay = sound2_click;

fiddle demo

或者你可以简单地概括它:

var audios = document.getElementsByTagName('audio');
for(var i=0; i<audios.length;i++)    audios[i].onplay = pauseAllAudios.bind(null, audios[i]);

function pauseAllAudios(audio){
    for(var i=0; i<audios.length;i++)
        if(audios[i]!=audio)    audios[i].pause();    
};

fiddle demo