2音频的声音，我想在同一时间打一HTML5音频元素 [英] 2 audio sounds and I want to play one HTML5 audio element at a time

问题描述

问：我有2个音频的声音，我想在同一时间打一HTML5音频元素。

类似的帖子：在时间

我看到了一个类似的帖子我的问题。然而，由于一个JavaScript初学者我不明白code。所以，我想一个简单的方法，所以我可以理解，但不工作。我想AP preciate任何建议。

HTML5 code：（在这个例子中只有我用同样的音源为previous后：的 http://jsfiddle.net/RE006/8djstmvy/

 ＆LT; D​​IV＆GT;
＆所述; H2物实施例1所述; / H2＆GT;
＆LT;音频ID =Sound1例子SRC = HTTP：//geo-samples.beatport.com/lofi/5005876.LOFI.mp3控制=控制preLOAD =无＆GT;
＆LT; P＆GT;。您的浏览器不支持音频元素＆lt; / P＆GT;
＆LT; /音频＆GT;
＆LT; / DIV＆GT;＆LT; D​​IV＆GT;
＆所述; H2物实施例2'; / H2＆GT;
＆LT;音频ID =SOUND2SRC = HTTP：//geo-samples.beatport.com/lofi/5005933.LOFI.mp3控制=控制preLOAD =无＆GT;
＆LT; P＆GT;。您的浏览器不支持音频元素＆lt; / P＆GT;
＆LT; /音频＆GT;
＆LT; / DIV＆GT;
 

JavaScript的：

 变量$ =功能（ID）{
返回的document.getElementById（ID）;
}VAR sound1_click =功能（）{
//开始播放
$（Sound1例子）打（）;
//暂停播放
$（SOUND2），暂停（）。
}VAR sound2_click =功能（）{
//开始播放
$（SOUND2）打（）;
//暂停播放
$（Sound1例子），暂停（）。
}在window.onload =函数（）{
$（Sound1例子）的onclick = sound1_click。
$（SOUND2）的onclick = sound2_click。
}
 

解决方案

我认为这个问题是你挂牌点击事件时，你应该听播放事件，也出于某种原因，的window.onload 不在的jsfiddle正常工作，所以替换

 的window.onload =函数（）{
    $（Sound1例子）的onclick = sound1_click。
    $（SOUND2）的onclick = sound2_click。
}
 

与

  $（Sound1例子）onplay = sound1_click。
$（SOUND2）onplay = sound2_click。
 

小提琴演示

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

  VAR音频= document.getElementsByTagName（'声音'）;
对于（VAR I = 0; I＆LT; audios.length;我++）音频[I] .onplay = pauseAllAudios.bind（NU​​LL，音频[I]）;功能pauseAllAudios（音频）{
    对于（VAR I = 0; I＆LT; audios.length;我++）
        如果（！音频[I] =音频）音频[I] .pause（）;
};
 

小提琴演示

Question: I have 2 audio sounds and I want to play one HTML5 audio element at a time.

Similar Post: Play one HTML audio element at a time.

I saw a similar post to my question. However, as a JavaScript beginner I did not understand the code. So I tried a simpler way so I can understand, but is not working. I would appreciate any suggestions.

HTML5 code: (For this example only I used the same audio source as a previous post: 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;
}

解决方案

I think the problem is you are listing to click event, when you should be listening to play event, also for some reason, window.onload does not work properly in jsfiddle, so replace

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

with

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

fiddle demo

or you can simply generalize it by:

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

这篇关于2音频的声音，我想在同一时间打一HTML5音频元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！