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:
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>
<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.