a blog for those who code

Tuesday 25 August 2015

Little about audio element in Html5

In this post we are going to discuss about <audio> element in Html5. The <audio> element is useful for embedding an audio player into the web page. It is very similar to Video Element. Along with that you have a Web Audio API which is a pure JavaScript API that supports manipulation of sound samples, sound generation etc.

Current Browser Support of Audio Element

Example :

<audio controls="controls">
    <source src="https://freesound.org/data/previews/320/320451_230160-lq.mp3" type="audio/mp3" />

Same as <video> element, the <audio> element will use the controls attribute to render the play, stop volume etc. And also like <video> element, in <audio> we have used the src and type inside the <source> element.

Attributes of <audio> element

1. src : Source of the audio stream.
2. controls : Controls for audio playback and volume to be shown or not.
3. autoplay : It will start playing the audio as soon as the page is ready.
4. loop : To play the audio in loop mode.
5. preload : The preload attribute is used when autoplay is not used. It has three possible values none - do nothing, metadata - download metadata of the audio (ex - length, format), auto - it is decided by the browser.

Html Audio DOM Reference methods are addTextTrack() {add a new text track to the audio}, canPlayType() {checks if the browser can play the specified audio}, load() {re-loads the audio file}, play() {starts playing the audio} and pause() {pauses the current playing audio}.

Please Like and Share the Blog, if you find it interesting and helpful.

No comments:

Post a Comment