静音切换同时播放多个音频答案

【问题标题】：Mute toggle on multiple audio playing at the same time静音切换同时播放多个音频
【发布时间】：2016-09-05 03:24:39
【问题描述】：

我正在尝试对音频进行 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 />

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; 
}

附言我现在有随机音频！

【问题讨论】：

标签： javascript html audio

【解决方案1】：

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

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

单静音切换请检查这个小提琴：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 />

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;
  }
}

【讨论】：

对不起，也许我不清楚，我希望它们同时播放，我只想能够将一个静音并取消另一个静音，以便两个音频文件之间的比较可以被听到！
知道了，更新答案

【解决方案2】：

我认为添加这个（非常简单的）功能并从一个按钮调用它应该可以工作。

将此添加到您的 Javascript 中

var muted = 'on';
var button = document.getElementById(mutebut);
function muteorplay(){
if (muted == 'on'){
mute1()
muted='off';
button.innerHTML='Mute 1';
}else{
mute2()
muted='on';
button.innerHTML='Mute 2';
}
}

并用这个替换两个静音按钮

<button onclick="muteorplay();" id="mutebut">Mute 2</button><br />

【讨论】：