SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  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
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 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
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 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
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 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
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 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
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Not at all, it was a fun thing to code up.
    Thanks for taking the time to report back

  11. #11
    SitePoint Member
    Join Date
    Jun 2014
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do you add music though?

    Quote Originally Posted by Pullo View Post
    Not at all, it was a fun thing to code up.
    Thanks for taking the time to report back

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

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Have a look at the docs on the <audio> element: https://developer.mozilla.org/en/doc.../Element/audio
    The src attribute specifies the URL of the audio to embed.

  13. #13
    SitePoint Member
    Join Date
    Jun 2014
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    still lost

    Quote Originally Posted by Pullo View Post
    Have a look at the docs on the <audio> element: https://developer.mozilla.org/en/doc.../Element/audio
    The src attribute specifies the URL of the audio to embed.
    so i have to upload the music and have a URL where in the code would i paste it?

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    You just need a path to an audio file:

    Code:
    <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

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

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


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
  •