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">
<p>Your browser does not support the audio element </p>
</audio>

<audio> tag attributes
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> 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>
<p>Your browser does not support the audio element
</p>
</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.

Intro to HTML5 audio tag

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Intro to HTML5 audio tag

Similar to Intro to HTML5 audio tag (20)

Recently uploaded

Recently uploaded (20)

Intro to HTML5 audio tag