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 Demo" has been included
at the end of this page. The demo is written in Processing .js and is glorified extension
of the KISA sketch developed in this tutorial. It illustrates many of the available options.
Comment: The audio files used in this tutorial are on the same server as the tutorials
but this is not a required. The players can play audio files on stored on any server.
Some Reminders that may Save a Lot of Time and Frustration
These are some things the author learned the hard way
- 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.
- 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.
- 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.
- 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
- KISA has been tested in HTML 5 aware versions of Firefox, Chrome, Opera,
Safari 5.1, and Internet Explorer 9.
- Question: Can more than one audio file be played at the same time? Answer: Yes. You
will need an Audio object for each file.
- (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.
- (November 19, 2012) I do not have Internet Explorer 10 and Safari 6 available
and have been unable to test these tutorials in them.
- (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.
- (November 1, 2014) KISA was moved to http://brinkje.com/KISA and the audio
files it uses were moved to http://brinkje.com/KISA_Sounds.
- (December 6, 2014) For some time, it appeared the KISA tutorials didn't work in
when run in Chrome. It turned out that when running in Chrome was being used, the location
of mouse clicks was being reported incorrectly. Hence the buttons didn't respond when clicked.
This problem has been corrected.
Begin Tutorial
The first part of the tutorial shows the audio tag can be added to an HTML 5 page.
Next >
Updated 12/6/14