Intro to HTML5 audio tag

INTRO TO HTML5 <audio> TAG

Presenter: Satej Kumar Sahu,

Mindfire Solutions,

Date: 17/09/2014

Contents

HTML5 and <audio> tag HTML5 <audio> tag Basic format in which <audio> tag can be used <audio> tag attributes <audio> events Example usage of <audio> attributes Example usage of <audio> events Conclusion

HTML5 and <audio> tag

- We all know about HTML5 and its various use cases. It has enriched the user interface with a rich set of functionalities and elements that have not only improved the user experience in terms of UX and efficiency and means of communication but have also provided a more meaningful structure to html with the introduction of HTML5.

- In this presentation, I will be giving a brief intro on the HTML5 <audio> tag element.

HTML5 <audio> tag HTML5 <audio> tag is used to play audio in

html pages. It takes the below basic format in its simplest form:

<audio src="my_music.mp3" controls></audio>

With the above structure, when the html page loads the page requests for the audio file listed in the "src" attribute and the “controls” attribute displays the browser default audio player for controlling playback.

In the next slide, I have shown the sample code and the browser view (Chrome).

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Intro</title>

</head>

<body>

<audio src="sample.mp3" controls></audio>

</body>

</html>

Basic format in which <audio> tag can be used

There are basically two formats in which <audio> tag can be used:

1. By providing the "src" attribute

<audio src="sample.mp3">

<p>Your browser does not support the audio element </p>

</audio>

2. By using the <source> tag which helps in providing fallback mechanism to play a file among the list which is supported by the browser.

<audio>

<source src="foo.mp3" type="audio/mpeg"> <source src="foo.ogg" type="audio/ogg">


</audio>

The <audio> tag comes with many inline global attributes that help in modifying its behaviour.

Some of the attributes are: autoplay buffered controls loop muted played preload src volume

<audio> tag attributes

<audio> events <audio> tag comes with a pre-defined list of

events that it can fire when it reaches a particular event behavior, letting us take appropriate action to notify the user or to take any specific action.

Some events are: abort canplay volumechange play pause

Example usage of <audio> attributes

<audio src="foo.mp3" autoplay loop controls>


</audio>

- The above audio starts "autoplaying" once the page loads with audio controls displayed and "loops" that is replays the audio once it reaches the end.

- They are basically boolean attributes which when present apply respective properties.

Example usage of <audio> events

<audio src="foo.mp3" id="media" controls></audio>

<script>

var elem = document.getElementById("media");

elem.addEventListener("seeked", function() {

elem.play();

}, true);

</script>

The event "seeked" is listened to, which is sent whenever a seek action is completed and then the play() method of audio element is called to start playback.

Conclusion

- We covered a basic intro to the HTML5 <audio> tag element.

- <audio> element gives us a set of pre-defined attributes, events and methods to customize the audio behavior to our needs.

- The implementation of attributes, events are browser dependent and have their respective quirks and differences in implementation and mechanism. But these can be handled safely and can be taken care of.

Thanks.

Date post:	08-Dec-2014
Category:	Technology
Upload:	satejsahu
View:	119 times
Download:	3 times

Intro to HTML5 audio tag

Technology