1. We make it better!
OK, our previous example is interesting but doesn't look very nice. Here you see an example of a Player Page wich provides a
short text description and a 'cover' image for the current playing song.
2. Some Details
I don't explain every detail here. But some words to the object named 'Song': Look at JavaScript code to the array of 'Song'-objects. This Song-Object is defined by
ourselves. The properties are: song-URL, song name, image, description.
function Song(url, name, pic, text)
{
this.url = url;
this.name = name;
this.pic = pic;
this.text = text;
}
The function Song() initialized a new created Song-object with the given parameters. In object orientated languages this is
called a 'constructor'. Some lines later we create 3 Song-objects and store them into an array:
var songCount = 3
var songs = new Array(songCount);
songs[0] = new Song("song1.bmx", "Song 1", "cover1.gif", "This is song 1 of of the Buzz player demonstration webpage");
songs[1] = new Song("song2.bmx", "Song 2", "cover2.gif", "This another Song.");
songs[2] = new Song("song3.bmx", "Song 3", 0, "Winner of the Greatest Hits Award");
Now we can access our 3 song by an index. Because of the Song objects all informations for this song (URL, image, text, name)
forms to a unit. We can get the URL of the first song by accessing the url property:
songs[0].url
Or we want to get the info-text for the 2nd song:
songs[1].text
Some JavaScript code is used to fill the song list. If a song is clicked the PlaySong() function additionally writes the text information
into a block element called 'Text' and generates HTML code for the image and writes it into the 'Cover' element. These elements are
positioned via style sheets.
The complete HTML page
Test the page
The page is not listed here. Please download it. You can click on 'Test' for see the working example. But all 3 songs are
the same ;)
Changes when using for own songs
If you want to use it for your own songs you only have to change the parameters at the Song-object creation (url, name, ...).
If you wanna add some more songs you must set the variable 'songCount' to the new value and add the code for creating the
objects for the additional songs.
var songCount = 40
var songs = new Array(songCount);
songs[0] = new Song("song1.bmx", "Song 1", "cover1.gif", "This is song 1 of of the Buzz player demonstration webpage");
...
songs[39] = new Song("last_stand.bmw", "The last standing", 0, "The last standing. My last creation");