Some of the new exciting features of HTML5 are the audio and video tag. This could potentially, in the long term, replace flash on the video level. I wanted to use the audio tag in one of my experiemental project, there is little information about how to manipulate the audio tag, and tought it would be great to have a starter guide.
One thing clear is this is still an early implementation, which also means it is a bit buggy. I had a strange bug where if I had a song playing and had javascript throw errors at the same time (not related together), I could not terminate the song. Closing the tab would not stop it, I had to restart Firefox. Which lead me to think that the process is still not completely linked only to the tab (in Firefox at least).
I used jquery in my demo because the application I developing is wrapped around it, but this is not necessary.
View demo
(Only consisting of 5 buttons)
What I learned
The API is somewhat easy to work with, as it should be, play(), pause(), want to stop the volume? audioElement.volume=0. Want to start playing at 55 seconds? audioElement.currentTime = 55. Pretty cool stuff.
The default html audio player controls are added automatically with a simple: controls=”true”, it has good and bad sides. You don’t have to worry about it, but at the same time, for now, you cannot modify the player style. Also when you right click you have a nice contextual menu where you can save the file in ff3.5.
A normal audio tag
Add and play a sound via JavaScript
-
var audioElement = document.createElement('audio');
-
audioElement.setAttribute('src', 'loading.ogg');
-
audioElement.play();
Get the song filepath and duration
-
audioElement.src;
-
audioElement.duration;
Load a sound
-
var audioElement = document.createElement('audio');
-
audioElement.setAttribute('src', 'Mogwai2009-04-29_acidjack_t16.ogg');
-
audioElement.load()
-
audioElement.addEventListener("load", function() {
-
audioElement.play();
-
$(".duration span").html(audioElement.duration);
-
$(".filename span").html(audioElement.src);
-
}, true);
Stop a song
-
audioElement.pause();
Change volume
-
audioElement.volume=0;
Play at exactly 35 seconds in the song
-
audioElement.currentTime=35;
-
audioElement.play();
The bad parts
No stop(), only pause(), I really do not know what stopped them to put stop() in the API.
No way to get the songs name.
The only accessible format are ogg and wav, no mp3 love. It also means that you will have to convert all your sounds in ogg.
As I said this is a bit buggy but understandable, the specs are not even finished.
Microsoft will probably implement the audio and video tag in 2022.
The good parts
The API is easy to use, you can have a song playing in no time.
You do not need to parse the audio object in the HTML body, you can have it played directly in your script.
In the end, I’m really happy on how this turned out.
Download the source code View demo
Tested on:
Firefox 3.5
Ressources
http://hacks.mozilla.org/2009/06/exploring-music-audio/
https://developer.mozilla.org/en/Using_audio_and_video_in_Firefox
http://webkit.org/blog/140/html5-media-support/
useful. thanks for sharing.
Good article! Thanks!
Introduction to the HTML5 audio tag javascript manipulation…
A basic guide to the new audio tag and how to manipulate the object in javascript
…
It is very buggy but I do like these ideas for “open audio and video.” Same with images, but many sites will probably stick with flash since you can hide your mp3 source file (no music snitching). I’m more interested about video than audio since it’s fairly easy to play songs, however I see its use especially for band sites and such. MP3 should be supported though, along with a stop function but I think it’ll get better along the way.
Micorosft will support it in 2022, nice one but too bad it’s probably true.
– http://www.myunv.com
In responce to last comment, Can you “really hide your mp3″ using flash? Tell me how?
for the close tab bug (music not stoping after tab closed) maybe their could be a work around using the window.onunload event to destroy the audio tag, or if it doesn’t work, at least pause it
[...] There’s still little information regarding the use of the audio an video tags, but Cedric Dougas shows us some examples to manipulate audio in HTML 5 using javascript. [...]
Always remember to set your load event listener before you call the load() method.
work on Google Chrome 3.0.195.1.
for stop function, you can use a modified version of your load one..
you make a var “song” who is = the input file to load on load function, and for stop it, just load it without play
(sorry for my bad english, i’m french )
[...] [...]
[...] Los nuevos elementos video y audio permiten integrar directamente video y audio en una página web sin necesidad de que el usuario final tenga que tener instalado ningún plugin, siendo el navegado el encargado de reproducirlos. También se puede controlar la reproducción mediante javascript: pausa, silencio… Un ejemplo de vídeo y otro de audio. [...]
To stop de audio, just do this:
audioElement.pause();
audioElement.currentTime = 0;
sadly couldn’t make head or tail of the post as uses jquery which i dont get
I stream my audio using PHP on Ubuntu. Try this:
session_write_close(); //otherwise the $_SESSION is LOCKED while streaming
header(“Content-Type:audio/ogg”);
$cmd = “mpg123 -q -s \”".$file.”\” 2>/dev/null | oggenc -q 7 –quiet –raw-chan=2 -”;
passthru($cmd);
The jquery nonsense also made the example files basically worthless to me as well.
I wanted to see html and javascript… not additional dependencies with their own syntax outside of what I want.
I don’t see the nonsense here, it is pretty simple to understand
Is there are version without the “$” ?