在多个音频同时播放静音开关

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