Using jQuery to control HTML5 audio on a page

Question

I have built a simple tour on my website that will be coded using HTML5 animation. It will use sound from the HTML5 audio tag and the tour will be loaded in using jquery.

When the tour is loaded it will start playing the audio and the user can mute the sound by toggling a link. And if they close the tour then the audio is reset!

I have parts of this working but don't seem to be able to properly toggle the music on and off and then stop it completely if they close the tour. Can anyone help?

var sound;

            $(document).ready(function ()
            {   
                sound = $('#soundTour');

                $('.sound a').click(function()
                {
                    $(this).parents('div').toggleClass('mute');

                    if (sound.paused)
                    {
                        sound.play();
                    }
                    else
                    {
                        sound.pause();
                    }
                });

                $('.showTour').click(function()
                {
                    $('body').addClass('theatre'); $('#tour').fadeIn('slow', function() {  });

                    sound.trigger('play');
                });

                $('#tour').find('.tourClose').click(function()
                {
                    $('body').removeClass('theatre'); $('#tour').fadeOut('slow', function() {  });

                    sound.currentTime=0;
                    sound.pause();

                });

            });

Fyi, a selector like audio#soundTour might be slower than just #soundTour as the latter will use getElementById for sure while the one with the tag name at least has to check the tagName of the selected element - and since ids must be unique, you won't have to elements with id="soundTour" anyway. — ThiefMaster
– ThiefMaster, Commented Dec 10, 2011 at 12:21

adeneo · Accepted Answer · 2011-12-10 20:07:56Z

5

You are using jQuery's trigger() to trigger events that are not defined in the posted code, as such it is difficult to really say what 'stop' is, but as a general rule HTML5 Audio does not have a stop() function, only play() and pause(), to reset the audio just define the source again or set the .currenttime to zero, like so:

var audioElm = document.getElementById('soundTour');
    audioElm.src = 'myaudio.mp3';
    audioElm.load();

or

var audioElm = document.getElementById('soundTour');
    audioElm.currentTime=0;
    audioElm.pause();

Setting currentTime only rewinds the audio to the beginning, and does not really stop it.

Here's a fiddle to show one way of doing it. It uses a mp3 file so your browser must support that format: http://jsfiddle.net/adeneo/n6Bar/1/

edited Dec 10, 2011 at 20:07

answered Dec 10, 2011 at 12:27

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cameron Over a year ago

I just get errors saying that the methods are not valid jquery methods

adeneo Over a year ago

@Cameron I have edited my answer, my bad as the html5 audio functions are native and should be performed on a native js element.

Collectives™ on Stack Overflow

Using jQuery to control HTML5 audio on a page

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related