2017-11-09 23 views
0

두 개의 오디오 파일이 동시에 시작되며 두 개를 음소거하여 전환 할 토글 버튼이 있습니다.동시에 두 개를 재생할 때 음소거 된 오디오 파일 중 하나를 시작합니다.

모든 것이 내가 의도 한대로 작동하지만 재생을 누르면 오디오 2가 음소거되기를 원합니다. 지금 당신은 같은 시간에 그들 모두를들을 수 있습니다.

https://jsfiddle.net/9z1dfm4p/

사람이 나를 도울 수 제발? 감사합니다.

HTML

<audio id="audio1"> 
<source src="http://jplayer.org/audio/mp3/Miaow-07-Bubble.mp3" type="audio/mpeg" /> 
</audio><br /> 
<audio id="audio2"> 
<source src="https://allthingsaudio.wikispaces.com/file/view/Shuffle%20for%20K.M.mp3/139190697/Shuffle%20for%20K.M.mp3" type="audio/mpeg"/> 
</audio><br /> 
<button onclick="play();" id="button1">Play</button><br /> 
<button onclick="mute();" id="button2">Toggle</button><br /> 

JS

var audio1 = document.getElementById('audio1'); 
var audio2 = document.getElementById('audio2'); 
var button1 = document.getElementById('button1'); 
var isPlaying = false; 
var muteToggle = true; 
var play = function() { 
if(!isPlaying){ 
    button1.innerHTML = 'Pause'; 
    audio1.play(); // this stream will immediately stop when the next line is run on iOS 
    audio2.play(); // this will stop audio1 on iOS 
    isPlaying = true; 
} else { 
    button1.innerHTML = 'Play'; 
    audio1.pause(); // this stream will immediately stop when the next line is run on iOS 
    audio2.pause(); // this will stop audio1 on iOS 
    isPlaying = false; 
} 
} 



var mute = function(){ 
if(muteToggle){ 
    muteToggle = false; 
audio1.muted = true; 
audio2.muted = false; 
} else { 
    muteToggle = true; 
audio2.muted = true; 
audio1.muted = false; 
} 
} 

답변

0

당신은 처음부터 끌 수있는 두 번째 <audio> 설정할 수 있습니다.

<audio id="audio2" muted="true"> 

https://jsfiddle.net/9z1dfm4p/2/

편집 : 코드와 재생 어떤 노래의 더 나은 디스플레이를 청소.

https://jsfiddle.net/9z1dfm4p/7/

나는 또한 청취자들이 듣는를 추적 알려 텍스트를 추가하기 위해 노력하고있어
+0

덕분에, 나는이 어떤 생각 할 수있는 방법? – Burak

+0

매우 – Burak

+0

상태 div로 처리하는 jsfiddle의 새 버전 (위)을 확인하십시오. – jmaz