Many of you will, at some stage of your life, want to host and stream your own mp3 file of some sort. Some of you will want to host a podcast (egads! don’t do that on your own sever! Use a content distribution network or risk having your bandwidth devastated the minute you get popular…), link to a one-off interview or just link to a sound file you think is kind of cool.
There are options, of course. Services like the micro-blogging platform Tumblr support this feature natively. You could also use a free podcasting hosting service such Odeo. However, the true hard core amongst us all (you can spot them if you look – just follow the tell tale trail of corn chip crumbs and hints of wispy neck beards) will want to host their own sound files and damn the bandwidth consequences. If you are an apprentice hard core (don’t worry if you can’t grown a decent neck beard – I feel your pain, I really do), this post is for you.
I am going to make a few big assumptions:
- you have sufficient access to your own webserver to upload the mp3
- you actually have some sort of reason to do this (‘Because I can!’ is reason enough)
The file I have chosen to use as an example is 31 Ghosts IV (available under a Creative Commons 3.0 Attribution, Non-Commercial license).
Note: Please don’t link directly to my mp3 file for your own testing purposes or listening pleasure. My hosting services provider won’t appreciate it, and I could do without the excess usage bill. Thanks.
Using Google Reader Flash Player
This method takes advantage of IFRAMES. IFRAMES have been the cause of a number of web browser vulnerabilities over the years (too many to link to – try this Google search for iframe vulnerabilities). However, don’t let that you stop you!
All you need to do is paste the following code into your site:
<iframe style="border: 1px solid rgb(170, 170, 170); width:400px; height: 27px;" id="musicPlayer" src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=XXXXX"> </iframe>
In the above code is the phrase “audioURL”. This is the sound file you want to link to. In my case, this is http://techwhimsy.com/31_Ghosts_IV.mp3. The code becomes:
<iframe style="border: 1px solid rgb(170, 170, 170); width:400px; height: 27px;" id="musicPlayer" src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=http://techwhimsy.com/31_Ghosts_IV.mp3"> </iframe>
The final result of the above code looks like this:
This may not work inside of Internet Explorer 7. I’m still investigating why this is the case. (Note, in checking back, I’ve had even more trouble. I have been unable to get this method of embedding Google Reader’s audio player to work in Internet Explorer 7 and FireFox 3. It does work in Chrome, Opera 9.5 and Safari 3).
As you can see, the Google Reader player has a minimalist interface – fast forward, play/pause, rewind, a ‘scrub’ function to skip directly to where you want to be in the song, a timer and a volume slider. It also has that slick, bubbly Google interface which can be a nice addition to a site that already has a minimalist aesthetic overall. There aren’t any extra features that you don’t need.
One downside is that the interface isn’t configurable at all. There doesn’t even appear to be anywhere in the code that you can fiddle around to change colours. This is not surprising as you are pulling the files for the flash player interface straight off the Google servers.
Google Reader isn’t the only option. In the coming weeks I will also look at how to use other hosted media players as well as a couple of options for hosting not just your own mp3s but your own media player as well.