KISA - Introduction

HTML 5 has a new feature that allows HTML 5 aware browsers to play an audio file without having to have an add-on. This is convenient for developers because they can add audio to their pages without having to assume that the user has installed the required add-on. (Of course, the user must have an HTML 5 aware browser.)

HTML 5 provides an Audio API that can be used by Javascript. This tutorial show how Processing.js can use that API directly without any Javascript. Those familiar with Javascript will quickly recognize that Processing.js programmer uses exactly the same commands as would be used in Javascript.

To illustrate how this can be done, this tutorial will develop a simple audio player in a series of steps. The coding used to communicate with the audio API can be used in many types of applications such as providing background sounds for sketches or games.

The video tag and video API are a super set of the corresponding audio elements. Many of the techniques used here apply to video if one adds the extra items required for video. One of the major differences is that there is no constructor for the video object. The first 3 tutorials can be changed to video using simple changes. The most significant are changing "Audio" to "Video" and "audio" to "video" and specifying the width of the video player. However, the audio constructor was used starting with tutorial 4. In these tutorials, the video tag must be added to the .html file and then referenced in the .pde file in the same way it was used in tutorials 1 to 3. Of course, the audio files must be changed to video files.

Because it has been difficult to find simple and readable descriptions of the HTML5 audio tag, a link to "HTML5 Audio Javascript API and Demo" has been included at the end of this page. It includes a listing of the audio attributes and events. The demo is written in Processing .js and is glorified extension of the KISA sketch developed in this tutorial.

Some Reminders that may Save a Lot of Time and Frustration

These are some things the author learned the hard way

  1. Many, if not most, browsers no longer allow "file:///" for the protocol for a local file. At the time this is written, Firefox and Safari 5.1 are a notable exceptions. For other browsers, files need to be on a server so you can use the protocol "http://". You can install a simple server on your computer. I use python.exe which comes with the Python27 package.
  2. In general, browsers can use either ".ogg" or ".mp3" files but not both with the audio tag and class. Chrome is a notable exception. Fortunately, there are file converters available on-line so it is reasonably easy to provide both file types.
  3. Some browsers (including IE9) capable of handling HTML 5 tags fail to do so if an appropriate DOCTYPE (<!DOCTYPE html>) is not the first line in the file. The author has suffered the consequences when the doctype was omitted.
  4. MIME types on servers may be a problem. The first server used was OK initially but after a while it appears that the MIME types on the server were changed and .mp3 files would no longer load into Safari and Internet Explorer 9. Initially the second server used (Go Daddy) would serve .mp3 files to those browsers but would not serve .ogg files to Firefox, Chrome, and Opera. It turned out that this was a known and solvable problem. (See Go Daddy support. for example.) The third and current server I tried for the audio files worked nicely for all files and browsers!

Updates

  1. KISA has been tested in HTML 5 aware versions of Firefox, Chrome, Opera, Safari 5.1, and Internet Explorer 9.
  2. Question: Can more than one audio file be played at the same time? Answer: Yes. You will need an Audio object for each file.
  3. (March 10, 2012) All the tutorials have been revised at least slightly. KISA 5 was revised extensively. A file listing the HTML5 audio API and a demo of it was added.
  4. (November 19, 2012) I do not have Internet Explorer 10 and Safari 6 available and have been unable to test these tutorials in them.
  5. (February 1, 2013) Some significant changes have been made to optional Tutorial 5 Form. Links to the new video tutorial KISVid have been added. KISVid Tutorials 0-3, 5, and 5 Form are relatively minor variations of these tutorials. Minor updates were added to the Audio Javascript API and Demo.

Begin Tutorial

The first part of the tutorial shows the audio tag can be added to an HTML 5 page.

Next >

Updated 2/1/13