HTML5 introduced the
video elements, which would make it a lot easier to embed audio and/or video in a webpage than it is now. Unfortunately, the browser vendors cannot seem to reach a consensus as to which codex the
video elements should be supported. Behold the comparison table* for audio-formats below:
|Chrome 3 (beta)||YES||YES||NO|
|Opera 10 (beta)||NO||NO||YES|
No two browsers (will support) the same file-formats, and Internet Explorer doesn’t support the
audio element at all. This means (for now) that adding cross-browser support is a nightmare that requires at least two files and a Flash-based fallback for IE and Opera (as you probably won’t be inclined to upload massive wav-files). Which, in my opinion, is a lot worse than just adding a link and have whoever downloads the file figure out how to play that file on their system.
So cooked up a script that takes a link to an audio-file, and places an
audio element in front of it if your browser supports the linked file-type. Like so:
Implementation is super simple: link the
insertaudioelement.js file to your page, and then call the script with
insertAudioElement.setup();. The setup function takes an optional className parameter, if you only want to insert audio elements to links with a certain class. For example, if you only want to add a player to links with the class ‘addplayer’, call the script like this:
Download the script and test files: insertaudioelement.zip [300kb, right click, save as…]
Update: Disabled the script on this site.