You can consider this tutorial as a consequence of my earlier html5 audio API tutorial. In this tutorial, we will see, how to control the audio with jQuery. This is handy if you are about to develop a dynamic application that make use of several audio media and want to control them from your jQuery script efficiently. Lets start rolling!
How Far We Can Control?
Well, we can control almost every feature that default HTML5 player provides like play/pause/volume up/down, mute on/off etc and additional functionality like stop,forward/backward capability etc.
So, if you have N number of audio files on a single page, and instead of letting user dealing with N audio players, you can give it an efficient interface and control what to play/stop etc with jQuery.
Checkout The jQuery Audio Controller Demo
The Audio Media:
Lets use the following code as our HTML5 code for the audio media:
<audio class="audioDemo" controls preload="none"> <source src="audio/pitbull.mp3" type="audio/mpeg"> <source src="audio/music.ogg" type="audio/ogg"> </audio>
We have kept two media, because of compatibility issue on browsers, so that alternative one being loaded.
Loading The Audio With jQuery:
as you can see on the above HTML5 code, we have set the “preload” option to “none”, which means, no information about the audio file will be loaded on page load, neither the audio file nor any metadata. We will do them by ourselves from jQuery to boost the page load performance. Lets use the following code to load the audio:
$(".audioDemo").trigger('load');
We can also add event listener to know when its loaded. However, the event will be triggered immediate after the metadata loaded and audio starts loading. But it won’t wait till the audio loads in full, which usually loads on demand. To do something after the loading, use the following code before triggering the load event:
$(".audioDemo").bind("load",function(){
$(".alert-success").html("Audio Loaded succesfully");
});
Play/Pause/Stop Audio:
Start playing audio and to pause it is fairly easy to handle, just need to trigger corresponding events as below:
//starts playing
$(".audioDemo").trigger('play');
//pause playing
$(".audioDemo").trigger('pause');
However, there is not ready event to stop an audio, so we will need to do it with help of ‘pause’ event and another property named “currentTime”, which indicates the current playing time. Here is what will do to stop:
function stopAudio(){
//pause playing
$(".audioDemo").trigger('pause');
//set play time to 0
$(".audioDemo").prop("currentTime",0);
}
Forward/Backward Capability:
Default HTML5 player doesn’t provide these facility, but we can easily make such functionality with a little jQuery code. Here is a small example code to do so:
//forward the music about 5 seconds
$(".audioDemo").prop("currentTime",$(".audioDemo").prop("currentTime")+5);
//backward the music about 5 seconds
$(".audioDemo").prop("currentTime",$(".audioDemo").prop("currentTime")-5);
Volume Up/Down:
Audio player has its own “volume” properly which can be controlled with jQuery as below:
function volumeUp(){
var volume = $(".audioDemo").prop("volume")+0.2;
if(volume >1){
volume = 1;
}
$(".audioDemo").prop("volume",volume);
}
function volumeDown(){
var volume = $(".audioDemo").prop("volume")-0.2;
if(volume <0){
volume = 0;
}
$(".audioDemo").prop("volume",volume);
}
We need to keep checking whether volume reaches its largest or minimum value, otherwise JavaScript exception error will be thrown.
Mute On/Off:
We can instantly make an audio off and turn on to its earlier volume level easily with use of “muted” property. See the example code below, which actually toggle current mute state:
function toggleMuteAudio(){
$(".audioDemo").prop("muted",!$(".audioDemo").prop("muted"));
}
Final Words:
Hope this small tutorial on controlling HTML5 audio with jQuery will help you develop audio/music driven web application easily. If you are having any issue on running any example or with the demo, please let me know by commenting here. Happy coding 🙂
I’m using the latest releases of Firefox and Chrome on Ubuntu 12.04. For me, your demo works fine in Firefox but not at all in Chrome. Have you noticed this?
I use mac, not ubuntu. But as being *nix based, should have been behaving in same way. However, thanks for noticing and reporting. I will check. Thanks.
Not sure what the problem was. I downloaded your script, invoked the initialisation differently and all works fine across Chrome, Opera and Firefox. Very useful – thanks.
Hi, I have followed your tutorial and it works perfect. What I don’t understand clearly is, here you are using HTML5 audio player. Is it the same as this JavaScript/jQuery: audio = new Audio(‘test.mp3’); audio.play(); Or is this JavaScript player, and not HTML5 audio player? Thanks in advanced for your answer!
HTML5 consists of all new features of css/javascripts which are supported by browsers. You can’t use this javascript code on a old browser version that doesn’t have HTML5 support. Hope this helps!
is there any option to only show muted control, please reply
nice one , helped me a lot , thanks 🙂
I’m using a HTML5 player in joomla that’s control by jquery. It keeps looping the song. Is there a way to stop the repeat?
Hi there, is there a way to exclude or deactivate the volume control from the standard html5 audio control.
im using multiple audio tags
i want it to be played one at a time
this is the code
aoa… dear how to play songs using this tag if we store path of song file in database
Looking at the “Control HTML5 Audio With Jquery” and “Javascript Audio Controller Demo” pages and I still have no idea how to make an audio player using jquery. I never saw any download links on the demo page. Is there source code on GITHUB. The demo page also uses bootstrap for the buttons. I real working demo that can be downloaded would make more sense. Thanks.
Hi, good explication. In this moment I have a problem, I not know control the preload for created a progress bar of preload of audio.
How refresh the tag of audio?, cuz already im supported, 3 diferent source, when are available, so already i add the new source with append (jqeury) but, some times the audio appear desactive and others times work, when appear desactive, just reload the page, and work….. if somebady can help me i would apprentice it, and thaks for the future responde
I have a list of tracks that I would like to play over and over randomly until I click a stop button. Any clues on how to set that up?
I have sound track for every page. Want to turn off the audio when turn next page. Also, the audio on the earlier page must start from the beginning if I visit that page again. How should code. I have put html5 audio player.
Thank you very much.
If you trigger the .load() method for that player, it should reset the audio.
I am creating Rss Feeds [https://mySocialFeeds.com/] which I am importing into the audio app to play different songs / playlists. Works really well!