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