Buzz Player on web pages

Building web pages with the Buzz Player Plugin
A page with some features	What we do now Some basics The Elements on the Buzz player page The Plugin The Song list The PlaySong() Fx Complete HTML page	Back to TOC

1. What we do now

Now we're going to build a nice player with some advanced features. We want to have a list of songs and the plugin should play the song if the user selects one.
We need some JavaScript and CSS for this. We try to keep our page working with IE and Netscape too (though I recommend IExplorer).

2. Basics

Our Buzz player page uses cascading style sheets (CSS). So here are some some words to this. If you already know CSS skip this chapter!

Style sheets

CSS tags are in the HEAD of a HTML page. Here is an example:

<html>
<head>
<style>
  h1 {
    font-size: 10pt;
    color: rgb(0, 0, 200);
  }
</style>
</head>
...
</html>

Now all <H1> captions will appear in blue with a font size of 10.

Positioned elements

You can use style sheets to set the position of HTML elements on the page.

<html>
<head>
<style>
#MyTextBox{
  position: absolute;
  left: 100;
  top: 100;
  width: 300;
}
</style>
</head>
...

Now you can use the defined name 'MyTextBox' for a <DIV> tag:

...
<body>
<div ID = "MyTextBox">
 Waaah. Lots of text here!
</div>
...

You will see your Text positioned at 100, 100.

3. The Elements on the Buzz player page

Here are all important elements which we are using for our page. Every part is described. You can find a complete listing of the HTML page at the end.

Plugin area

Of course we need a room for our plugin. We're using 'positioned elements' for defining the position of the plugin.
The style sheet code will look like this:

#Plugin{
  position: absolute;
  left: 20;
  top: 40;
  width: 200;
}

In the body of the HTML page we define the block element:

<div ID = "Plugin">
</div>

We leave the content blank at first. Later we add the plugin code (the wellknown embed tag) by some JavaScript code. Yes, you read right: we fill the content of our defined "Plugin" element dynamically by JavaScript.

Song list

Our songlist is also positioned by a block element. Here the CSS code:

#PlayList{
  position: absolute;
  left: 300;
  top: 40;
  width: 300;
}

In the HTML code we put some links in the list.

<div ID = "PlayList">
  <a href = "javascript:PlaySong('song1.bmx')">Song 1</a><br>
  <a href = "javascript:PlaySong('song2.bmx')">Song 2</a><br>
  <a href = "javascript:PlaySong('song3.bmx')">Song 3</a><br>
</div>

Like you can see the links are not referring to a HTML page. Instead they're executing JavaScript code. Of course you must replace the song names (song1.bmx,...) by the names of your own songs.

The PlaySong() function

Now we write the PlaySong() function which is called by the links above. The function will dynamically create some lines of HTML and put it into the block element "Plugin". You remember: it's the element we have defined at first.

<script>
function PlaySong(name)
{
  var text =
  "<embed src = \"" + name + "\" type = \"audio/x-bmx\" " +
  "backcolor = \"200, 200, 200\" " +
  "scrollspeed = 0 " +
  "infocolor = \"0, 140, 200\" " +
  "width = 200 height = 80" +
  ">";
  if (document.all)
  {
    // Internet explorer
    document.all.Plugin.innerHTML = text;
  }
  else
  {
    // Netscape
    document.Plugin.document.write(text);
    document.Plugin.document.close();
  }
}
</script>

Unfortunately we must write some different code for Internet Explorer and Netscape. We can detect the Internet Explorer by asking for the property 'all' in the 'document' object. It exists only for IExplorer.
You see that we put the text for the <embed> tag into a variable called 'text'. The given parameter 'name' is inserted into the text. Then (depending on the browser type) we write this text into our self defined block element 'Plugin'. This will cause the browser to render the block element anew (and of course to load the plugin).

The complete HTML page

Download the page


<head>
<STYLE type = "text/css">
<!--
#Plugin{
  position: absolute;
  left: 20;
  top: 60;
  width: 200;
}

#PlayList{
  position: absolute;
  left: 300;
  top: 60;
  width: 300;
}
-->
</style>
</head>

<body>

<script>
function PlaySong(name)
{
  var text =
  "<embed src = \"" + name + "\" type = \"audio/x-bmx\" " +
  "backcolor = \"200, 200, 200\" " +
  "scrollspeed = 0 " +
  "infocolor = \"0, 140, 200\" " +
  "width = 200 height = 80" +
  ">";
  if (document.all)
  {
    // Internet explorer
    document.all.Plugin.innerHTML = text;
  }
  else
  {
    // Netscape
    document.Plugin.document.write(text);
    document.Plugin.document.close();
  }
}
</script>

<h3>Buzz Player page</h3>

<div ID = "Plugin">
</div>


<div ID = "PlayList">
  <b>Songlist</b><br>
  <a href = "javascript:PlaySong('song1.bmx')">Song 1</a><br>
  <a href = "javascript:PlaySong('song2.bmx')">Song 2</a><br>
  <a href = "javascript:PlaySong('song3.bmx')">Song 3</a><br>
</div>
</body>
</html>

A page with some features