This page was updated 11/3/14.
Details for HTML5 <audio> and <source> tags with a demo is followed
by a Javascript API demo (written in Processing.js)
The Javascript demo illustrates many of the attributes and functions. However, some items like tracks and dates
are not covered completely.
This page uses the Java terminology "audio object" for what the HTML5 documentation calls
"audio element".
You can use the audio player's buttons to see how the attributes change before,
during and after playing a tune. The first two files are short and load quickly. The third is longer
so you may see more detail of the loading process. You can add a 4th URL to see how it works.
There are some notes about the demo following it.
Status pilot light colors
| Network state |
Ready state |
| ● Network empty |
● Have nothing |
| ● Network idle |
● Have meta data |
| ● Network loading |
● Have current data |
| ● Network no source |
● Have future data |
|
● Have enough data |
Notes
You can provide a file URL and file type for the fourth file. Click "Input URL" and
type or paste the URL omitting its file type. Click "OK" and then select your file.
Observe the "Source file". If the assumed file type in that line is wrong, click the
"Input special file type" and type the file type (e.g. mp3 or wav).
The demo is written in Processing.js and updates 20 times a second. It uses
"canPlayType" to determine if it can play the .ogg file.
If so, it plays the .ogg file. If not, it automatically picks a .mp3 file. When this
page was originally written, both types
of files are needed in order for the demo to work in all browsers. However, the latest
version of all 5 of the most common browsers now play .mp3 files.
The attributes for the audio object are grouped by states (e.g. Error state, Network
state, ...). Results are given in two columns: the attribute and its value. Note:
Different browsers may give different results for some attributes. Not all of the
attributes have been implemented in all of the browsers. The last
column shows some of the events that processed by the audio object.
Three of the attributes return a TimeRange object. It is possible that only parts
of a video file have been loaded and/or played. The Time Range structure gives the
ranges. Not all browsers have implemented "played" completely. If it has been
implemented in your browser, you can see "ranges" in the bar graphs by picking a
longer video file and starting playback and then clicking the "Time up" one or more
limes.
The "tracks" structures have not been implement in the tutorial yet because
this feature had only been implemented in one popular browser when this file was
originally written.
[+/-]Processing.js code for
Time Range bar graph
380 void timeRange(TimeRange tr) {
381 // prints the beginning and end of the last track
382 int num = tr.length;
383 String s = "length: " + num;
384 if (num > 0) {
385 s += " start(" + (num-1) + ")=" + roundTo(tr.start(num-1))
386 + " end(" + (num-1) + ")=" + roundTo(tr.end(num-1));
387 }
388 return s + " (only last range shown)";
389 } // timeRange
390
391 void timeRangeBar(TimeRange tr, int x, int y, int wide,
392 int high, double duration, color c)
393 { // Shows the ranges described by the TimeRange structure in a bar graph
394 // tr = the TimeRange stucture,
395 // x, y = the upper left corner of the box for the bar graph
396 // wide, high = the width and height of the box the bar graph
397 // duration = the duration of the audio file (in seconds)
398 // c the color of the bar.
399 int i;
400 double ratio;
401 double begin, stop;
402
403 if (tr == null)
404 text("N/A", x, y);
405 else {
406 // draw box representing the complete time of the audio file
407 fill(#FFFFFF);
408 rect(x, y-15, wide, high);
409 // draw the bars specified by the TimeRange structure
410 fill(c);
411 ratio = wide/duration;
412 try { //process each of the ranges separately
413 for (i = 0; i < tr.length; i++) {
414 begin = tr.start(i) * ratio;
415 stop = tr.end(i) * ratio;
416 rect(x+begin, y-15, (stop - begin), high);
417 }
418 } catch (e) {
419 // ignore errors
420 }
421 // add the end time of the last range as text
422 fill(#000000);
423 try {
424 text(" " + roundTo(tr.end(tr.length-1)), x, y);
425 } catch (e) {
426 }
427
428 }
429 } // timeRangeBar