Audio Formats with HTML5 Tutorial

Determine Sound File Types Used Per Browser

HTML5 Interactive Audio Example Introduction HTML5 Markup JavaScript Tips Issues HTML5 Audio Source Code

Introduction

Learn how to add sound to Web media with HTML5. Determine which audio file format to use, based on the current Web browser and device.

This tutorial demonstrates how to implement an interactive HTML5 audio player for games and other Web content. This method uses JavaScript and HTML5 markup. Learn to play a sound effect or music based on user interaction and browser type.

The tutorial concludes with a work around for issues playing audio on older devices.

HTML5 Markup

The HTML5 markup below demonstrates how to prepare HTML elements and attributes for audio. Create an HTML5 audio element. Include an id attribute. Create source elements with src and type attributes. Each audio file format requires a separate source tag.

Different devices, computers, and browsers, require different audio file formats. It's helpful to test browsers and devices, to determine which formats your application will need. The HTML5 audio tag supports MP3, OGG, and WAV formats. Audio file format conversion utilities are available online for free.

Assign formatted files to the src attributes of your source elements. Provide a value for the type attribute, based on the audio file format. For example, assign audio/mpeg to the type attribute for MP3 files. Assign audio/ogg to the type attribute for OGG files. The following listing demonstrates how to prepare audio and source tags with src and type attributes.

<audio 
id="auTag"
>  
 		   		
<source 
 src="nothing.mp3" 
 type="audio/mpeg" 
/>
	
<source 
 src="red.ogg" 
 type="audio/ogg" 
/>
	
<source 
 src="red.wav" 
 type="audio/wav" 
/>		
	   		
</audio
>

Click Event Listeners

The HTML5 Interactive Audio Example assigns onclick event listeners to green and red rectangles which display on the Web page. The following listing demonstrates assigning playAudioGreen() to execute when the user taps the green rectangle. Function playAudioRed() executes when the user taps the red rectangle.

<div 
 class="dGreen" 
 onclick="javascript:playAudioGreen()" 
>
</div>

<div 
 class="dRed" 
 onclick="javascript:playAudioRed()">
</div>

JavaScript

The previous HTML5 Markup included the audio tag with id named auTag. With JavaScript obtain a reference to the HTML audio tag through the id attribute named auTag. The following listing saves a reference of the audio tag to the variable audioTag.

audioTag = document.getElementById(
 'auTag'
);		
		

Determine Supported File Formats

With JavaScript determine which available audio file format the current device can play. First determine if the audio tag's canPlayType method is valid, with the following line of code.

if(audioTag.canPlayType)

Second if canPlayType isn't null, then call method canPlayType(). Pass one parameter representing an audio file type. For example call canPlayType() with audio/mpeg, audio/ogg or audio/wav.

Third if a file format is acceptable, then save a variable which indicates the allowable sound file type. The following example saves a number named eAudio. HTML5 Audio Source Code JavaScript initializes eAudio to zero. If eAudio equals 1, then MP3 files will play in the current Web browser. If eAudio equals 2, then OGG files are supported. If eAudio equals zero, then audio files won't play in the current Web browser.

function loadAudioCompat() {

if (audioTag.canPlayType) {

var playMsg = audioTag.canPlayType(
'audio/mpeg'
);

if ("" != playMsg) {
 eAudio = 1;
}

playMsg = audioTag.canPlayType(
 'audio/ogg; 
 codecs="vorbis"'
); 

if ("" != playMsg){  
 eAudio = 2;
}

playMsg = audioTag.canPlayType(
 'audio/wav'
);

if ("" != playMsg){  
 eAudio = 3;
}  
} 
}

Play the Supported File Format

Assign the correct file format to the audio tag's src attribute, based on the value of variable eAudio. For example if eAudio equals 1, assign an MP3 file.

Call the audio tag's play() method to hear the sound. Additionally this example displays the name of the file that's currently playing. The following listing demonstrates assigning and playing the correct file format, when the user taps the red rectangle.

	
function playAudioRed() {		

if (eAudio == 1){
 audioTag.src = "red.mp3"; 						
 audioTag.play();
 divOutput.innerHTML = "Playing red.mp3";
}

else if (eAudio == 2){
 audioTag.src = "red.ogg";
 audioTag.play();
 divOutput.innerHTML = "Playing red.ogg";
}

else if (eAudio == 3){
 audioTag.src = "red.wav";
 divOutput.innerHTML = "Playing red.wav";
 audioTag.play();			
}
	
else {
 divOutput.innerHTML = sNoAudio;
 divOutput.innerHTML += sNoFormats;	
}				 				
}

Tips

Prepare audio files in the formats required for your target devices and computing platforms. Testing's important to verify the formats which play with various devices and browsers.

This example was originally tested with old devices. Testing included the default Android browser (Froyo), the Android Firefox and Opera Classic browsers, Windows Opera browser, Google Chrome, Safari, and Internet Explorer 9.

Android was capable of playing WAV and OGG audio files in the Firefox and Opera Classic browsers, but not in the default browser. Internet Explorer 9 required audio files in the MP3 format. Firefox, Opera, Safari, and Google Chrome all played the MP3 and WAV files, while running on Windows Vista.

Multiple Sound Files

Consider creating separate HTML5 audio tags for each sound, when few audio files will be used. In that case there's no need to determine file formats. Browsers determine the format and play the correct file. The HTML5 Simple Audio Example, explains how to use separate audio tags for each sound effect in a game.

This example allows Web developers to change audio files dynamically with JavaScript. This example provided the markup for one audio tag which plays two audio files. The HTML5 Audio Source Code lends itself to online applications with many different sound files.

Issues

Testing revealed an issue with Internet Explorer 9 on Windows Vista. There was no problem assigning an MP3 file to the src attribute of an audio tag. There was no problem playing the file either. However there was a problem changing the src file interactively with JavaScript.

Once a file's assigned to the src attribute in HTML markup, it can't be changed with some older browsers. However in Web development it's helpful to change sound files interactively.

If you don't assign files to src attributes, the Web page doesn't pass validation. Therefore one work around assigns the name of a non existent audio file to src attributes. With a non existent file, but valid file name, the Web page validates. JavaScript can then dynamically assign various audio files to src attributes. In the following listing nothing.mp3 doesn't exist.

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

Summary

This tutorial explained how to add sound to Web media with HTML5. This article discussed how to determine which audio file format to use, based on the current Web browser and device.

This tutorial demonstrated how to implement an interactive HTML5 audio player for games and other Web content. This method uses JavaScript and HTML5 markup. Learn to play a sound effect or music based on user interaction and browser type.

The tutorial concluded with a work around for issues playing audio on older devices.

Have fun and love learning! See more HTML5 tutorials below.

More HTML5 Tutorials

Sprite Sheet Animation
Copyright © 2015 Seven Thunder Software. All Rights Reserved.