Switching audio between two clips

JavaScript
1

Hello everyone,
I got a question and I hope I’m asking in the right section.
I need to put a button in a page that can switch between two audio clips. Something like that buttons that allow you to switch between image A and image B, and if you click again, it turns again to image A. Same, but with two mp3.

With this code I can start/stop both clips in the same time:

<audio id=“audio1” src=“sound1.mp3”></audio>
<audio id=“audio2” src=“sound2.mp3”></audio>
<div>
<button onclick=“document.getElementById(‘audio1’).play();document.getElementById
(‘audio2’).play()”>Play</button>
<button onclick=“document.getElementById(‘audio1’).pause();document.getElementById
(‘audio2’).pause()”>Pause</button>

</div>

Now I need to add a button that switches the “mute” alternatively between the first and the second clip.

Do you think I can find some code like this around, or I’m supposed to develop by myself? Can you help me?
Thank you in advance!

2

Hi there koanstudio,

Welcome to the forums :slight_smile:

You can toggle between two audio clips like so:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Toggle sound clips</title>
  </head>

  <body>
    <audio id="audio1" src="1.mp3"></audio>
    <audio id="audio2" src="2.mp3"></audio>
    <button id="controls">Play track 1</button>

   <script>
     var button = document.getElementById("controls");
     var track1 = document.getElementById("audio1");
     var track2 = document.getElementById("audio2");

     button.onclick = function(){
       currTrackNo = this.innerHTML.replace(/Play track /, "");
       nextTrackNo = (currTrackNo == "1")? "2" : "1";
       this.innerHTML = "Play track " + nextTrackNo;

       if (currTrackNo == "1"){
         track1.play();
         track2.pause();
       } else {
         track2.play();
         track1.pause();
       }
     }
   </script>
  </body>
</html>

Hopefully the coed is easy to understand, but if you have any questions, just let me know.

3

Hi Pullo, I really thank you for spending your time to help me, you’re very kind.
The code you wrote worked perfectly. But… each time you switch, the muted clip goes in pause. I know my need may sound strange but I want both clips continue even when muted (I will put two slightly different clips to compare).
Thats why in the code I wrote in the first post I made both clips start in the same time.
I hope this will be workable too. Thanks in advance!

4

No problem.

So, let me get this straight.
You have a button.
When you hit this button the first time, track one starts to play.
When you hit it a second time, track one is muted (but continues playing) and track two starts to play.
On every subsequent button press after this, you mute the track that is audible and unmute the one that isn’t.

Is that correct?

5

Almost correct: but both tracks should start in the same time. And end in the same time too, because I will put same tune in two different versions.
I think the best way is: one button to play/pause both tracks simultaneously (independently from mute status); and another button to switch alternatively the mute status (indepenently from the play/pause status).
Example: 1) I click on “play” and I listen to track one, 2) After (for example) 25 seconds I click on “switch” and I listen to track two from 25th second on, 3) I can keep on switching or I can pause and resume in every moment.
This code can be useful, for example, if you put the same track, one complete, and one instrumental version. With the switch button you can toggle voice on and off.
Please let me know if I didn’t explain myself well.

6

Hi there,
That’s perfectly clear. Thanks.
I’m a bit busy right now, but I’ll knock some code up later on and post back here.
In the mean time, if you fancy experimenting with this yourself, the HTML5 audio element has a muted property, which you can set to true or false.

7

Please take your time, I’m already lucky enough to have such a good help from you!

8

Hi there,

So, this should do what you want.
Any questions, just let me know:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Toggle sound clips</title>
    <style>button</style>
  </head>

  <body>
    <audio id="audio1" src="1o.mp3"></audio>
    <audio id="audio2" src="2o.mp3"></audio>
    <div>Track one: <span id="playStatus1">stopped</span></div>
    <div>Track two: <span id="playStatus2">stopped</span></div>
    <div>Listening to: <span id="currTrack">nothing</span></div>
    <button id="start">Start the tracks rolling</button>
    <button id="toggle" disabled>Toggle</button>

   <script>
     var startButton = document.getElementById("start");
     var toggleButton = document.getElementById("toggle");
     var track1 = document.getElementById("audio1");
     var track2 = document.getElementById("audio2");
     var status1 = document.getElementById("playStatus1");
     var status2 = document.getElementById("playStatus2");
     var currTrack = document.getElementById("currTrack");

     function updatePlayStatus(track, status, t){
       if (track.paused == true){
         status.innerHTML = "stopped";
         clearInterval(t);
         startButton.disabled = false;
         toggleButton.disabled = true;
         currTrack.innerHTML = "nothing";
       }
     }

     startButton.onclick = function(){
       this.disabled = true;
       track1.play();
       track2.play();
       track2.muted = true;
       status1.innerHTML = "playing";
       status2.innerHTML = "playing";
       currTrack.innerHTML = "Track 1";
       toggleButton.disabled = false;

       var t1 = window.setInterval(function() { updatePlayStatus(track1, status1, t1) }, 500);
       var t2 = window.setInterval(function() { updatePlayStatus(track2, status2, t2) }, 500);
     }

     toggleButton.onclick = function(){
       if (track1.muted == true){
         track1.muted = false;
         track2.muted = true;
         currTrack.innerHTML = "Track 1";
       } else {
         track2.muted = false;
         track1.muted = true;
         currTrack.innerHTML = "Track 2";
       }
     }
   </script>
  </body>
</html>
9

This is exactly what I needed!
I really thank you for your help, and I hope you didn’t spend too much time to develop it.
I also have to say, this forum is the only place where I could find a pro answer.

10

Not at all, it was a fun thing to code up.
Thanks for taking the time to report back :slight_smile:

11

Im a little lost on how to add the music to be played?

12

Have a look at the docs on the <audio> element: https://developer.mozilla.org/en/docs/Web/HTML/Element/audio
The src attribute specifies the URL of the audio to embed.

13

so i have to upload the music and have a URL where in the code would i paste it?

14

You just need a path to an audio file:

<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>

or

<audio src="/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>

or

<audio src="../../@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>