Grow your CSS skills. Land your dream job.

Using jQuery to stop audio

  • # May 17, 2013 at 9:47 am

    Hi there

    I’m working on a simple audio player with HTML5 and jQuery:
    http://codepen.io/anon/pen/wksyj

    So far this works quite fine. But I have a list of several audio cues, each with its own control button. When I start playing a new cue I’d like an other cue already playing to stop.

    Just now when I click the play button while another cue is still playing, both audio files playing together, which definitely isn’t that nice.

    Any ideas for this problem?

    # May 17, 2013 at 9:52 am

    Something like this?:

    When you click play add a class like “playing” to that audio cue, then if you click play again somewhere search for all the cues that have the class “playing” and pauze or stop it. Then remove the class “playing” from that cue and add it to the new cue.

    # May 17, 2013 at 10:45 am

    Try something like this ([demo](http://codepen.io/Mottie/pen/iescD)):

    var togglePlay = function($el, playing){
    $el.children(“i”)
    .toggleClass(‘icon-play’, !playing)
    .toggleClass(‘icon-pause’, playing);
    }

    $(“.track-play”).click(function(e){
    e.preventDefault();
    $(‘.track-play’).each(function(){
    var $t = $(this);
    togglePlay( $t, false );
    $t.next(‘audio’).get(0).pause();
    });
    var $t = $(this),
    cue = $t.next(“audio”).get(0);
    togglePlay( $t, true );
    cue.play();
    });

    # May 17, 2013 at 10:56 am

    Chris Coyer did a video on audio players, check his videos.

    # May 17, 2013 at 11:06 am

    http://css-tricks.com/video-screencasts/59-embedding-audio/

    I use one of them on my sister’s site.
    Sorry I’m on the road, but I can post more info when I get home.

    # May 17, 2013 at 11:43 am

    @FragaGeddon that screen cast is from 2009 and it doesn’t look like he talks about HTML5 audio. Either way, it’s cool :P

    @swissdude: I ended up making one small addition to change the pause button back into a play button when the audio finishes playing ([updated demo](http://codepen.io/Mottie/pen/ekHma)) – extra code:

    var togglePlay = function($el, playing){
    $el.children(“i”)
    .toggleClass(‘icon-play’, !playing)
    .toggleClass(‘icon-pause’, playing);
    },
    updateEnd = function(cue){
    if (cue.currentTime >= cue.duration) {
    togglePlay( $(cue).prev(), false );
    return false;
    }
    setTimeout(function(){
    updateEnd(cue);
    }, 1000);
    };

    $(“.track-play”).click(function(e){
    e.preventDefault();
    $(‘.track-play’).each(function(){
    var $t = $(this);
    togglePlay( $t, false );
    $t.next(‘audio’).get(0).pause();
    });
    var $t = $(this),
    cue = $t.next(“audio”).get(0);
    togglePlay( $t, true );
    cue.play();
    updateEnd(cue);
    });

    # May 17, 2013 at 12:42 pm

    @Mottie: Thanks a lot for your code. It works like MAGIC! :-)

    @FragaGeddon, @Argeaux: Thanks for your inputs, too.

    # September 19, 2013 at 11:57 pm

    This has been something that I’ve been looking for, however I’m still only new. Is there a way of pausing the current track without going to the next track?

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".