PmWiki | Cookbook / DeliciousPlaytagger

Summary: Embed mp3's with the Delicious.com playtagger

Version: 28-Nov-2008

Prerequisites: none

Status:

Maintainer:

Categories: Media, Audio

Questions answered by this recipe

How can I embed mp3's on a webpage using the Delicious.com playtagger?

Description

The Delicious.com playtagger is a very simple way to embed mp3's into a webpage so that they're instantly playable.

For an explanation and example, visit the Delicious.com playtagger page (formerly Del.icio.us). In a nutshell, the following code is a line of javascript which embeds a flash-mp3-player from Delicious.com.

It's as simple as this - in config.php, add the following line:

     ## DELICIOUS PLAYTAGGER
     $HTMLHeaderFmt['playtagger'] = '<script type="text/javascript" src="http://static.delicious.com/js/playtagger.js"></script>';

(this adds the script to the <head> of every page.)

After adding this code, any link to an mp3 will automatically appear with a blue-play-button preceding it. Any of the following bits of code will be transformed:

     http://mysite.com/recordings/recording.mp3  (an mp3 from an external site)
     Attach:recording.mp3  (an mp3 uploaded to your group)
     [[Attach:recording.mp3 | link to my mp3]]  (again, but with text link)

Notes

The playtagger code above is great, but it doesn't [yet] allow the use of custom play/stop button icons. While surfing the web, however, I located some reverse-engineered delicious playtagger javascript code by Improbulus (http://www.consumingexperience.com/2005/11/playing-mp3s-on-your-blog-beginners.html(approve links)) which indeed allows one to substitute one's own buttons. To do this:

place playtagger.modified.php Δ in your cookbook
create a folder in your pub directory called deliciousPlaytagger, and place in it the play and stop images you wish to use. As an example, I'm including here a zipped folder (deliciousPlaytagger.zip Δ) with example button-images, plus the Adobe Illustrator file used to create the two buttons. Note that the size of the image doesn't matter - it just needs to be square in dimensions, but the playtagger will then resize it to the correct size.
add the following code to your config.php:

$playtaggerImg_play = "$PubDirUrl/deliciousPlaytagger/playtagger_play.gif";

$playtaggerImg_stop = "$PubDirUrl/deliciousPlaytagger/playtagger_stop.gif";

include_once("$FarmD/cookbook/playtagger.modified.php");

* if you haven't already defined $PubDirUrl, it should be the path to your /pub directory, i.e.:

$PubDirUrl = 'http://mysite.com/pmwiki/pub';

overtones99 September 29, 2009, at 01:39 AM

Release Notes

28-Sept-2009 - added modified version of playtagger, that adds ability to change button images overtones99
28-Nov-2008 - Added to PmWiki Cookbook... overtones99

Contributors

overtones99

Comments

User notes ? : If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.

DeliciousPlaytagger