Embedding Music to a Web Page

This work is licensed under a Creative Commons License.

Embedding Music to a Web Page

There are several ways to add a bit of music to your Web page. The esiest way is to load a mp3 player and play the sound independently of the Web page. Instructions on how to do this are below. The best, and most professional, way of doing this in Dreamweaver is to add a player to the page. Instructions on how to do this are immediately below.

Embed a sound file in Dreamweaver as per Dreamweaver Help

Embedding audio incorporates the sound directly into the page, but the sound only plays if visitors to your site have the appropriate plug‑in for the chosen sound file. Embed files if you want to use the sound as background music, or if you want to control the volume, the way the player looks on the page, or the beginning and ending points of the sound file.

When incorporating sound files in your web pages, carefully consider their appropriate use in your web site, and how visitors to your site use these media resources. Always provide a control to either enable or disable the playing of the sound, in the event that visitors don’t want to listen to the audio content.

In Design view, place the insertion point where you want to embed the file and do one of the following:
- In the Common category of the Insert bar, click the Media button and select the Plugin icon from the pop-up menu.
- Select Insert > Media > Plugin.
In the Property inspector, click the folder icon next to the Link text box to browse for the audio file, or type the file’s path and name in the Link text box.
Enter the width and height by entering the values in the appropriate text boxes or by resizing the plug‑in placeholder in the Document window.

These values determine the size at which the audio controls are displayed in the browser.

Delivering Music via Flash

The 12 Steps to a custom Flash Music player:

1. Write a song.
2. Record it in GarageBand.
3. Convert it to MP3 in iTunes.
4. Post it to your site.
5. Create custom graphic in Fireworks.
6. Copy, paste into Flash Professional.
7. Drag Media Controller component onto stage, reference MP3 location.
8. Free transform it to fit in the custom graphic.
9. Publish SWF locally.
10. Insert > Flash in Dreamweaver. Preview directly in Design View by clicking Play.
11. Finish Design, Publish HTML and SWF.
12. Enjoy! Spread the word. Over 90% of the Web browsers in the world will be able to hear your tune.

Other Ways to Add Music to a Web Page

Kent University Library

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:
Just get a music file, like a .wav, .mp3, etc. and add it to your site,
then create a link (text or image) directly to the sound file on your site.
Upload the page with the link and the sound file to the server.
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.

Top