HTML5 Audio

 

My home page opens up playing a little monologue of mine, and is immediately followed by hours of streaming music. It works just fine in Internet Explorer and most other browsers, but Firefox (FF) no longer supports Windows Media format. I have FF 8.0.1. running on Caprica (my Windows XP system) and it still runs Windows Media Player (WMP). FF 8.0.1 also handles DHTML like a champ. I mentioned in another blog that Firefox used to handle cascading style sheets (CSS) a lot like IE, too; you had to make some changes, but it didn't take a lot of work. Today FF seems to delight in being as different from IE as possible.

In the aforementioned blog I stated that I changed the structured of my homepage to a table structure. Tables render in different browsers a lot like each other. So I ripped out my CSS and now I have a nice table structure that requires a lot less maintenance then it did in the past. ...but I still have the WMP problem with FF. I tried using Realplayer, but FF doesn't have a plugin for that either. Realplayer makes a dll you can copy into the Mozilla FF plugin directory, and it'll let FF play streaming music on an embedded Realplayer. Unfortunately, it crashes half the time. So I thought about HTML5.

HTML5 has an <audio> tag that comes with it's own audio player! So I Wrapped my current player code in <![if IE]> tags and it ran the same in IE. For FF I tried using a bunch of different schemes to get it too work; the JavaScript code I described in another blog, non-commenting !IE tags, etc. The music never played. So I put in my intro monologue and it played!  My intro monologue is a wav file, and my music files are mp3 files. I checked out the different sounds formats you can stream though FF, and mp3 isn't one of them! FF now favors a format called ogg. Another way to be different from IE.

Since most browsers still play WMP, I'm not going to worry about getting rid of WMP and replacing it with <audio> tags. ...and, since Realplayer works, I put Realplayer back into my homepage for non-IE browsers. Realplayer never crashes when I run it out of my home page, so maybe I'll make a pop up out of it, or something else. In the meantime, if Realplayer crashes in FF, the user can always reload the web page. Here's some sample code (view the source in your browser) on how to play music using HTML5:

 

 

Return To My Blog Page       Return To My Programming Page