Clicking an MP3 link is annoyingly unpredictable. Will it blank out the page you're viewing? Will it start to download to some hard-to-find folder? Will it boot you into a new window or throw an error message? You never know.
Several years ago, I got annoyed enough to write my own Web audio player to handle the MP3 examples in my articles. It uses JavaScript to intercept the visitor's click and pop up a playback window. Worked great on Macs, but unpredictably on PCs. So I piled on more code and got better results, though it's still a work in progress. Every new rev of Internet Explorer or Windows Media Player seems to break the code in wonderful new ways.
And what about the audio links on other people's sites? They were as unpredictable as ever. So inspired by the Del.icio.us Play Tagger bookmarklet, which inserts a tiny Flash playback button in front of every MP3 link on a page, I whipped up this one-click Web audio player. You simply drag this link — TinyPlayer — to your browser's bookmark toolbar and then click the resulting link on any page with audio links. (In addition to MP3s, it also handles AIFs and WAVs.) Assuming you have QuickTime installed and set to handle Internet audio, the bookmarklet will insert a QuickTime controller bar in front of each audio link on the page. That's right — it adds a playback position slider and a volume control, two things missing from Play Tagger.
Here's the code in the bookmarklet:
javascript:(function(){
var links=document.getElementsByTagName('a');
for (var i=0,o;o=links[i];i++){
if(o.href.match(/\.mp3$/i)||o.href.match(/\.wav$/i)||o.href.match(/\.aif$/i)){
var ply=document.createElement(%22embed%22);
ply.setAttribute(%22width%22,%22134%22);
ply.setAttribute(%22height%22,%2216%22);
ply.setAttribute(%22type%22,%22audio/mpeg%22);
ply.setAttribute(%22src%22,o.href);
ply.setAttribute(%22kioskmode%22,%22true%22);
ply.setAttribute(%22autoplay%22,%22false%22);
ply.style.marginRight='0.5em';
o.parentNode.insertBefore(ply,o)}}})()When you click the bookmarklet link, this function scans through the page looking for "a" (link) tags, assigning them to the array called "links." For each element "o" in the array whose name contains ".mp3," ".aif," or ".wav," the function then inserts an embed tag ("ply") whose source file is the audio link itself.
Try it with these links:
- MP3 (Source: "The eSession Experience: Online Recording for All")
- AIFF (Source: "Review: Olympus DS-2 Stereo Voice Recorder")
- WAV (Source: "Singing With Your Thumbs: How To Make User Interfaces Musical")
- WMA (Source: "Free Your Music: How to Convert Digital Audio Files")
Note that (assuming the TinyPlayer worked on your computer) the WMA file didn't get a controller bar, because the .wma extension is not listed in the function. Also notice that clicking the TinyPlayer bookmarklet again inserts another controller bar. Play Tagger has a destroy() function to prevent that, but I haven't implemented an equivalent version yet.
Also on my To Do list: making the bookmarklet initially insert a play button rather than embedding the audio file. On pages with a lot of links, the current method loads every audio file on the page into an embedded player, causing a big bandwidth hit for the host. And, of course, I need to move the whole embedding function to an external file so Internet Explorer doesn't throw its "Click to activate this control" hissy fit.
Please leave a comment below if you have more thoughts on improving the player.
Categories
Audio
Read More Entries by David Battino.
Become an O'Reilly Member
Visit the Digital Media Forums
Subscribe to the Digital Media Blog Feed
Subscribe to the Digital Media Newsletter
@Jason: Pretty cool! Looks like you do need Flash, though.
Or, you can do it without requiring the user to have an audio player installed:
http://jasonmillerdesign.com/Free_Stuff/Audio_Bookmarklet_Play_MP3s_From_Websites
David,
I have been looking at the TinyPlayer and the multiple download problem. The problem is that you cannot load the player without providing a source file, and when you provide a source it will be downloaded. I can see 4 solutions:
1. Modify the links and when a link is clicked the player is loaded.
2. Load the first audio file on the page in all players and modify the links so that when a link is clicked the player plays that file.
3. Load a short (eg. 1 sec silent MP3) file in all players and modify the links like in #2.
4. Insert an image of the player (or a play button as you suggest) initially and when the image is clicked the actual player is loaded.
You may want to force Quicktime as the WMP takes up too much room. With your current bookmarklet I currently get WMP in IE7 and QT in Firefox and Google Chrome.
I have working scripts for #1 and 2. Email me if you want a copy. #3 and 4 requires that you host the audio file/picture somewhere.
David,
The Flip4mac extensions are for Macs only. I am on a PC. So, you may wonder why my browsers play media files in Quicktime. I was wondering about that too and made a small investigation. When you install Quicktime on a PC it hijacks the settings for certain filetypes. By reclaiming the filetypes in WMP all these filetypes will open in an external WMP player as long as you use Internet Explorer. But Firefox and Google Chrome still open 3 of the 4 filetypes on your page (except WMA) in Quicktime, and I have not yet figured out if there is a way to change that. Can anyone help?
Like you I am annoyed with the different behavior of different browsers and I have now produced a bookmarklet that opens all 4 audio filetypes the same way in all of the 3 browsers I have tested. It does so by passing the audio file URL to a page with an embedded WMP player. So, to use it you need to have a website or a place that can host this page.
There are several advantages to this approach. You can use the embedded player you prefer and with the settings you prefer, and you avoid the multiple download problem. When you click the bookmarklet the audio file links on the page change color and nothing starts downloading or playing until you click one of the links.
The script:
<a href="javascript:(function(){var links=document.getElementsByTagName('a');
for(var i=0,o;o=links[i];i++){if(o.href.match(/\.mp3$/i)||o.href.match(/\.wma$/i)
||o.href.match(/\.aif$/i)||o.href.match(/\.wav$/i))
{o.href='Your webpage url here?src='+o.href;o.target='_blank';
o.style.color='#FFFFFF';o.style.backgroundColor='#FF0000';o.onclick=function(){
this.style.backgroundColor='#666666'};}}})()"><Audio files</a>
This bookmarklet works as a charm. If anyone is interested I can provide the code for an embedded WMP player.
@Carl:
Quicktime won't play WMA.
Right. You need to install the Flip4Mac QuickTime extensions.
I'll expand your code here:
<a href="javascript:(function(){
var links=document.getElementsByTagName('a');
for (var i=0,o;o=links[i]; i++){
if(o.href.match(/\.mp3$/i)||
o.href.match(/\.wma$/i)){
var url='mms'+o.href.substr(4,o.href.length);
var p=o;p.setAttribute('href',url);
o.parentNode.replaceChild(p,o)}}})()">
Play External</a>.
David,
Sorry that I didn't read your blog thoroughly enough. Adding WMA in the script doesn't work in any of the browsers, however, as Quicktime won't play WMA.
I made a bookmarklet that will force MP3 and WMA files to play in an external Windows Media Player. This may be attractive to some. I will try to add the bookmarklet here:
Play External.
Although WMP can play AIF and WAV files I cannot make it work with this script which simply replaces http with mms.
@Carl: Thanks for checking this out.
the WMA file...does not work.
Right. I left it out to demonstrate how the link-rewriting works, and because Mac users may not have Flip4Mac installed, which they'd need to play WMA files. If you do want to add WMA playback, just add
||o.href.match(/\.wma$/i)to the if statement.When there are many audio links on a page it is a problem.
Yes, I mentioned that in my To Do list at the end of the article. That's a pretty easy fix, and I have it partially working already; stay tuned. You may want to check out Yahoo Media Player as well.
David, This works great in Firefox 3, IE7, and Google Chrome, except for the WMA file. It does not work in any of them. When there are many audio links on a page it is a problem that the tinyplayers start downloading the songs immediately. This means that you may have to wait for a long time until the TinyPlayer appears at the song that you really wanted to play. This problem does not exist in PlayTagger that does not start downloading a song until you click the play button. Could you modify TinyPlayer to work the same way?
Thanks.
@Tim:
Is there any way to get word on any updates?
The easiest way would be to subscribe to my RSS feed, which lists all my articles, podcasts, and blogs.
David, this is excellent! Thanks so much. Is there any way to get word on any updates so I don't miss any new additions? Feel free to email me. Thanks again!