Automatically Convert MP3 links to Audio Players

Yahoo have a nice little snippet of Javascript that will convert all MP3 (and some other) links on your web page into functional flash MP3 players. I’ve sourced some JavaScript code from Google Pages that will do precisely the same thing… but instead of rendering a large player on your screen, it takes the minimalistic approach and simply creates a play/stop button to the left hand side of an active MP3 link.

About a week ago I sent out an email to the mailing list with an enhanced version of what I’m describing below… giving users the option of player, a download link and so on. If you’re interested in the enhanced code, please let me know.

To clarify the functionality described above, the html text of:

The <a href="file-1.mp3">quick</a> brown fox <a href="file-2.mp3">jumped</a> over the <a href="file-3.mp3">lazy</a> dog.

… will be converted into:

This code will work with MP3 links created using either the visual or ‘rich’ editor in WordPress (or most other platforms). Since the JavaScript parses all MP3 links it’s best to only use this script if you’re not already using a dedicated player.

You have two options to get this cool functionality to work.

  1. One single line of JavaScript (with Internoetics serving code)
  2. Integrating the code into your own website or WordPress blog

By far, the easiest method of implementing this MP3 player-converter into your basic (non WP) site is with this single line of JavaScript code in the head of your HTML page:


That’s it! All your MP3 files will now be converted into a functional audio player.

If you’re using WordPress you will have to include the JavaScript file in the head of your document by using following code. Copy it into your theme’s functions.php file.

function link_player_head() {
	echo "<script type=\"text/javascript\" src=\"http://www.internoetics.com.com/audio-players/link/player.js\"></script>\n";
}
add_action('wp_head','link_player_head');

Internoetics will serve the JS file and images. When users hit play there will be a tiny little icon linking back to this post. The downloaded package includes no branding. If you’re going to use the packaged code on your WordPress site you will have to edit the player.js file so that all URL’s point to your own server.

I personally wouldn’t use this for anything other than small files… and only if you don’t use audio files often. After all, it only renders a play and stop button. If you use lots of audio, you’re probably best using a more robust/customizable/scalable audio solution.

First Name:
Your Email Address:
 




Download: MP3 Link Converter
Description: Covert MP3 audio links into a flash player
Author:Marty (Google code)
Category: PHP code
Date: January 6, 2011



If you liked this article, you may also like:

  1. WordPress Audio Player and Shortcode
  2. Flash MP3 Players and WordPress
  3. HTML5 Audio and Video
  4. Create a WordPress Author Bio with Custom Social Links
  5. Convert Currency on your Website or in a WordPress Post (with Shortcode)
About Marty

is a passionate web developer from Sydney, Australia. He owns about 600 websites and makes a healthy living from working the web. As a day job, he works as a pilot for an international airline. Follow Marty on Twitter or Google+.

Comments

  1. Robert Gaimari says:

    Hi, Thanks for this post. It fits my needs perfectly. I did have one question, if you don’t mind. Is there a way to change the stop button back into the play button once the mp3 file stops playing? I’ve done some googling, and it seems that it’s pretty straightforward if you have access to the internals of the Flash file. Without that, do you know of a way to determine if the mp3 has finished? Or, I guess the same question is how do you tell if mp3.swf has stopped?

    - Bob

Please leave a comment or question!

*