pixelgirrrl pixelgirrrl - 3 months ago 16
Javascript Question

Mute toggle on multiple audio playing at the same time

I'm trying to make an A/B test comparison for audio. It will be a "demo" version of a song and a real version.

I have them playing and stopping at the same time, but i can't work out the mute toggle. (i have it as two buttons now, but ideally i'd love to have one button that will mute one audio and unmute the other, and vice versa on reclick. Sorry i'm still learning js so any help would be awesome!)

I have what i have so far in a 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. i have random audio in there for now!

Answer

Simply have a global variable. a flag that knows the current status and work accordingly. (ADDED MUTE)

Two different Mute buttons Please check this fiddle : https://jsfiddle.net/36r22svz/6/

Single Mute Toggle Please check this 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;
  }
}