jump to navigation

Embedding Audio Players August 29, 2009

Posted by flutebrarian in Web Design.
Tags: , ,
add a comment

These days, I have a bit more time on my hands for experimenting with new web tools thanks to the State of Ohio. One of my long standing web site projects is Benjamusic.com a site for a conductor/composer friend of mine, Eric Benjamin, who has written some incredible works for orchestra, chorus, and other ensembles.

We want to make this a showplace for his works so that, hopefully, he will be able to sell or rent some of his compositions. Although I think the overall concept of the site is easy to navigate and use, it’s been two years and time for some new stuff.

We have a number of mp3 files of his compositions so the potential buyer can listen to them first. I had been using plain text links to the files, which then opened an mp3 audio player in a blank window. Useful, but the user lost touch with the description of the piece and had to use the back navigation button to return to the catalog.

I knew that it was possible to embed a player onto the page next to the description, but the HTML descriptions I had found for “object” were less than useful. After browsing several google results for “embed mp3 player” I came upon the solution.

There was an Audio Player WordPress Plugin from 1pixelout that seemed to be just what I wanted. www.1pixelout.net/code/audio-player-wordpress-plugin

A tutorial for the installation of this player on a non-Wordpress, or regular HTML website was also available. www.macloo.com/examples/audio_player

So it does take more than just the “object” element to make this thing work but fortunately, someone else had already written the javascript and created the shockwave flash file – two things at which I couldn’t even begin to figure out at this point.

Now on to changing the links to all the audio files on the site…