(Updated for Delicious's change of location for their Playtagger images.)
Here's a very basic step by step guide for beginners to blogging, in response to the questions by Athen and others on my post on Delicious's Playtagger:
How to set up your blog to use Delicious's Playtagger
1. In your blog template or web page, just before it says "</head>" (e.g. in the line before that bit), insert the following code, which you can copy and paste, then publish or republish your template:If you use Blogger/Blogspot, from your dashboard after you login click the name of the blog then Template, and look for the "</head>" line in the big box, paste the code below just above that line, click Save Template Changes then Republish.
<script type="text/javascript" src="http://del.icio.us/js/playtagger"></script>So your template would now read, in the relevant section:
<script type="text/javascript" src="http://del.icio.us/js/playtagger"></script>1a. Icon alignment (Added 6 February 2006 and edited on 21 and 22 February 2006) Is the Playtagger icon not aligned properly? (It may appear to be a bit higher than the line the MP3 link is on, as in this example post). If so, it's probably to do with the CSS code for images in your blog template (padding, borders etc). To fix that, there are two options (the second of which I'll cover below). (Ideally if Delicious were to give their icon a class to reference it by, that would be the best solution as you wouldn't need the second step, but until they do so, this seems the best way.)
</head>
First way: insert this extra code into your template in the line just before the "</style>" line in your blog template:
.mp3 img {
margin:0;
padding:0;
vertical-align:baseline;
border:0;
}
1b. (Added 21 February 2006). Alternatively, or in addition to 1a if you've already implemented 1a, do these two things to line up the icon properly even for MP3 links in your old posts:
First, copy and paste the following into the head section of your template or web page, between the <head> and </head> lines e.g. just before the </head> bit:
<style>
img.mp3 {
margin:0;
padding:0;
vertical-align:baseline;
border:0;
}
</style>
Second, in your head section, just before the </head> line, copy and paste the following Magical Sheep modified Javascript code (yes, it's long, but it's just copy and paste) INSTEAD OF the one line of code in step 1 above (i.e. you should delete the code mentioned in step 1 if you'd previously inserted it)
either
this code (example post using this method) (updated 7 May 2006):
<script type="text/javascript" src="http://improbulus.googlepages.com/playtagger_magicalsheepmod.js"></script>or
this code (here's an example post):
<script type="text/javascript">The first 1b method just involves adding one line rather than a whole bunch of code - it's the same code as the full code above, but instead of your having to paste the whole thing into your template, you can effectively just link to the script which is located externally using just one line of code (I uploaded the script to a free file hosting provider). But note that if the external host goes down or is slow, that will affect your page and MP3s and it might not work at all. The second 1b method above (putting the whole long code into your template) eliminates dependence on the file host, but your template is a bit longer.... it's your choice.
if(typeof(Delicious) == 'undefined') Delicious = {}
Delicious.Mp3 = {
playimg: null,
player: null,
go: function() {
var all = document.getElementsByTagName('a')
for (var i = 0, o; o = all[i]; i++) {
if(o.href.match(/\.mp3$/i)) {
var img = document.createElement('img')
img.src = 'http://static.delicious.com/img/play.gif'; img.title = 'listen'
img.height = img.width = 12
img.style.marginRight = '0.5em'
img.className = 'mp3';
img.style.cursor = 'pointer'
img.onclick = Delicious.Mp3.makeToggle(img, o.href )
o.parentNode.insertBefore(img, o)
}}},
toggle: function(img, url) {
if (Delicious.Mp3.playimg == img) Delicious.Mp3.destroy()
else {
if (Delicious.Mp3.playimg ) Delicious.Mp3.destroy()
var a = img.nextSibling, c=''
if (document.defaultView && document.defaultView.getComputedStyle) c = document.defaultView.getComputedStyle(a,null).getPropertyValue('color')
else if (a.currentStyle) c = a.currentStyle['color']
c = c.replace(/^rgb|[ ()]/g, '')
var hex = c.match(/^#?([a-f0-9]{6})$/), hexSm = c.match(/^#?([a-f0-9]{3})$/), rgb = c.match (/^([0-9]+),([0-9]+),([0-9]+)$/)
if (rgb) { var c16 = "0123456789abcdef", c=''; for(var i=1,d;d=rgb[i];i++) { var j=d%16; c=c+c16.charAt((d-j)/16)+c16.charAt(j) } }
else if (hex) c = hex[1]
else if (hexSm) c = hexSm[1].charAt(0) + hexSm[1].charAt(0) + hexSm[1].charAt(1) + hexSm[1].charAt(1) + hexSm[1].charAt(2) + hexSm[1].charAt(2)
else c = "000000"
img.src = 'http://static.delicious.com/img/stop.gif'; Delicious.Mp3.playimg = img;
Delicious.Mp3.player = document.createElement('span')
Delicious.Mp3.player.innerHTML = '<object style="vertical-align:bottom;margin-right:0.2em" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"' +
'codebase=" http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0 <http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0> "' +
'width="100" height="14" id="player" align="middle">' +
'<param name="wmode" value="transparent" />' +
'<param name="allowScriptAccess" value="sameDomain" />' +
'<param name="flashVars" value="theLink='+url+'&fontColor='+c+'" />' +
'<param name="movie" value="http://del.icio.us/static/swf/playtagger.swf" /><param name="quality" value="high" />' +
'<embed style="vertical-align:bottom;margin-right:0.2em" src="http://del.icio.us/static/swf/playtagger.swf" flashVars="theLink='+url+'&fontColor='+c+'"'+
'quality="high" wmode="transparent" width="100" height="14" name="player"' +
'align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash"' +
' pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>'
img.parentNode.insertBefore(Delicious.Mp3.player , img.nextSibling)
}},
destroy: function() {
Delicious.Mp3.playimg.src = 'http://static.delicious.com/img/play.gif'; Delicious.Mp3.playimg = null
Delicious.Mp3.player.removeChild(Delicious.Mp3.player.firstChild); Delicious.Mp3.player.parentNode.removeChild(Delicious.Mp3.player); Delicious.Mp3.player = null
},
makeToggle: function(img, url) { return function(){ Delicious.Mp3.toggle(img, url) }} }
Delicious.addLoadEvent = function(f) { var old = window.onload
if (typeof old != 'function') window.onload = f
else { window.onload = function() { old(); f() }} }
Delicious.addLoadEvent(Delicious.Mp3.go)
</script>
1b at first sight seems a bit more cumbersome than 1a, but in fact it saves manually adding those spans to new MP3 links (see 4a below) and also fixes the alignment of old links, so it's a better solution than 1a and 4a, I think - unless of course Delicious go and change their original Javascript or the way Playtagger works! In which case, just to warn you, 1b may stop working, so in some ways 1a and 4a may be safer.
1c. Changing the Playtagger icons. If you don't like the look of the Play and Stop icons provided by Delicious, you can use your own icons. First, make your icons - one for Play and one for Stop - and upload them somewhere, e.g. your Blogger photo/pics space. Make sure you note down the URL of each one. Then insert in your template the long version of the code given at 1b above, but now you need to edit the two bits I've put in red. In that code, delete http://static.delicious.com/img/play.gif and insert in its place the URL of the icon for the Play control that you uploaded earlier. But make sure you do NOT delete the quote marks ', leave them well alone. Then, delete http://static.delicious.com/img/stop.gif and insert instead the URL of the icon you want to use for the Stop control. Save your template and republish, and that's it.
How to play MP3 files on your blog post or webpage
2. Is the MP3 file already on the Web? If yes, note down or copy its URL i.e. Web address - e.g. for Cory Doctorow's Copyfighters London August 2005 speeches the URL for the first speech ishttp://www.archive.org/download/Copyfighters_London_23_August_2005_Speakers_Corner__Cory_Doctorow/cory.mp3- and go to step 4. If no, go to step 3.
3. The MP3 you want to play must already be on the Web and the Delicious script needs to know the permanent URL of the MP3. If your ISP lets you use your free webspace to store MP3s, you can upload your file there. If not, find a hosting provider which allows it. I personally use Ourmedia.org (which promises "free storage and free bandwidth for your videos, audio files, photos, text or software. Forever. No catches." ). For those who want to use Ourmedia (and it's not the easiest in the world due to a trap I'll tell you about), I have written a separate post on how to store the MP3s and other media files you've created on Ourmedia. So, note down the URL of the MP3 from wherever you've uploaded it.
Keep it legal, folks! Hosting providers almost always (if they don't ban MP3 hosting outright) only allow LEGAL MP3s - e.g. of your own music that you've written/recorded, speeches that you've made/recorded, and the like. Not only that, but if you upload illegal MP3s you may get into trouble. Heck, even if you just link to illegal content, you may get done. Yes, I know the law hasn't kept up with progress in technology and changes in society, but it's still the law, so best not risk it in my view. If you include a playable link on your blog or webpage to an MP3 that you know is illegal, that's pretty blatant (and not the smartest thing to do on a blog that's clearly yours), and it would be easy for the powers that be to track you down and fine you or worse. Also, if you've recorded someone else speaking or singing etc, it's best get their permission before you make the recording available to the world and her husband on the Net.
4. To add an MP3 file to make it playable on your blog or web page, once you've added the Delicious Playtagger script to your template or webpage as per step 1 and noted the URL of the MP3 as per step 2, all you have to do in your blog post or webpage is to put in a link to the MP3 file, just like you insert a link to a webpage. For example Cory Doctorow's London Copyfighters kickoff speech on 21 August 2005 is at
http://www.archive.org/download/Copyfighters_London_23_August_2005_Speakers_Corner__Cory_Doctorow/cory.mp3(if you want to see some pics and hear the other speeches from that day they're here). So all I do is insert this on my blog post:
<a href="http://www.archive.org/download/Copyfighters_London_23_August_2005_Speakers_Corner__Cory_Doctorow/cory.mp3">Cory's speech</a>and I will get this playable link displayed:
Cory's speech
In Blogger you can get the same result by typing the link text (e.g. "Cory's speech"), highlighting it, pressing Ctrl-shift-a or clicking the link button, and entering or pasting the URL into the box popup box)
To download the MP3 file or play it in your regular MP3 player rather than via Playtagger, just rightclick the link text ("Cory's speech", in the above example) and Save or leftclick it rather than use the right arrow icon. That's it!
4a. [Added 6 February 2006:] If the Playtagger icon isn't aligned properly, as mentioned in 1a above, to fix it one method is as per 1b above. Then, whenever you include an MP3 link in your blog posts, you need to insert <span class="mp3"> just before the link (NB it's case-sensitive so it has to be lowercase "mp3" if you've inserted the code in 1a), and </span> just after it. So the code for your link would look something like this (though the span bit won't display):
<span class="mp3"><a href="http://www.example.com/yourmp3.mp3">Name of MP3</a></span>
You have to remember to do that for every MP3 link, including in your old posts, or the alignment of the Playtagger icon for that link won't be changed - it's not enough just to insert the code in 1a, you have to wrap your MP3 links in those span tags too.
[Added 21 February 2006:] Alternatively, if you prefer, try first adding the extra code to your template as set out in 1a. Then you don't have to add the span tags to anything and the icons will be neatly aligned even for old posts. But just to repeat, 1b may seem a bit more cumbersome, having to add longer code, but it saves having to manually add those spans to new MP3 links and also fixes the alignment of old links, so it's the better solution I think - unless of course Delicious go and change their original Javascript or the way Playtagger works! In which case, just to warn you, 1b may stop working, so 1a and 4a may be safer in some ways.
Thanks to CSS Caesar Kirk (yet again) for both solutions.
5. Want to attach the MP3 link to an image? This will make the Del.icio.us play icon
show just before or just above the picture. To do this, you can just "bookend" the usual image link <img src="imageurl" /> between the MP3 link tags in the usual way, like this (I've put in bold the bits you'd add in, and "linktoMP3file.mp3" is obviously the URL of your MP3 file):<a href="linktoMP3file.mp3"><img src="imageurl" /></a>If you use Blogger and have uploaded your pics to Blogspot via Blogger, it looks trickier, but it's not. The code for the photo or pic is going to look something like this:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/2472/807/1600/Image%2833%29.0.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/2472/807/320/Image%2833%29.0.jpg" border="0" alt="" /></a>Just stick the <a href="linktoMP3file.mp3"> before that code (or before the image, in Compose view), and the </a> bit just after that code (or just after the pic, in Compose view), and it'll work just the same.You don't even need to have text or an image between the "<a href=etc>" links to the MP3 file, the Del.icio.us Playtagger icon will still appear where you've inserted the link - if you really want to make people guess what on earth the audio file is! A title or description etc. of the file is kinder...
Podcasts
If you use Playtagger and have a Feedburner feed where you've turned on Smartcast, to answer Anon's question, it still works for podcasting, the script won't break it. Try my feed http://feeds.feedburner.com/ConsumingExperience and you'll see.What next?
I am rather hoping that the nice folk at Delicious will twiddle with Playtagger so that it can play Ogg as well as MP3 files, and maybe even video files too. Wouldn't that be great? Give us an inch and...Technorati Tags: Delicious, del.icio.us, social bookmarks, Playtagger, Play tagger, tagging, music, audio, MP3, MP3s, play MP3s, blog, blogs, blogging, blogging tools, blog tools, howto, introduction, guide, tutorial, beginners, Improbulus, A Consuming Experience, Consuming Experience
25 comments:
hmm, i really thought I knew what I was doing with this posting an mp3 on here... but nothing shows up... i don't know...
Great blog, some really helpful tips there that I could use! i'll be back
Thanks for your reply. Will give it a try later.
BTW, I managed to upload my files to ourmedia.org. The email add that I used is *******@hotmail.com
Thank you all for the comments. Hope it works for you, and hope to see you back here!
I'll post separately on the background music point as soon as I can.
Glad you found it useful Brink!
I'll be writing something on background music soon, hopefully within the next week or two, so watch this space...
Another fantastic article.
Nice tutorial, thanks!
I've implemented it, but it seems to be having troubles.. The image is a bit misplaced, and I want to remove the border somehow.. Any ideas..?
my site: http://total.eclipse.co.il
Thanks, John, Junkie and Shay!
Shay, yes I had that issue too initially. I'll amend my post to add something about the alignment of the image soon. Watch this space.
I've now updated the post with the fix for the Playtagger icon alignment issue.
Hi there.
Last night I read this post, and added the script to my site (www.rageAgainstTheRight.com). It worked fine for the better part of last night...
Today however, the play icon doesn't seem to show up - in fact my site looks as though i didn't add the code at all.
The weird part is - when I preview my page in blogger, it works just fine. The issue happens only when I go directly to my URL - even though the URL was totally fine last night.
Feel free to look at my code (as if you don't have better things to do, right?!). Any suggestions would be helpful!
Thanks
Jeremy, it's a complete mystery to me. Your code looks fine. At first I wondered if it didn't like the embed but you've also included a direct link. I copied your exact code into a test blog and it works there, see this. Not sure if it's your using frames but I don't see why that should make a difference.
First off, thanks for your reply. Isn't that bizzare? I don't get it at all.
As you can see I've tried embedding mp3's using windows media player as the interface rather than flash, and it SUCKS. It means all the mp3's load when the visitor hit's my site. I'm on a T1 at work, all 24 channels dedicated to internet, and I can't even load my entire page.
My question is - do you know of any other way to embed an mp3 where it loads ONLY when you click play? I.e. no preloading? Or better yet, can I ask you a few questions by email?
You know what - you might be on to something with the frames comment.
Yes I do use frames. In fact, I'm using your script on http://www.rageagainsttheright.com/mainframe.htm, rather than on the index itself (rageagainsttheright.com). Does that make sense? That might be why it loads in the blogger preview page.
In other words, the blogger file is simply the mainframe in the site, but the site itself contains frames - blogger is just a page within it. It's late in the day here, but am I making sense?
I figured it out...there was a line of code right before your code that was causing an error on page load...only in the frameset. Totally weird.
But, I figured it out and your script is outstanding. Thanks.
Odd that Jeremy but I'm glad you've got it sorted. It's not my script though, just my instructions - thank those lovely people at Delicious for providing us all with the script!
used this post to help format the icon on luxdivon. thanks!
my mp3 plays at a very high speed so it doesn't sound good. do you nkow how to play at the normal speed. it's bit rate is 80 kbps and audio is 16 hertz.
Sorry muffler, hard to say anything without a link to the post that links to the MP3, or the link to the MP3 itself - can you post it please?
I guess the only real drawback to the delicious playtagger is the fact that we must rely/depend on delicious. If delicious site goes down, so does ours. If delicious site is slow, so is ours. I hope one day someone will develop a totally open source version of this script and give it away so we can host it ourselves:( This script is still awesome though:)
Absolutely right G, I agree completely.
hi! nice article! but i have one problem!
i use 2 onload events in my body tag. so the delicious script doesnt work...
if i test without my body onload events it works?! i think i must seperated the window.load event from the delicious script to insert it in the onload event in the body tag? can you give me an advice? can you retry it? thx for the good user guide and regards from germany ;->
Sorry for the delay dan. I'm afraid I've no idea... Kirk's the Javascript expert!
Anyone know how to get this to work on a secure sever without generating security errors in the browser? I would appreciate any assistance
hi
thanks for the great code. it works!
however, it appears the urls for the play and stop buttons from delicious need to be updated to:
http://static.delicious.com/img/play.gif
http://static.delicious.com/img/stop.gif
thanks again
Post a Comment