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

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

两个不同的静音按钮请检查这个小提琴：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 />

在多个音频播放的同时静音切换

2 个答案: