CREATING A POP-UP MP3 PLAYER

My page about embedding an MP3 player in a web page shows how to do this (without producing an annoying dialog box in Windows), and you may find it helpful to read it before reading this page.

The disadvantage of embedding a player in a page is that the file will start to load each time you open or refresh the page: and if you have a number of them it will make the page consume considerable bandwidth for audio you may not actually want to play.

A better solution is to create a link which opens a small pop-up window containing a player (this won't be blocked by pop-up blockers as technically it's not actually a pop-up but just a new window with a contrained size).

Click here for an example of such a player. This opens a page to a pre-determined size, which contains the embedded player and also a 'close window' button and an optional picture. Click here for an example of a page using this technique rather than embedding (it opens in a new window: close it to return here) - click one of the 'Play' buttons to see the player in action.

This is the code which opens the player:


The width and height specify the size of the new window in pixels, and obviously you should amend these to suit the size of the player and the picture. Note that there should be no line breaks in the code.

Now you need to create the player page. When opened by itself this will be a full-sized page (click here to see the player page above in full size), and will have the close button, an image if you use one, and the player centered. The width of the player should be set to the same as the width of the picture, and its height to 16.

Before proceeding you need to install the javascript file as detailed in the 'embedding' page: you can download the file here, and you can place it anywhere on your server and make a note of its URL.

Now here is the code for your player page:

_____________________________________________________________

_________________________________________________________________

The sections you need to change are marked in red. The title will appear at the top of the browser page (make sure it's not too long as the window will be relatively small). The URL of the 'qtobject.js' file depends on where you placed it. The 'img style' tag should show the width and height of the actual image you have chosen, and obviously the URL its URL You can omit this line if you don't want an image. The body background is set to white here, but obviously you can change it to taste, or use an image in the usual way.

The MP3 file section, in brackets following 'new QTobject', shows the URL of the file, a name (which can be  anything as it doesn't display), and the width and height. The width should be the same as that of the image if you have one, otherwise whatever you choose; the height is best left at 16.

Copy this amended code into a plain text document and save as an html file (if you are using TextEdit make sure it ends .html and not .html.txt); upload it to your server.

In your main web page,  enter the code as I quoted above, between <p> or <center> tags:



The width and height need to be set to a little wider than the image or the player in the player page, and the height sufficient to include the 'close' button, the image and the player.

Now instead of an embedded player in your web page you have a link (which could also of course be an image such as a button) which will open a new smaller window with the player, which will start playing automatically. Safari will not show the address bar, but FireFox will.