Skip Navigation
*To search for student contact information, login to FlashLine and choose "My Campus" tab.

Search by campus:

HOW DO I? Add Music to a Web Page

First, a bit of background information

Internet Explorer and Netscape use two different methods to play music that is "embedded" into a web page. What does embedded mean? It generally mean that the music will play without having to open another program, like windows media player, to play the sound.

The problem is that Dreamweaver or Frontpage use either one or the other when embedding music so they won't work in both browsers.... Can you guess which one creates music that plays only in Internet Explorer? Hint: Think Microsoft products.

Luckily, there is a way to create a web page with embedded music that recognizes which browser someone is using then loads the correct script to play it. More on that later though.

HOW TO DO IT FOR BOTH BROWSERS

THE EASY WAY - ALMOST NEVER FAILS!!! :

First, you should consider by far the easiest way to play music on a web page....just create a link directly to a music file you've place on your server. As with ANY media on ANY computer, the user would need the appropriate player installed on their system to play the file, but that generally isn't a problem and this method usually goes without a hitch.

Here's how to do it:

  1. Just get a music file, like a .wav, .mp3, etc. and add it to your site,
  2. then create a link (text or image) directly to the sound file on your site.
  3. Upload the page with the link and the sound file to the server.
  4. When you click on the link (in your browser), a media player will open in another window, windows media player for example, and play your sound file.

THE JAVASCRIPT WAY:

Another way is to actually "embed" the music into the webpage so that it plays when the page is loaded. As described above, the problem is that IE and Netscape don't work exactly the same way when it comes to embedding music. IE actually recognizes an html code for embedding background music but Netscape requires a little more complicated means of playing music. The method I've chosen to show you here works in both IE and Netscape. As mentioned before, it uses Javascript to recognize what kind of browser is being used then runs the appropriate script to play the music.

If you're using IE, then the music just plays automatically and you never see a player. You can set the music to play over and over again, or loop, but that can get annoying after awhile.... keep that in mind!

Unfortunately Netscape isn't as straight forward, even with the java script we've provided.

If your using Netscape then an external player opens up which can be used to control the music. Interestingly, the Netscape version of this Javascript code uses the quicktime player plug-in to play the file. Unfortunately, you may have to download the Quicktime Player if it wasn't installed with your Netscape browser. You should be prompted within your browser if you need to download the quicktime plug-in. If you do, you'll need to set the "mime types" to include "audio" so it will recognize the audio file within the browser and launch the quicktime player....

HEY, Who said it would be EASY?!? If you want easy, go back to the top and do it the easy way.  

HOW TO DO IT THE JAVASCRIPT WAY:

Just copy and paste the block of text script below into the body of your webpage. Be aware that where you paste it will determine where the little player appears on your web page when using Netscape. If your into html, you can do this in a text editor or if you don't like messing with html code (I don't) paste it into the code view of Dreamweaver or if your using Netscape Composer, paste it into the HTML source view between the <body> and </body> tags... Don't paste it into the design view in Dreamweaver or the Normal Edit Mode view in Netscape Composer though since it will just show up as text on your webpage.

Below is the Javascript to copy (don't copy this line):

<script language="JavaScript">
if (navigator.appName == "Netscape") {document.write('<EMBED SRC="yoursoundfile.mid" AUTOSTART=TRUE LOOP=FALSE WIDTH=145 HEIGHT=55 ALIGN="CENTER">') }
else { if (navigator.appName == "Microsoft Internet Explorer") document.write('<BGSOUND SRC="yoursoundfile.mid" LOOP="FALSE">') }
//--></script>

Customizing the script:

  • Change the yoursound file.mid to the name of your sound file (midi, wav, mp3 or whatever)
  • If you would like it to Loop, Change LOOP=TRUE (for Netscape) and LOOP="2" (or however many loops you would like, for IE, the -1 loops it forever, entering FALSE will play it only once)
  • If you would like it wait for a click (in Netscape using the player) to start then change AUTOSTART=TRUE. In IE, it automatically starts by default since it is a background sound or BGSOUND.

THAT'S IT! GOOD LUCK and GOOD LISTENING!!!

-->