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 have sufficient access to your webpage so that you can either embed flash objects or add javascript
- 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
A big thank you to Eduardo Salguero for the heads up on how to access the mp3 player used in Google Reader.
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.
Coming Up…
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.
Hi there,
I can get the Google Reader to work, but with files from my server the buffering goes wrong, I can’t scrub with the slider. All files from the web go fine with Google Readrer except mine. Any suggestions? I’ve looked for hours.
Thanks!
Paul Delcour
Hi Paul,
It’s weird that you can stream other people’s files and not ones hosted on your own server. It might be a file permissions issue with your hosting provider. You might want to check with your host’s support to double check.
Are the files on your audio test page hosted on your server or elsewhere? I had no problems buffering or scrubbing forward and backward on the two Google Reader player streams.
Pingback: How to host and stream your own mp3s with JW media player | TechWhimsy
How and where do I copy the above link in order to embed music files in my website?
how do i make it to auto start what code do i have to add and where
Auto-start? No idea.
I have very strong views about audio and video that auto-starts when you load a page and I can’t think of a single reason why you would want it to auto-start.
I’m happy for you to try and convince me otherwise.
I can think of one good reason right now i need auto-start:
I feed mp3s into links that come from compressed files, the user is presented with lots of audio clips, once one is selected, it is unzipped and then a link to the file is outputted to the screen, the user is already waiting to hear the selected file, its unnecessary for the user to again click something(play) when the embedded player has already loaded on its own page. there’s only 1 embedded player at a time so its not like files would play over each other.
You wrote: “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).”
Did you find out why it doesn’t work in IE7?
In the end I couldn’t work out why it didn’t work in all browsers.
Considering it’s something of a hack to use Google’s own media player like this, I guess it isn’t too surprising that it’s not a perfect solution.
Here’s a great fix: Don’t use the iframe tag. Just embed the object like this:
about the autostart.. I actually have a legitimate reason to autostart a file… In my page I have alink that opens a popup window for a media file.. when the popup window opens I want to autostart the media. One of the few times I can agree with autostart.
I would also like it to autoplay. Anyone found a solution for that yet?
I found that just adding a bogus bit of code to the audio file specification, which I found on another site, makes the iframe code work for all browsers Mac and PC. I tested Firefox Mac, Safari Mac, IE 7 (Win), and Firefox Win.
Example (change { } for angle brackets):
{iframe style=”border: 1px solid rgb(170, 170, 170); width:400px; height: 29px;” id=”musicPlayer” src=”http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=[MP3 File Path Here]&play=true”}{/iframe}
It works great on my Blogger site.
Note: I increased the height from 27px to 29px. This adds an unwanted black line across the top in Firefox and Safari, but improves the display in IE, where at 27px the top edge was cut off making it difficult to read the time stamps. Is there a way to get that line across the top to display in a color other than black?
Note 2: “embed” will work in some browsers as an alternative to “iframe,” but I couldn’t get “embed” to work in all browsers with all audio file paths. The “iframe” code above is the only one that worked every time.
Works using a Google Gadget, under IE 7 IE 8 and FF 3
http://www.liens-du-vin.ch/google-audio_player-script.htm
—
prac
—
This does not work anymore. http://www.google.com/reader/ui/3247397568-audio-player.swf is not more available.
Thanks Dennis. I’ll look into it.
This is the new link to the Google reader mp3 player: http://www.google.com/reader/ui/3523697345-audio-player.swf
Found on Google reader support forum http://www.google.com/support/forum/p/reader/thread?tid=6ab1240445375e7a&hl=en
Hello Sir
I got code but can you tell me how can I find the exact link of the Mp3 file?
Do i need to upload mp3 on my server?
please help me.. Reply please
Thank You
Here’s the solution of the autoplay of that google reader
flashvars=”audioUrl=your.MP3&autoPlay=true”
just change the your to the mp3 links that you have
looks like this
Can i add a play list to this mp3 player ? and how please letme know
thank you