Loading ...[update: I’ve since started using the Anarchy plugin, which also makes standard hyperlinks playable, and though I’m on the fence about which technology I like better for audio (I got Anarchy for the video component), I lean toward the method described below because it’s less visually intrusive. Unfortunately, I can’t figure out how to disable the Anarchy audio player segment without disabling the whole thing, so all the example links below (and throughout this site for now) show Anarchy’s “audio mp3″ indicator beside the simple blue arrow used by the del.icio.us player described below. The blue arrow is the only thing installed by the instructions below (visually) so keep that in mind as you continue reading.]
I’ve been looking for something like this for months. Who knew I’d find it without even trying on one of the most popular websites in the world?
A while back, I was working on some podcasting ideas for work and testing some things out here on Caddickisms. I spent a long time just trying to get an audio player to work correctly in WordPress (the software that runs this blog). The problem is that everything I found used the HTML <object> tag, which WordPress kept re-writing (and breaking) behind the scenes. I thought I had it fixed when I ran across the Gmail audio player, which uses the <iframe> tag, but apparently something gets screwed up there too, because while it works in Firefox, it’s broken in Internet Explorer (at least in version 6).
So… I gave up. I’m still working on Podcasting related stuff at work, but it’s not posted in a blog, so there was no reason to try to fix something I wasn’t going to be doing very often, if at all. But it kept gnawing at me…
Today, I finally found something that works and it’s easier than any other method I’ve found.
Here’s what you need to know:
- Copy this [updated. See comments]:
<script type="text/javascript" src="http://images.del.icio.us/static/js/playtagger.js" ></script> - Put it somewhere in your HTML.
- Put up a standard link to an MP3 file.
That’s it.
On a blog, you might think you’d have to put the HTML into a template page. You could do that, but with WordPress’ Sidebar Widgets, you don’t have to! Just use one of your existing Text Widgets and put the code in there. I put mine in the “About Me” widget. Works great! Now anytime I want to link to an MP3 file, visitors can play it directly from my page!
Here are some examples:
Grey Eye Glances: Close Your Eyes
(for more of this type of music, try out the Grey Eye Glances site.)
Technorati Tags: website MP3 player, javascript tricks and tips, WordPress tips, del.icio.us tools, play tagger, Grey Eye Glances
Hello,
i am having the MOST difficult time trying to understand this audio posting stuff…if you could provide me with the version for ‘dummies’ hahaaa…i wuld preciate it…here’s what i need to know…or rather here’s where i am at…i have some audio clips that i have recorded and they ARE NOT anywhere on the web…i want to place them on my blog from my computer…i need to know how to download a player for them and how to upload them to the player/site…any help wuld be greatly appreciated! thank you
sheBa
While very similar, there are differences depending on what blog software you are using.
Looks like you’re using Blogspot (which I am not familiar with, so stuff related to that will be general guidelines). I’ll assume you have an MP3 formatted audio file on your computer.
In your Blogspot admin section, possibly just in your Write Post page, look for a way to upload a file (pictures or sound). Click the associated Browse button, then find and select the MP3 file on your local drive. Click upload. Note the web address (URL) of the uploaded MP3 file.
(Alternately, you could use a service like Odeo.com to host your MP3 file. I did a post about them earlier.)
Take the javascript code in the post above and put it on your site. Like I said, I’m not familiar with BlogSpot so I’m not sure how you would do that. On WordPress, I could either edit the template code or place the javascript in a text widget.
In your post, create a link directly to your MP3 file, using the full URL - whether it’s on your BlogSpot site or on some place like Odeo.
That should be it. Hope that helps. Feel free to ask more questions if you want me to clarify anything.
And if anyone else is familiar with the BlogSpot admin features, feel free to chime in.
[…] Thanks, Lorelle, for the compilation (and the link to my previous post on the subject)! […]
How simple it is … thanks ever so much.
I do have one question. I used the Java code in a sidebar widget, created a link to the mp3 audio and when you click the link it works perfectly.
I notice on your samples above that the link works just like mine does, but you also have a small play icon. Clicking that allows me to listen without leaving the page.
How did you do this? I checked your source code and it appears you’re linking just as I did, but I have no play icon.
OOPS, I found out why I had no play icon. I checked the java code above with that you’re using and I found a difference … the code above uses xsrc. Remove the x and the little icon appears.
For the record, the code that actually appears in my widget is:
<script type="text/javascript" src="http://images.del.icio.us/static/js/playtagger.js"></script>I have been trying to find a way to play bands songs (used with their permission of course on my music pages) on my site without using that ugly windows blue box.
This is small and doesn’t look ugly.
Bless your heart for sharing! I will change the rest of the songs to this code as time passes.
What is the tag this link for?
Also i was hoping to be able to get
the .js file that this script is linking too.I would hate to set all of my pages up and the website close and the script no longer work.
I think the odds of del.icio.us going down are slim, fwiw.
I tracked this down and it seems that the file i would need is the http://images.del.icio.us/static/swf/playtagger.swf
Is this possible?
[…] Caddickisms - Making MP3s playable on a website, the easy way (the manual method) […]
[…] audio (mp3) - the little blue arrows aren’t part of the player, they’re from another player technology I have installed here: […]