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

Posted 2023-02-25

【中文标题】2 个音频声音，我想一次播放一个 HTML5 音频元素

【英文标题】：2 audio sounds and I want to play one HTML5 audio element at a time

【发布时间】：2015-07-15 00:44:56

【问题描述】：

问题：我有 。

类似帖子：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;

【参考方案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

【讨论】：

只是确认一下，我应该在js文件中包含window.onload。？

是的，我想这样更安全，但不知道为什么它在 jsfiddle 中不起作用，可能是因为整个代码块是在 iframe 中加载的。

我也可以这样写吗？ jsfiddle.net/RE006/8djstmvy/4 我不明白为什么这个不起作用。

@user5117220 我不确定你为什么使用!，但请查看我更新的答案，它有通用的方法。

我试图找到一种方法来概括它，但是！是错误的选择。感谢您的帮助。