Published on: 08 August, 2013

HTML5 Audio Control

Posted by andy | 2691 views 0 likes 0 favourites 0 comments
Tumblr Digg Google Plus

HTML5 allows you to play audio on the website by using its new control without have to depend to other plugin like flash. Most of the modern browsers can only play and support the .ogg and .mp4 audio format.

Note: if the .ogg, .ogv or .mp4 is not played properly on your website, make sure this MIME Type is supported in your web hosting provider.

Below is the example on how to add MIME type in IIS7/IIS7.5 under each website MIME Type section

Adding mime type mp4 in IIS7

Adding mime type ogv in IIS7

So, how to use this audio control in HTML5? Well it is relatively easy, you can just use the following syntax tag <audio></audio>. This tag is supported the following browsers: Chrome, Opera, Firefox, Internet Explorer 9 or above and Safari.

The following attributes are available in the audio control properties.

autoplay

This attribute is used to determine whether the audio will be auto play or not. The value for this attribute is true or false. Return to Audio Attributes Index List.

controls

This attribute is used to determine whether you want to display the controls bar or not. The control bar in this case is the play/pause buttons. The value for this attribute is true or false. Return to Audio Attributes Index List.

loop

This attribute is used to determine whether you want to keep the audio over and over (looping). The value for this attribute is true or false. Return to Audio Attributes Index List.

poster

This attribute is used to determine whether you show an image if a audio you specify is not exists. The value for this attribute is the url path of the image. Return to Audio Attributes Index List.

preload

This attribute is used to determine whether automatically load the audio or not. The value for this attribute is auto, metadata, or none. Return to Audio Attributes Index List.

src

This attribute is used to determine the source or path of the audio. The value for this attribute is the location of the audio path. Return to Audio Attributes Index List.

onerror



This attribute is used to catch an error if there is an issue loading the audio. Return to Audio Attributes Index List.

We use the video sample file, so basically there is no audio but we just want to show you how this controls looks like.

Demo Audio Control in HTML5

See below example code on how to create audio control in HTML5.

/* Example of using audio control */
<audio src="http://static.bytutorial.com/content/files/html5/sampleaudio.ogv" autoplay="false" controls="true" onerror="checkStartup(event)">

</audio>

<script type="text/javascript">
	function checkStartup(e) {
		switch (e.target.error.code) {
			case 
			e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
				alert("The video file is not supported.");
				break;
			case e.target.error.MEDIA_ERR_DECODE:
				alert("There is a decoding problem issue.");
				break;
			case e.target.error.MEDIA_ERR_NETWORK:
				alert("There is a network issue");
				break;
		}
	}
</script>
Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.