As of Firefox 3.5, Chrome 3, Opera 10.5, and Safari 4, we can take advantage of many of the new HTML 5 features, including native audio support without the need for Flash. As you’ll find, we only to create the new <audio> element, and set a few attributes. In this four minute video quick tip, we’ll review the mark-up, and also a quick way to play audio with jQuery.
src : The path to the file name. It’s a better practice to load the file via the child “source” element instead.
Mozilla and Webkit don’t fully get along just yet, when it comes to the audio format. Firefox will want to see an .ogg file, while Webkit browsers will work just fine with the common .mp3 extension. This means that, at least for now, you should create two versions of the audio. I recommend that you use a quick and simple online tool, called Media.io, to convert your mp3 over to the ogg format.
When Safari loads the page, it won’t recognize that .ogg format, and will skip it and move on to the mp3 version, accordingly. Please note that IE, per usual, doesn’t support this, and Opera 10 and lower can only work with .wav files.
Loading Audio with jQuery
// Slightly modified from video version.
$(document).ready(function() {
// Create an audio element, and set it to autoplay,
// and show the player when the page loads.
var audio = $('', {
autoPlay : 'autoplay',
controls : 'controls'
});
// Call our addSource function, and pass in the audio element
// and the path(s) to your audio.
addSource(audio, 'audioFile.ogg');
addSource(audio, 'audioFile.mp3');
// When some event is fired...
$('a').click(function() {
// Add the audio + source elements to the page.
audio.appendTo('body');
// Fadeout the anchor tag to keep the user from clicking it again.
$(this).fadeOut('slow');
return false;
});
// Adds a source element, and appends it to the audio element, represented
// by elem.
function addSource(elem, path) {
$('').attr('src', path).appendTo(elem);
}
});
Please note that we can go much, much further with this, including how to stop the audio, change the volume, etc. This quick three minute tip is just to whet your appetite. If you’d like to delve deeper, let us know and I’ll schedule a full thirty-minute tutorial on the topic!
Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
If you want to have music player working in all browsers check jPlayer. It is jQuery plugin. It works using HTML5 if browser supports it or using Flash if doesn’t. You can customize your player using HTML and CSS. Nice!
You could let the audio-element be in the page instead of creating it on the fly and set autobuffer=”autobuffer” on it. Then when you want to play the element you could call play from an onclick method on the link instead.
Can you please edit the article and remove the `autobuffer` attribute? It’s no longer in the html5 spec and has been more or less replaced by the `preload` attribute.
Sadly, when blogs this popular publish inaccurate information, the open web suffers.
I think that’s rather harsh. This is a barely documented update that was made to the spec less than 10 days ago. Nonetheless, I’ve updated the tutorial accordingly.
I’m not sure if it’s harsh or not–but when stale or incorrect information is presented as current and correct, just think of all the bad markup that results.
HTML 5 certainly seems an exciting development of the HTML framework. With abilities like these (which will quickly overshadow Flash for small tasks) it seems that HTML 5 will increase development speed and the general possibilities in web design.
It is a shame that IE is holding the mainstream usage of this back for the moment. All these new technologies are fantastic as long as the browsers support them, and until IE does so we can only use these with caution. Hopefully this will be resolved with the upcoming release of Internet Explorer 9.
With this giving a hint of what is to come in HTML 5 I am intrigued to see what other developments come with the framework. Maybe covering these in a future post would make a great article.
Uh guys – IE doesn’t support this because it’s not even a set standard yet. IE isn’t holding anything back at all; it’s just these guys who should have better things to do like making money for their work rather than f*ing around with unsupported standards.
Flash is still the best way to go for providing cross-browser/platform audio and video support.
Nice. I was walking in to work this morning with my iPhone and iPod in hand when I felt it is now time to have all my music on the web and listen to it via the iPhone or browser.
Unfortunately the “SRC” attribute exposes the audio file URL very blatantly, allowing anybody to grab the file. I haven’t found a way to hide the SRC or at least obfuscate it to a decent level. If anybody knows a way without flash speak up.
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Interesting… I wonder how the same can be done with IE?
Yeah, it’s always IE holding us back
If you want to have music player working in all browsers check jPlayer. It is jQuery plugin. It works using HTML5 if browser supports it or using Flash if doesn’t. You can customize your player using HTML and CSS. Nice!
Looks good, I’ll have to read it soon. I haven’t played around much with HTML5… I should.
What’s the song in the demo? I love 8-bit music.
It’s the theme song from the original Legend of Zelda for the NES.
It’s the “The legend of Zelda” theme! (NES)
Sounds like it’s from The Legend of Zelda on the NES… could be wrong though
Nice tutorial. It would be nice to see more tutorials with HTML 5 features.
Cheers!
It works in Opera 10.50 too
Oh does it? That’s good to know. I know that Opera 10 and below, though, do require a .wav file only.
what is this? I dont understand
HTML 5.
Any tips about preloading all the sounds, before accessing them?
You could let the audio-element be in the page instead of creating it on the fly and set autobuffer=”autobuffer” on it. Then when you want to play the element you could call play from an onclick method on the link instead.
More simpler example
document.getElementById(‘playButton’).onclick(function() {
document.getElementById(‘music’).play();
});
Play music!
Total win with the Zelda theme song.
I second this…oh and the audio tag is cool too
Mp3 work with this in Firefox but i am having trouble in opera anyone help?
Use a wav file for Opera 10 and below.
Use Ogg Vorbes in opera 10.50 or up
open source is WINNN!!!
Can you please edit the article and remove the `autobuffer` attribute? It’s no longer in the html5 spec and has been more or less replaced by the `preload` attribute.
Sadly, when blogs this popular publish inaccurate information, the open web suffers.
http://www.w3.org/TR/2010/WD-html5-20100304/video.html#attr-media-preload
http://www.w3.org/Bugs/Public/show_bug.cgi?id=8731
I think that’s rather harsh. This is a barely documented update that was made to the spec less than 10 days ago. Nonetheless, I’ve updated the tutorial accordingly.
I’m not sure if it’s harsh or not–but when stale or incorrect information is presented as current and correct, just think of all the bad markup that results.
Thanks for making the change, though.
[quote]As of Firefox 3.5, Chrome 3, and Safari 4,[/quote]
You forgot Opera 10.5, which was released a few days ago.. it works too.
You’re right. Fixed.
Great tutorial. Any way to style the audio player like people have been styling the video player such as over at http://jilion.com/sublime/video
Also, I like the facelift Nettuts just got! Looks like the whole tuts network just upgraded.
That is really really cool, down with flash! Down with flash!!!!
HTML 5 certainly seems an exciting development of the HTML framework. With abilities like these (which will quickly overshadow Flash for small tasks) it seems that HTML 5 will increase development speed and the general possibilities in web design.
It is a shame that IE is holding the mainstream usage of this back for the moment. All these new technologies are fantastic as long as the browsers support them, and until IE does so we can only use these with caution. Hopefully this will be resolved with the upcoming release of Internet Explorer 9.
With this giving a hint of what is to come in HTML 5 I am intrigued to see what other developments come with the framework. Maybe covering these in a future post would make a great article.
Uh guys – IE doesn’t support this because it’s not even a set standard yet. IE isn’t holding anything back at all; it’s just these guys who should have better things to do like making money for their work rather than f*ing around with unsupported standards.
Flash is still the best way to go for providing cross-browser/platform audio and video support.
Wow..
That’s good !
Thanks !
Thanks for this great tutorial, , thanks for sharing it!
Do we need to include an ogg and mp3 for every piece of audio we want to include using this new method in order to maximise compatability?
You might want to include the word ‘need’ in the second sentence of the opening paragraph …
That is awsome, I am looking forward to all browsers recognizing HTML5
This isn’t exactly on topic, but is there a special reason to make the click callback function return false, instead of using event.preventDefault() ?
http://api.jquery.com/event.preventDefault/
great zelda´s song….
Nice quick tip!
nice tip and totally love Zelda… Jeffrey ftw!
It is’t work in IE8, very bad))
You’ve used incorrect syntax. You close the source tag using the XHTML closing slash. Should just be:
hey can some1 tell me how how to group my dock like he did at 2:05 min.??
Thats good
very nice
you can just write:
it’s work too
sory here is code
<audio autoplay controls>
It’s really nice and simple tutorial
Video and audio supported with HTML5 is good .
-nXqd-
Nice. I was walking in to work this morning with my iPhone and iPod in hand when I felt it is now time to have all my music on the web and listen to it via the iPhone or browser.
Perfect tut.
@Axel @Jordan Walker
You guys could try this
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/
I haven’t got round to it yet but the title implies it could help you out.
If I don’t have an audio file, but just an audio stream in memory, e.g. byte [] audioBuffer, How can I play it without saving that into a file?
Thanks
Unfortunately the “SRC” attribute exposes the audio file URL very blatantly, allowing anybody to grab the file. I haven’t found a way to hide the SRC or at least obfuscate it to a decent level. If anybody knows a way without flash speak up.
Is it easy to stream audio with this tag? If so, are there any web resources to describe how to do this?