One of my current clients recently commissioned me to write a feature for their site that allows visitors to listen to snippets of MP3 tracks that they sell directly from within the product’s “detail” page. In my particular situation, one of the requirements was to use the design commissioned by a separate design firm. In doing some research I found a few different open source methods of accomplishing this. The one that turned out to be the best fit for our situation was an Adobe Flash-based application called NiftyPlayer.

NiftyPlayer is a free, open source Flash file that you can embed into your page and play MP3 files without worrying about what audio player is installed on the visitor’s machine. The best part for my situation is that the player is completely controllable through Javascript. That means that I could completely “hide” the UI provided by the Flash file by setting the height and width of the Flash object to zero and use custom javascript methods to craft my page to do exactly what I wanted it to do.

Having a Javascript API to the Flash player object means that you can simply added the following code toplay a track:

<a href="#"
  onClick="niftyPlayer('previewPlayer').loadAndPlay('fileName.mp3')">
      Play
</a>

NiftyPlayer also provides a way to register different types of events and pass a reference to a custom block of Javascript code to be run with that event fires. For example, you can register the “onPlay” event to change the source of an image on the page when a track starts playing and then register the “onStop” and/or “onSongOver” event to change it back when the track is either stopped manually or runs to completion.

Having this ability to completely hide the UI of the Flash object and control it with Javascript code was key for us as it allowed us to use NiftyPlayer in a design that had been created by an outside design firm without having to dive into the .fla file and update the colors, fonts etc originally used by the author. Using the Javascript API, I was able to control the source of an image (play and stop images) as well as update the CSS class of the div containing the currently playing track while it was playing and reset it back to its previous state when the user pressed the stop button or when the track finished playing.

Because of Flash’s near-ubiquitous install base, NiftyPlayer is a great option to easily add MP3 playback capability to your web application and know that it’ll “just work”.

4 thoughts on “Free and easy way to play MP3 files in your web pages

  1. Brian FitzGerald

    Great post man, thanks! I have been using the WordPress Audio Player found here: http://wpaudioplayer.com/ as of late, but I was just lamenting this weekend over how you can’t control it via javascript (which was really shooting me in the foot). The player you posted looks like an awesome solution for me and I appreciate you spreading the word!

    Cheers,
    Brian

  2. @Brian Glad I could help. This particular one is really light and very focused on being easy-to-use. I’ve been impressed with how well it works and have added it to my stable of tools that I keep around to use on a regular basis. Enjoy!

  3. Paul Lloyd

    I ould really like to use this player too, and I can get it to work fine as is.

    Unfortunately the code used won’t validate to W3C xml transitional (the markup I am using).

    I have used javascript (UFO) to dynamically load the player and autoplay a song but the javascript call function for controlling the player return an error:

    “Object doesn’t support this property or method”

    I have set to allow script access, the javascript works fine when the player is on the page, but not when dynamically embedded.

    Any ideas?

    Thanks, Paul

  4. @Paul – I actually usually use SWFObject to load all my Flash assets into an HTML page. I’ve found that using SWFObject eliminates some issues with IE. You might give it a try and see if it validates for you.

    Thanks for the comment!

Leave a Reply

Your email address will not be published. Required fields are marked *

*