How to: Painlessly add music to your blog

Published on 11/30/2005 in Blogging, Hacks, Media, Productivity and Web 2.0. View Comments Tags: .

The typical problem
If you’re a blogger or podcaster interested in posting audio to your blog on an ad-hoc basis, the easiest way would be to add an mp3 link to your post. Trouble is, your blog readers would click on the mp3 link and depending on their system setup, it would either playback on a new web page with the Quicktime audio player plugin, or download for playback on an external media player. To me, this workflow is horrible. Instead, playback should as elegant as “click and play” on the same page.

The hardcore solution
XSPF
I’ve look at simpler solutions for bloggers wanting instant audio playback. Noticing popular music blogs like Aurgasm.us using a Flash-based player for audio playback, I was lead to this elegant web app which comes in three sizes (love the smallest one). The XSPF Web Music Player (see above) plays MP3s right on your web page. Is this ideal for all bloggers? Not really. It seems more ideal for hardcore music bloggers since the XSPF Web Music Player uses xspf playlist format to play mp3 songs. XSPF is the XML Shareable Playlist Format. The software is written in Actionscript 2. Ultimately, this means spending more time getting the music posted, even though it has plenty of functionality.

The most painless solution
I found the recent release of Play Tagger (from del.icio.us) to be a delight. Here’s why: Play Tagger allows you to easily play mp3 files directly on your website or blog. Simply add a tiny javascript to your HTML file, and your mp3 links will automatically become playable right on the page! You heard me right… add a line of code and all your mp3 links automatically becomes an audio playback button!! This script is extremely lightweight, as is the flash app that plays on demand. It also integrates with del.icio.us since your visitors will have the opportunity to easily tag and post the mp3 link to del.icio.us.

To install: Copy the code below and place it in anywhere in your HTML
<script type=”text/javascript” src=”http://del.icio.us/js/playtagger”></script>

Live Demo
I am now able to present to you the first of an irregular series of musical selections. Just hit the play button. Today I’m featuring Nina Gordon’s interpretation of Straight Outta Compton (originally by NWA). She sings the sweetest swear words I’ve ever heard.





  • ellie
    how do i get the MP3 link?
    i've added a link but nothing seems t be working...
    maybe i've taken the wrong link..
    i would really appreaciate it if you could let me know how can i get the MP3 link in my comp..
    please and thank you
  • Karin: Most users have Quicktime installed, so just linking to an mp3 file on your blog will allow for that player console to appear when users click on an MP3 link. For a neater solution, you should really try play tagger as I mentioned in this post. One small code addition in your HTML and a flash player appears whenever you link to an MP3 file. It's very neat and you can try it on my blog. :)
  • Karin
    Thanks Kevin. Its not too complicated so far.. i think i get what you mean. Do you also know the appropriate html code to use if i want to play a particular mp3 on my webpage using the quicktime player console? Sorry to be asking questions one after the next. I'm trying to start a music blog but am too new to html. :)
  • Hello Karin. Del.icio.us is a bookmarking site, not a file storage site so you can't upload mp3s there. What you'd want to do is to upload the mp3s to your own web host or even onto the Internet Archive (if it's not copyrighted material), then grab the URL to the mp3 and add it to del.icio.us. As long as you can get the URL address of the mp3 file, play tagger will play it back for you. I hope that helps, sorry if it sounds complicated. :P
  • Karin
    Hi, i'm new to html. Would like to find out how do i even upload my mp3s onto my favourites in the del.icio.us website? Thks!
  • straydog
    Thanks. I just a blog post on it to complement your post.

    http://blog.wificat.com/?p=91
  • Straydog: Good find! Asysound looks like a nice alternative player for WordPress users.
  • If you are running wordpress, asysound is probably better (plugin), so even less work required then play tagger.

    http://darthbender.com/2005/08/13/flash-filter-plus/
  • Ryan: It looks like you're running WordPress 1.5.1.3, which means your template consists of multiple files. I put mine before the end of the head tag, but it should work anywhere in the html. Since it didn't work in the header file, try it with the page template itself. Finally, the link has to be directly to the mp3 file itself. Let me know how it goes...
  • Kevin,

    I copied the code into the header file on my blog, but I don't see the arrow button on the mp3 files I link to (from past posts). Is there anything else I need to do?
blog comments powered by Disqus