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”.