HTML5AudioEvents

Set a callback for a HTMLAudioElement current playback position

Download

Call event during the sound

Set a callback to execute at a certain time of a sound files playback. It's small and pure JavaScript no js library is needed. Use it in combination with jQuery to add it to an event handler like click or keypress.

Choose a sound file

Set the sound file you would like to play. To support cross browser compatibility is will include the .mp3 and .ogg file type of the sound file.

Set a callback

Give an object with {seconds:anonymous functon} key-value pair set events to happen at a certain amount of second during the sound.

Add event

Add your code to be executed during the time the sound is playing to add animation, dynamic content, or what ever you want.

Example

Note: This example uses many CSS3 features. For it to correclty work you must have an up-to-date browser.

Examples Code

      html5AudioEvents.audioPlay('intro', {
      1 : function(){
        $display.html('');
        $stopBtn.prop('disabled',false);
        $displayBlock.animate({
          opacity : 0,
        }, 500, function() {
          $(this).css({'background-image' : 'url(images/space.jpg)'});
          $(this).animate({opacity : 1},1900);
        });
      },
      3 : function(){
        for (var i=1; i<=5; i++) {
            console.log(i);
            $('
',{class:'stars'}).appendTo($displayBlock); } }, 4 : function() { $.ajax({ url: 'ajax/story.html', dataType: 'html', cache: false, }) .done(function ( data ) { $displayBlock.append(data); }); }, 25 : function() { console.log('And where done, bye.'); } }, function() { $startBtn.prop('disabled',false); $stopBtn.prop('disabled',true); $displayBlock.animate({opacity : 0},1900,function(){ $(this).css({'background-image' : 'none'}); $(this).html(''); }); });

Download it and start building. See how fun and easy it is!

If you have any ideas on how to make it better fork it on GitHub