질문 : 2 개의 오디오 사운드가 있고 한 번에 하나의 HTML5 오디오 요소를 재생하고 싶습니다.
유사한 게시물 : 한 번에 하나의 HTML 오디오 요소를 재생합니다 .
내 질문과 비슷한 게시물을 보았습니다. 그러나 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>
자바 스크립트 :
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;
}
문제는 click이벤트 에 나열하는 것입니다. 이벤트를 청취해야 할 때 play어떤 이유로 든 window.onloadjsfiddle에서 제대로 작동하지 않으므로 교체하십시오.
window.onload = function () {
$("sound1").onclick = sound1_click;
$("sound2").onclick = sound2_click;
}
와
$("sound1").onplay = sound1_click;
$("sound2").onplay = sound2_click;
또는 다음과 같이 간단히 일반화 할 수 있습니다.
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();
};
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다