insertaudioelement.js

HTML5 introduced the audio and 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 audio and video elements should be supported. Behold the comparison table* for audio-formats below:

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:

• download test.ogg
• download test.mp3
• download test.wav

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: insertAudioElement.setup('addplayer');

This script doesn’t use any javascript library, so it should work everywhere. If you want to make it, say, jQuery-compatible, go nuts. If you want to turn it into a Greasemonkey script, go nuts. If you need some support, by all means do ask, but I’m just a total hack. No usefulness is implied, use at your own risk and all that.

Download the script and test files: insertaudioelement.zip [300kb, right click, save as…]

* Comparison table adapted from HTML5 Doctor CC-BY-SA

Update: Disabled the script on this site.