静音可同时播放多个音频

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

附言：我现在有随机音频！

Answer 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 />

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

Answer 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 />