[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.)
[tags]website MP3 player, javascript tricks and tips, WordPress tips, del.icio.us tools, play tagger, Grey Eye Glances[/tags]
Related posts:
- Odeo podcasting Well, I’m working on podcasting technology for work, so I...
- Podcasting for corporate training example – how I did it I mentioned in a previous post that I was experimenting...
- Adding Technorati Tags to posts SimpleTags – A WordPress Plugin for Technorati Tags Found a...
- Hi-tech escape from Tower of London Hi-tech escape from Tower of London | Reuters.com This is...
- Stop everything There is a lot going on in the world these...
Loading ...
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
Reply to this comment
Hi 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.
Reply to this comment
[...] 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.
Reply to this comment
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.
Reply to this comment
Thanks, Al. That’s very weird. I know I added the source code exactly as it states in my post, but now that I go back and look at it, it was somehow rewritten in the widget. I’ve seen WordPress do that to me in posts, but didn’t think it was doing that in the widgets. Thanks for pointing it out!
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>Reply to this comment
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.
Reply to this comment
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.
Reply to this comment
xsmoke: not sure what you mean by tag. This is a script provided by del.icio.us. You could probably download the script by going to the .js file directly, though I imagine it calls some other stuff on their server. Never looked, though.
I think the odds of del.icio.us going down are slim, fwiw.
Reply to this comment
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?
Reply to this comment
Yep. That’s possible.
Reply to this comment
[...] 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: [...]
commenting usually isnt my thing, but ive spent an hour on the site, so thanks for the info
Reply to this comment