SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Switching audio between two clips

    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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there koanstudio,

    Welcome to the forums

    You can toggle between two audio clips like so:

    HTML Code:
    <!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. #3
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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. #5
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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. #7
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please take your time, I'm already lucky enough to have such a good help from you!

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

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

    Code:
    <!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. #9
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Not at all, it was a fun thing to code up.
    Thanks for taking the time to report back


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •