javascript - 静音切换同时播放多个音频

Question

我正在尝试对音频进行 A/B 测试比较。它将是歌曲的“演示”版本和真实版本。

我让他们同时播放和停止，但我无法解决静音切换。 (我现在有两个按钮，但理想情况下，我希望有一个按钮可以使一个音频静音并取消另一个静音，反之亦然。对不起，我还在学习 js，所以任何帮助都会很棒!)

到目前为止，我在 jsfiddle 中拥有的东西

https://jsfiddle.net/nickdulac/36r22svz/

html

    <audio id="audio1" muted controls>
    <source src="http://dl.dropbox.com/u/1538714/article_resources/cat.m4a" type="audio/mpeg" />
    <source src="http://dl.dropbox.com/u/1538714/article_resources/cat.ogg" type="audio/ogg" />
</audio><br />
<audio id="audio2" controls>
    <source src="http://dl.dropbox.com/u/1538714/article_resources/song.m4a" type="audio/mpeg" />
    <source src="http://dl.dropbox.com/u/1538714/article_resources/song.ogg" type="audio/ogg" />
</audio><br />
<button onclick="play();">Play</button><br />
<button onclick="stop();">Stop</button><br />
<button onclick="mute1();">Mute 1</button><br />
<button onclick="mute2();">Mute 2</button><br />

js

var play = function() {
    var audio1 = document.getElementById('audio1');
    var audio2 = document.getElementById('audio2');
    audio1.play(); 
    audio2.play(); 
}
var stop = function() {
    var audio1 = document.getElementById('audio1');
    var audio2 = document.getElementById('audio2');
    audio1.pause();
    audio2.pause(); 
}
var mute1 = function() {
    var audio1 = document.getElementById('audio1');
    var audio2 = document.getElementById('audio2');
    audio1.volume() = 1; 
    audio2.volume() = 0; 
}

var mute2 = function() {
    var audio1 = document.getElementById('audio1');
    var audio2 = document.getElementById('audio2');
    audio1.volume() = 0; 
    audio2.volume() = 1; 
}

p.s.我现在有随机音频!

Answer 1

只需有一个全局变量。一个知道当前状态并相应工作的标志。 (添加静音)

两个不同的静音按钮
请检查这个 fiddle :https://jsfiddle.net/36r22svz/6/

单静音切换
请检查这个 fiddle :https://jsfiddle.net/36r22svz/7/

HTML

<audio id="audio1" controls>
    <source src="http://dl.dropbox.com/u/1538714/article_resources/cat.m4a" type="audio/mpeg" />
    <source src="http://dl.dropbox.com/u/1538714/article_resources/cat.ogg" type="audio/ogg" />
</audio><br />
<audio id="audio2" controls>
    <source src="http://dl.dropbox.com/u/1538714/article_resources/song.m4a" type="audio/mpeg" />
    <source src="http://dl.dropbox.com/u/1538714/article_resources/song.ogg" type="audio/ogg" />
</audio><br />
<button onclick="play();" id="button1">Play</button><br />
<button onclick="mute();" id="button2">Mute</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;
  }
}