KISA0 illustrates the simplest way to use audio. Just add the audio tag to the .html page. The sketch is about as simple as possible and adds nothing to the audio or the page.
The following is the HTML coding which adds the audio control to the page.
12 <audio id="audiotag" preload="auto" controls="controls" > 13 <source src = "http://brinkje.com/KISA_Sounds/groove.ogg" type="audio/ogg" /> 14 <source src = "http://brinkje.com/KISA_Sounds/groove.mp3" type="audio/mpeg" /> 15 Your browser does not support HTML 5 audio. You may want to update your 16 browser to a current version. 17 </audio>
The text "Your browser ..." will appear in the user's web page only if their browser does not support the <audio ..> tag.
We will look at the attributes used in these tags.
| Tag | Attribute | Description |
|---|---|---|
| <audio> | id | Gives a name to the audio player which can be used in a sketch. |
| <audio> | preload | Specifies that the audio file will be loaded when the page loads and will be ready to run. |
| <audio> | control | Specifies that the browser's built-in audio control will be shown. The look of the control depends on the particular browser being used. |
| <audio> <source> | src | Specifies the URL of the audio file to be played. |
| <source> | type | Specifies the MIME type of the media file. |
It is possible to add one src attribute to the <audio> tag instead of using the <source> tags.
<audio id="audiotag" preload="auto" controls="controls"
src = "http://www.cs.plu.edu/~brink/audio/groove.ogg" type="audio/ogg" />
However, this will not work in all browsers. In particular, it will not work in Internet Explorer 9 - 11. The problem is that different HTML 5 browsers can play different types of files. For example, the latest versions (as of Nov, 2014) of Chrome, Firefox and Opera can play .ogg, .mp3, and .wav files but Explorer 9 - 11 can only play .mp3 files. Safari cannot play .ogg files. We will assume that both .ogg and .mp3 versions of the groove file exist. By using multiple <source .. > tags, one gives the browser a set of files from which it can pick. The browser will play the first file it can use.
At first it may seem that the limited file types that can be used with HTML 5 browsers seriously restricts the use of the <audio ..> tag. However, it is pretty easy to find free programs that convert audio files from one type to another. For example, many sources recommend http://audacity.sourceforge.net/.
A couple of good references for information about the audio tag are http://www.w3schools.com/html/html5_audio.asp and HTML5 Demo.
Note: ".pde" files are being used in this tutorial in case you want to use the Processing IDE for debugging the sketch. Otherwise ".pjs" would be very appropriate.
Sometimes it is useful to use Processing.js to access the Audio API in HTML 5. In the next
part we will see how the sketch can get information from the audio player.
<Previous
Next >
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>KISA 0 (Keep It Simple Audio)</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6 <script type="text/javascript" src="processing.min.js"></script> 7 </head> 8 <body> 9 <h1>Keep It Simple Audio 0</h1> 10 <canvas id="KISA" data-processing-sources="KISA0.pde"></canvas> 11 <br /> 12 <audio id="audiotag" preload="auto" controls="controls" > 13 <source src = "http://brinkje.com/KISA_Sounds/groove.ogg" type="audio/ogg" /> 14 <source src = "http://brinkje.com/KISA_Sounds/groove.mp3" type="audio/mpeg" /> 15 Your browser does not support HTML 5 audio. You may want to update your 16 browser to a current version. 17 </audio> 18 </body> 19 </html>
1 // KISA 2 // Keep It Simple Audio version 0 3 // James Brink brinkje@plu.edu 4 // 7/25/11 5 6 // The constants can be modified. 7 int width = 500; // Width of canvas 8 int height = 290; // Height of canvas 9 10 void setup() { 11 // Setup the sketch 12 size(width, height); 13 smooth(); 14 noLoop(); 15 } // setup 16 17 void draw() { 18 background(#FFFFAA); 19 20 fill(#000000); 21 textAlign(CENTER); 22 text("KISA 0", width/2, 30); 23 }
Updated 11/6/14