Home | Audio | DIY | Guitar | iPods | Music | Brain/Problem Solving | Links| Site Map
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.
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.
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.
HEY, Who said it would be EASY?!? If you want easy, go back to the top and do it the easy 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.
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.
Home | Audio | DIY | Guitar | iPods | Music | Links | Site Map | Contact