Play MP3, Ogg, Wav files with HTML5

Written by Saran on November 28, 2013, Updated November 28, 2014

With HTML5 we can play audio files easily, but before HTML5, we could only play these files using Flash player or Media Player plugins. Old browsers didn't have inbuilt media player that could perform these tasks. But HTML5 we don't need anything, just regular <audio> HTML element.

HTML <audio> Element

HTML5 has new element called <audio>, it is used to embed sound content in webpages. It renders a media player on the browser, which can be controlled using its buttons.

HTML

<audio controls="controls">
	Your browser does not support the audio element.
	<source src="whitney_houston-i_will_always_love_you.mp3" type="audio/wav">
	<source src="whitney_houston-i_will_always_love_you.ogg" type="audio/wav">
</audio>

As you can see the code is very simple, you may include several audio formats using <source> elements, browser will pick the most suitable one.

Artist Courtesy: Whitney Houston - I Will Always Love You

Attributes

There are several attributes you can add to audio element, which controls the functionality of audio player.

controls - Displays audio control. Remove this attribute to hide player.
autoplay - Plays audio file automatically.
src - Optional attribute, you may use <source> elements instead.
volume - Playback volume of audio (0.0 to 1.0).
buffered - Displays the buffered time ranges of the media.
loop - Restarts playing upon reaching end of the audio.
muted - Loaded audio will be muted initially.
preload - It can be "none", "metadata" or "auto".
- "none" - data is not loaded initially.
- "metadata" - downloads audio info (like length) but not whole file.
- "auto" - downloads whole audio file, even if user doesn't play it.