audioelement is pretty much new and a super exciting HTML media element (there's also HTML5
The default browser audio player (in Chromium, Firefox, the new Internet Explorer, Opera, etc) is actually a
canvaselement. 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
height: of course those will work. Except the
heightwon't vertically stretch the audio player. It will just give more vertical blank space.
2D transformthingies: work.
- And all other CSS positioning properties which can be applied to a
But for sure, we can't change the
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.
addEventListeneris the newer method to capture events than
on. So in some of my testings, some of audio events were better captured using
onmethod, 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
on, do something like this, for instance you wanna change the
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.
Customizing the HTML source
What you need to change in that HTML file are:
- 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
@mediafor screen width less than 720px
#2 Update: added HTML meta tag for small screen
Switched the browser support monitor position
Added additional styling and changed a little the browser test notification phrases (on demo iframe/page).
- Plus, added the the
.greenclass (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
elsereturned notification(s) yourself (in the free download HTML example).
About hosting media files (for streaming)
Remember, you have to properly set the
Content-Type(HTTP response header) of your media files, if you're hosting it on your own server.
For MP3:And, another very important thing, you need to set the
audio/mp3(I usually put
audio/mp3will also work)
Cache-Controlresponse header to be
no-cache, must-revalidateand the
no-cachefor 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:
That will automatically send the
expiration: "0d 0m"
Pragmaheaders 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.
- HTML5 audio tag documentation at Mozilla Developer Network
- HTML5 audio attributes, methods, and events list at w3.org
- 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
At this post
Post a Comment
Tell me what you think...