jQuery: Testing HTML5 Audio Events Using JavaScript's addEventListener Method

HTML5 audio element is pretty much new and a super exciting HTML media element (there's also HTML5 video element).
The default browser audio player (in Chromium, Firefox, the new Internet Explorer, Opera, etc) is actually a canvas element. That's why we can't (directly) style it (yet) through CSS, and it has different looks on different browser.

But on Firefox, I can (subtly) change the background color. I'm not sure about other browser.

Other styling properties I have tried (which affected the exterior of the audio element):

• width and height: of course those will work. Except the height won't vertically stretch the audio player. It will just give more vertical blank space.
• padding and margin: work.
• 2D transform thingies: work.
• And all other CSS positioning properties which can be applied to a div element.

But for sure, we can't change the canvas internal default player button and such. We can, however, create our own audio player, then control the audio through JavaScript.

There are lots of tutorials you can find on the internet about that. You can build it from scratch, or using plugins, or whatever you like.

---

About this demo
This is a demo to show the events sequence that happens during the audio fetching, playing, pause, end, and so on. I'm using jQuery, Bootstrap, and Roboto fonts for the user interface.

Why addEventListener?

Because addEventListener is the newer method to capture events than on. So in some of my testings, some of audio events were better captured using addEventListener than the on method, like 75% : 25%. It was "faster" and more "sensitive".
Anyway, the result might vary between machines. And to be sure, you can always do your own tests.
That's it, that's the whole reason.

If you wanna change the addEventListener to on, do something like this, for instance you wanna change the durationchange event:

From this: sound.addEventListener("durationchange", function (e) { monitor(e); }, false);

To this: sound.ondurationchange = function (e) { monitor(e); };

Audio host

The audio sources here are hosted on the awesome cloud, Dropbox: https://www.dropbox.com/

Downloading the HTML source

There are lots of things going on in there, so I provide free download for the entire HTML. I put all the styling, the HTML elements, and surely, the script. They are all within the HTML, plus the explanation of some coding lines. You can use it locally to test your files.

DOWNLOAD DEMO (12KB - HTML) DEMO ON THOR

---

---

Customizing the HTML source

What you need to change in that HTML file are:

1. The jQuery JavaScript source, you can download it from http://jquery.com and use it locally, or using CDN (Google, CDNJS, jsDelivr, Microsoft, etc).
2. The Bootstrap CSS and JavaScript source. The same, you can freely download them: http://getbootstrap.com and use it locally. Or, using Bootstrap's sweet CDN: http://www.bootstrapcdn.com
3. I changed the "Roboto" family to just using "Sans-Serif". You can change it to whatever font type you like.

HTML source updates

#1 Update: added CSS @media for screen width less than 720px

@media (max-width: 720px) { .all_holder { width: 100%; } #Current_Time, #Total_Time, #network_state { display: block; margin: 5px 0; } #network_state { margin-top: -15px; } }

#2 Update: added HTML meta tag for small screen

<meta name="viewport" content="width=device-width, initial-scale=1.0">

#3 Update

Switched the browser support monitor position

#4 Update

Added additional styling and changed a little the browser test notification phrases (on demo iframe/page).

• The mark tag: mark { padding:2px 5px; border-radius:4px; }
• Plus, added the the background for .green class (I forgot to type that in the CSS).
• Chrome 36 (the newest Chrome for July 19, 2014) can return probably for MP3 media type even though we didn't include the specific codec for that. Thoos, I changed my own accidentally amphibious, ambiguous phrase for that particular notification in the demo iframe/page.
  You can change the browser test if — else returned notification(s) yourself (in the free download HTML example).

---

About hosting media files (for streaming)

Remember, you have to properly set the MIME Type or Content-Type (HTTP response header) of your media files, if you're hosting it on your own server.

For MP3: audio/mpeg or audio/mp3 (I usually put audio/mpeg, but audio/mp3 will also work)

And, OGG: audio/ogg.

And, another very important thing, you need to set the Cache-Control response header to be no-cache, must-revalidate and the Pragma to be no-cache for the media file (the audio file).
I'm using Google App Engine with Python, therefore, the documentation for that is right over there
In my case, I put the particular audio file expiration time to be:

expiration: "0d 0m"

That will automatically send the Cache-Control and Pragma headers I mentioned above.

---

This is the end
Right, that's about it. If there's something you wanna ask about this demo, well, just type your question then. There's a comment section below this post.
See ya.

---

Related links

1. HTML5 audio tag documentation at Mozilla Developer Network
2. HTML5 audio attributes, methods, and events list at w3.org
3. MIME Type and Content-Type at Stack Overflow

This audio element is a work in progress, so you might see some updates at those reference links.

Basic UI example APlaya

---

The newer video element doodle
At this post