HTML5 Audio Tag

 HTML5 relies on new set of elements in order to embed reach content such as video and audio. The elements also tags are somewhat similar. Let’s look at the audio tag and see what attributes it has in order to start audio playback.

HTML5 audio tag has several important attributes. First attribute is src. It is used to specify file to be loaded into user browser for audio playing. This attribute is required to make audio tag of a basic form.

Here is an example of src attribute in audio tag:
<audio src="MyAudio.wav"></audio>

In order to start up audio file to play within your browser, we need to apply another HTML5 audio tag attribute. It is called autoplay and it starts your file to play upon its META data load. It is Boolean data type and does not require having value assigned to it. Moreover, if you try to set this attribute to false, it will still detect it as true value. Here is an example of src and autoplay attributes in audio tag:
<audio src=" MyAudio.wav" autoplay></audio>

HTML5 Audio tag allows to play audio file continuously with the help of loop attribute. It has to be used along with the autoplay attribute of the audio tag.  Loop attribute is also a Boolean and does not require value to be set. It is not our recommendation to use loop in case you have multiple audio files playing on your site. It is possible that they are all being played at the same time and synchronizing them all is a very difficult task. It can be done with the help of JavaScript though. Here is an example of src ,  autoplay and loopattributes in audio tag:
<audio src=" MyAudio.wav" autoplay loop></audio>

HTML5 audio tag can be set in such a way as to allow user to interact with it. Control attribute of the HTML5 audio tag is designed to provide a way to display an audio resource on your web page. It allows user visually start, stop, rewind and pause audio playing. Webpage will render audio player differently depending on your browser. Keep it in mind when designing your web pages. Here is an example of src and autoplay, loop and controls attributes in audio tag:
<audio src=" MyAudio.wav" autoplay loop control></audio>

HTML5 audio tag has another useful attribute called preload. This attribute accepts three values: none, metadata and auto. Preload attributes allow you to control the way audio file behaves when loaded for the first time. For example, if you set preload to none, the audio file will not be loaded unless you click play and only audio file generic information will be accessible by the browser. On the other hand, if you expect that users will play your audio file and you need to pre-buffer it, then you set this attribute to auto. Here is an example of src and autoplay, loop, controls, preload attributes in audio tag:
<audio src=" MyAudio.wav" autoplay loop control preload="auto"></audio>

It is recommended to test your HTML5 audio tag on multiple browsers as it renders differently on each major browsers as well as lacking certain functionality from browser to browser.          

Featured pages

Overview

Learn about HTML5 architecture, design principles and patterns on HTML5 Overview Tutorial. Become …

Tags

Learn about HTML5 tags and discover a new list of HTML5 tags. Find out about HTML5 tags support by…

Welcome

 Learn HTML5 development techniques, tips and tricks on our website. Find out what is required…

Date Time Picker

HTML5 forms use date and time controls regularly. HTML5 date and time controls are used by booking …