HTML5 Simple Interactive Audio Tutorial

Learn a simple technique to add sound to Web pages with HTML5.

Simple Audio Example Introduction HTML Markup for Audio JavaScript Play Sound in Response to Taps Summary

Introduction

Learn to add sound to Web pages with HTML5. This simple method uses the audio tag with src property. With the Simple Audio Example, tap a green rectangle to hear music. Tap a red rectangle to hear a sound effect.

This tutorial covers the HTML5 markup and JavaScript to play audio files when the user taps a rectangle.

HTML Markup for Audio

This section demonstrates how to add audio tags and sound files to a Web page with HTML5.

Audio Tags

HTML5 sound requires the audio and source tags. HTML5 source tags include the src and type attributes. The following markup creates an audio tag with a source tag for just one MP3 file named red.mp3.

<audio 
id="auTagRed"> 
         
<source 
src="red.mp3" 
type="audio/mpeg" 
/>

</audio>

Audio Formats

Each audio file format requires a separate source tag. The HTML5 audio tag supports MP3, OGG, AAC, and WAV formats. Different devices, computers, and browsers, require different audio file formats. For example some Android browsers play MP3 files. Other browsers require OGG files. Internet Explorer can play WAV files as well as other audio file formats. It's helpful to test browsers and devices to determine which formats your Web application will need.

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/ogg to the type attribute for OGG files. Each file format corresponds to a type attribute.

If the Web browser can play one of the audio file formats included in the following set of source tags, then with a little JavaScript you'll hear the sound. The following markup demonstrates creating an audio tag with a set of source tags for MP3, OGG, WAV, and AAC file types. The audio tag's id attribute equals auTagRed.

<audio 
id="auTagRed"> 
  		   		
<source 
src="red.mp3" 
type="audio/mpeg" 
/>

<source 
src="red.ogg" 
type="audio/ogg" 
/>

<source 
src="red.wav" 
type="audio/wav" 
/>
		
<source 
src="red.aac" 
type="audio/aac" 
/> 		
</audio>

The second audio tag's id attribute equals auTagGreen. The JavaScript section accesses the audio elements by id.

<audio 
id="auTagGreen"
> 
         
<source 
src="green.mp3" 
type="audio/mpeg" 
/>

<source 
src="green.ogg" 
type="audio/ogg" 
/>

<source 
src="green.wav" 
type="audio/wav" 
/>
  
<source 
src="green.aac" 
type="audio/aac" 
/> 
  
</audio>

Create Colored Rectangles

Declare two div elements. Include styles which color the backgrounds, apply padding, and float the rectangles.

The green colored rectangle's onclick event equals playAudioGreen(). The red colored rectangle's onclick event equals playAudioRed().

The following markup demonstrates creating, styling, and assigning onclick events to each rectangle.

<div 
style="background-color:green; float:left; padding:2%;" 
onclick="javascript:playAudioGreen()"
>
Tap for Music
</div>

<div 
style="background-color:red; float:right; padding:2%;" 
onclick="javascript:playAudioRed()"
>
Tap for Sound Effect
</div>

Prepare Audio When Web Page Loads

Assign an onload event listener to the HTML body tag. The JavaScript function loadExample() executes when the Web page loads.

<body 
 onload="javascript:loadExample()"
>

JavaScript

First save references to the red and green audio tags. The function loadExample() executes when the Web page loads. loadExample() obtains a reference to each HTML audio element through its id attribute. The following listing demonstrates assigning variable audioTagRed a reference to the audio tag which includes sound files to play red.mp3, red.ogg, red.wav and red.aac. Variable audioTagGreen references the audio tag which includes sound files to play green.mp3, green.ogg, green.wav and green.aac.

audioTagRed = document.getElementById
(
 'auTagRed'
);

audioTagGreen = document.getElementById
(
 'auTagGreen'
);		

Determine if Sound Can Play

Second loadExample() determines if the current Web browser can play audio. The following short listing tests the audioRedTag. If canPlayType is not null, then the browser can play sound files. Variable bAudio equals true if audio's enabled.

if (audioTagRed.canPlayType) {
 bAudio = true;	    
}

Play Sound in Response to Taps

It's very simple to play audio when the user taps on an HTML element. The HTML Markup for Audio section demonstrated declaring audio tags with onclick event handlers for the red and green rectangles. The JavaScript section demonstrated saving references to the audioTagRed and audioTagGreen audio HTML tags.

When the user taps the red rectangle function playAudioRed() executes. Function playAudioRed() calls audioTagRed.play(), if the browser has enabled sound. Method play() is a built in HTML5 audio method. There's no need to code play(). It's already part of HTML5 enabled Web browsers.

The entire JavaScript listing follows.

var audioTagRed;	
var audioTagGreen;	
var bAudio = false;

function loadExample(){

 audioTagRed = document.getElementById
 (
  'auTagRed'
 );	
 
 audioTagGreen = document.getElementById
 (
  'auTagGreen'
 );	
 
 if (audioTagRed.canPlayType) {
  bAudio = true;	
 }    
}

function playAudioRed() {
 if (bAudio == true) {
  audioTagRed.play();  
 } 	 				
}
 
function playAudioGreen() {	 
 if (bAudio == true) {
  audioTagGreen.play(); 
 } 	 				
}

Summary

This tutorial explained how to add sound to Web pages with HTML5. This simple method uses the audio tag with src property. With the Simple Audio Example, tap a green rectangle to hear music. Tap a red rectangle to hear a sound effect.

This tutorial covered the HTML5 markup and JavaScript to play audio files when the user taps a rectangle.

See more HTML5 tutorials by topic.

More HTML5 Tutorials by Topic

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