Add Background Music to a Web Page

January 2nd, 2010

There are special occasions that people like to add some background music to web pages. Today, I had such an assignment. The requirements include:

  • Short music, ~15 seconds in length
  • Auto start
  • No player or button is to be displayed on the page

Client provided me with MP3 files to work with. After some search and I found a very information page with a number of MP3 player options: http://www.bitrepository.com/free-flash-mp3-players.html.

I first tried Flam Player and quickly realized it was an overkill. It uses MySql database to store authors and tracks information which is totally irrelevant for my use. The code looks overwhelming too. So I gave up on that and tried NiftyPlayer. Bingo! Just what I needed. There is an example.html in the downloaded package and very clear instructions. It took less than an hourĀ  to integrate the player to the client website on Word Press and set up corresponding music for three pages.

  • Setting auto start is just one parameter in the Object tag.
  • Hiding from web page is done by wrapping inside a div then put it out using negative margin.
  • Matching different music to different page is done by a switch statement in wp-content/page.php. I tried to put code in WordPress but somehow the & in the object parameter is always being encoded. So I had to move the whole object tag out to page.php.

Thanks NiftyPlayer!

Please add your comment