JCL's Tutorial On Random Sound And Music Files

Please Note : If you do not hear music in the background, you are not using a high enough browser. You need Netscape 3.0 or higher.

Introduction

Random sounds & music files are becoming increasingly popular. In this JavaScript code, I programmed it to play the X-Files Theme Song, Children, or the Macarena. To prove that the code will select one of the three songs randomly, reload the page until you receive a different song. Then, click here to get the code. After you have completed that task, click here to read my tutorial on background music & sounds if you haven't done so already and do not know how to make background music and/or sounds for your page.

Modifying The Script To Your Liking

First, get rid of the quotation marks that surround #ofsounds and then change #ofsounds to the number of sounds you want the computer to select from. Next, change the sound1, sound2, and sound3 in the quotation marks to the addresses of the sounds you want the computer to play. Lastly, get rid of the var sound3 = "sound3" command if you want the computer to select from only two sound/music files and add a command exactly like the var sound3 = "sound3" (changing the 3 outside of the quotation marks to the whole number after the previous var command's sound number and changing the sound3 in quotation marks to a sound/music file address) for each sound/music file you want to add (Remember to leave a space between each var command and put a semicolon at the end of each of the var commands).

Breaking Down The Code

<script language = "JavaScript">

All this does is tells the computer the language that is going to be used. This must be included to make the page control or any other JavaScript work.

<!-- Begin hiding here --

Since some browsers can't read JavaScript, they just read over the JavaScript code as text and show it to the user as text. This fragment of code begins the commenting out of this text if their browser cannot read JavaScript.

/******************************************************************************************
This script is created and ©1997 by Jason Schanker (jcheetah@orion.webspan.net).
This script comes from "http://www.webspan.net/~herbs/jcheetah/web_design/javascript/random".
You may copy this source freely if these comments remain in the script.
******************************************************************************************/

These are a bunch of comments which must be left in here if you use this script. The /*,anything after it and before */ are comments. When the computer gets to this part, it skips over it.

function get_sound_file(n)
{

The function get_sound_file(n) part tells the computer that the function, get_sound_file() is going to be defined. It also tells the computer that the variable "n" should be defined by the parentheses' text in the command that called the function. If you called the function by typing in "get_sound_file()", n would be considered an undefined variable. The { marks the point where the defining of the function will start.

    var x = Math.random();

This command tells the computer that the variable, x is equal to the function, Math.random()'s returning value. The Math.random() is a function which returns a random number between 0 and 1.

    var a = n;

This command tells the computer that the variable, a, is equivalent to the variable, n.

    var sound1 = "sound1";
    var sound2 = "sound2";
    var sound3 = "sound3";

These commands give a string (series of characters) value for the variables, sound1, sound2, and sound3. In the code I used for this page, sound1's string was a link to the X - Files Theme Song, sound2's string was a link to Children, and sound3's string was a link to the Macarena (all on my account - not on someone else's).

    while(x <= (n-1)/a)
    {
      n --;
    }

The while(x <= (n-1)/a) command tells the computer to do the command(s) surrounded by the { and } while x is less than or equal to (n -1) divided by a. The n -- tells the computer that n = n - 1.

    n = eval("sound" + n);

This command tells the computer that n equals the returning value of eval("sound" + n). The eval function returns the value/string value of the text in its parentheses. In this code, the function returns the string value for sound1, sound2, or sound3. This is because when you put the string, "sound", and the variable, n (which equals 1, 2, or 3) together, you would receive sound1 (sound + 1), sound2 (sound + 2), or sound3 (sound + 3).

    The document.write's

The document.write function is used for HTML commands, ouputting text, and some JavaScript commands. The HTML code tells the computer to play "n" and show the centered music control panel. Because of the eval function, N can be a link to the X-Files Theme Song, Children, or the Macarena depending on the random number. The reason I separated each HTML command into different document.write's is because it's better style. For a complete tutorial on JavaScript Style, please click here.

}

The } ends the defining of the function.

// -- End hiding here -->

This ends the commenting out for browsers unable to read JavaScript.

</script>

This command tells the computer that the end of the JavaScript source has been reached. If you do not include this in your document source, the rest of your HTML document will be considered as JavaScript and the computer will not be able to comprehend the rest of the document. If you did leave this command out, there will be many JavaScript Error Alerts even if you do not have any commands after it because leaving out </script> messes up the code and any HTML commands after it are considered JavaScript.

get_sound_file("#ofsounds");

This command activates the function, get_sound_file(). It also passes the string value, "#ofsounds" to n. If you keep it like that, the script will not work so please change #of sounds to the number of sound/music files you want to use and remove the quotation marks surrounding the number. Also, please place everything starting from the second <script language = "JavaScript"> and ending with the second </script> in the place where you want the music control panel to be.

How This Random Sound/Music File Script Works

The script first calls the function, get_sound_file() and passes a value to n (The function then dictates the rest of the script). The script will then pick a random number between 0 and 1 and makes x equal to that random number. After that, the script then gives the value of an address of a sound file to each of the sound variables and gives the value of n to a. The script then creates a while loop to determine the value of n. The random number determines the value of n since n decreases until the while loop is false and the while loop isn't false until x is greter than (n-1) divided by a. This equation basically gives an equal chance for each possibile number for n. For example, if you used three sounds like me, n would equal 3 and "a" would too so the while statement would start out by finding out if x is greater than 2/3rds (*(3-1)/3*). If the random number (x) is greater than 2/3rds, the while statement would be false and n would not go under any change so n would still be 3. If x is less than or equal to 2/3rds, the while statement would be true so it would do the command in the brackets which says n is equal to n - 1 so n would become 2. The while statement would then make the computer go back to the while statement to see if it is true now. If x is less than or equal to 1/3rd (*(2-1)/3*), it still is so it would do the while loop again causing n to be 1. The while loop would then have to be false since x has to be greater than 0 (Math.random() returns a number between 0 and 1) and 0/3rds equals 0 (*(1-1)/3). If x isn't less than or equal to 1/3, the while loop becomes false when n equals 2. In this case, if the random number (x) is greater than 2/3rds (2/3 < x < 1), n would equal 3. If x is less than or equal to 2/3rds, but greater than 1/3rd (1/3 < x <= 2/3), n would be 2. If x is less than or equal to 1/3rd (0 < x <= 1/3), n would be 1, so there is approximately if not 1/3rd of a chance for each of the 3 values of n. Try it with any number of sounds, there should be an approximately equal if not equal chance for each of the possible numbers for n. The script then tells the computer that n is equal to the eval function's returning value of "sound" and n. The computer then evaluates "sound" and the value received for n to receive the new value of n. When put together, a defined variable (one of the sound variables) will be the variable the eval function will evaluate. N will then take on the value of a string that links to a sound file. The document.write's then tell the computer to show a music control panel and make the value of n, music. Since n is the address of a sound/music file, a sound/music file is played and since the numbers have an almost is not equal chance of being played.

JCL's HTML & JavaScript Tutorial
E-Mail Me