See More About:

Background Audio

3. Head Script

Join the Discussion

Questions? Comments?

More of this Feature

Introduction Sample Body Script

The background audio script comes in two parts. The first part is a fixed script that you need to add to the head section of your page. To get this you first need to select the code from the text box below (there is a highlight all button beneath it to make this easier) and then copy it into a file called soundh.js.

// Background Audio Script
// copyright Stephen Chapman, 10th Jan 2005
// you may copy this script but please keep the copyright notice as well
var aDOM = 0, ieDOM = 0, nsDOM = 0;var stdDOM = document.getElementById;if (stdDOM) aDOM = 1; else {ieDOM = document.all;if (ieDOM) aDOM = 1; else {var nsDOM = ((navigator.appName.indexOf('Netscape') != -1) && (parseInt(navigator.appVersion) ==4));if (nsDOM) aDOM = 1;}}function xDOM(objectId, withStyle) {var st = ''; if (withStyle) st = '.style';if (stdDOM) return (eval('document.getElementById(objectId)'+st));if (ieDOM) return (eval('document.all[objectId]'+st));if (nsDOM) return (document.layers[objectId]);}
var lastnum = 0;function showSong(num) {if (num < 0) num = songNamesz - 1;if (num >= songNamesz) num = 0;var obj = xDOM('music',0);obj.innerHTML = songName[num];lastnum = num;}function playSong(num) {location = '' + songFile[num];}function displaySong() {songNamesz = songName.length;if (!nsDOM) {document.write('<form action=#" method="post"><table width="250" style="margin:5px; border:solid #000000 1px;" border="0"><tr><td align="center"><b>Background Audio Selector<\/b><br \/> <br \/><a href="#" onclick="playSong(lastnum);return false;"><span id="music">'+songName[0]+'<\/span><\/a><br \/><input type="button" value=" << " onclick="showSong(lastnum-1);return false;" \/> <input type="button" value=" >> " onclick="showSong(lastnum+1);return false;" \/><br \/><font size="2">Select a piece of music using the << and >> buttons and then click on it\'s name to play it.<\/font><\/td><\/tr><\/table><\/form>');} else {document.write('<table width="250" border="1"><tr><td align="center"><b>Background Audio Selector<\/b><br \/> <br \/>'); for (var i=0;i<songNamesz;i++) {document.write('<a href="'+songFile[i]+'">'+songName[i]+'<\/a><br \/>');}document.write('<\/td><\/tr><\/table>');}}

You next link this into the head of your page using the following code:

Now all that remains is to create the body script that will add your music files and their titles into the selector.

Introduction | Sample Page | Head Script | Body Script

Stephen Chapman
JavaScript Guide

Sign up for my Newsletter

About.com Special Features

Holiday Central

What to eat, where to go, fun things to do and how to save money on the perfect gifts. More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

JavaScript