Technical notes index
Embedding an MP3 file into a web page

CREATING A POP-UP MP3 PLAYER

My page about embedding an MP3 player in a web page shows how to include a player within a web page (without producing an annoying dialog box in Windows), and you may find it helpful to read it before reading this page. Please note that the QuickTime player does not work in the latest browsers on Macs, and possibly elsewhere, and use of the HTML5 player (as detailed in that page) is expected.

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 constrained 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 when you use the QuickTime method: HTML5 sets itself automatically and can't be customised.

Here is the code for the player page using the recommended HTML5 method:
_____________________________________________________________

_____________________________________________________________

However if you want to use the older QuickTime Player method, then 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 using the QuickTime player:

_____________________________________________________________

_________________________________________________________________


In  both versions 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). In the QuickTime version 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 shows the URL of the file, and in the case of the QuickTime version 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. You cannot specify the width or height with the HTML5 player, which will appear differently on different browsers.

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.

Note that in Safari on an iPad the link will open the player as an entirely new page (since it can't handle two pages open at once), and will zoom it out to fill the width of the screen (so if you have used an image such as a record label it may be enlarged with a consequent effect on quality). The 'close' button will return to the previous page.