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.

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

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
• controls
• loop
• preload
• src
• onerror

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 audio 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="/assets/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 audio 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>