Other useful related articles:
- HTML4 and HTML5 Key Differences
- Advantages of Converting PSD to HTML5
- Essential Guide to HTML5 Document Structure
In this article, We will learn together that how to use the <audio> tag to play sounds on our websites.
HTML5 <audio> element to add sound file
The basic <audio> tag is really easy to use. Here is the most basic use of the <audio> tag: In the following example it loads a mp3 file and play it and autoplay attribute is used to play the sound automatically.
<audio> <source src="voice.mp3"> </audio>
<audio> is supported by most modern browsers, but the problem is that different browsers do not support the same file format. Some browsers can play .mp3 files but not .ogg files, while other browsers can play .ogg files but not .mp3. The solution to this problem is to use both formats, so visitors can hear your sound, whatever the browser they use.
<audio> <source src="voice.ogg"> <source src="voice.mp3"> </audio>
Playing a sound automatically
If we want the sound to play automatically when the page has loaded, the autoplay attribute is used to play the sound automatically.
<audio autoplay> <source src="voice.mp3"> <source src="voice.ogg"> </audio>
If you want the audio to play endlessly use loop attribute to the <audio> tag.
<audio loop> <source src="voice.mp3"> <source src="voice.ogg"> </audio>
Adding player controls
It can be annoying playing sounds automatically as soon as you view a page, which is definitely a bad practice, you should let the browser display some controls such as volume, and a play/pause button. This can be done easily, simply by adding the controls attribute to the tag.
<audio controls> <source src="voice.mp3"> <source src="voice.ogg"> </audio>
Specify MIME types
It is a good practice to specify the MIME type of each file when using different file formats. It can be done by using the type attribute.
<audio controls> <source src="voice.mp3" type="audio/mp3"> <source src="voice.ogg" type="audio/ogg"> </audio>
Fallback for old browsers
<audio controls> <source src="voice.mp3" type="audio/mp3"> <source src="voice.ogg" type="audio/ogg"> Sorry, your browser does not support the audio element. </audio>
The brief functional breakdown of the element above would be:
- Try to play the .mp3 audio file
- If item 1 fails, try to play the .ogg file
- If item 2 fails, display the “browser does not support” message
It is a good practice to buffer the files when using the large media files. It can be done by using the preload attribute.
Preload attribute accept 3 values:
- None: File not buffered
- Auto: Browser buffer the file automatically
- Metadata: When page loads only buffer metadata
<audio controls> <source src="voice.mp3" type="audio/mp3" preload="auto"> <source src="voice.ogg" type="audio/ogg" preload="auto"> </audio>
The <audio> tag has a lot of attributes which can be used for additional controls, including the event attributes in HTML5. Events include window events, which are triggered for the window object, form events, which are triggered by actions that occur within an HTML form, keyboard and mouse events, and media events.
There are many excellent HTML5 tutorials and resources available on the web to help you get experienced. No matter what your level of expertise is, jump in, get your coding feet wet, and begin using HTML5 on your websites. Feel free to leave a comment below!