Embedding Music (Sound) on Your Pages
I. There are many ways to embed music on a web page
Embedded music usually means music that plays when a web page loads. This is a cute feature that can add to the presentation of page, but it can also create problems, frustrate visitors, and reduce your web traffic. Before moving-on let's list the ways you can present music to a visitor.
Your visitor opens your web page and...
1. Embedded music starts automatically, without controls to start/stop the music
2. Embedded music starts automatically, but there are included controls to start/stop the music
3. Embedded music does not start automatically but there are included controls to start/stop music
4. There is no embedded music but s/he sees an anchor tag that can be clicked to download the music
All of these methods have pros and cons, but let's look at legal and technical issues first.
II. Consider the legal issues before you play music on your web page
Do I have permission from the author to copy their song on my page?
Many independent artists like their music to be embedded on as many pages as possible (since it builds their fame), but they may want you to link directly to the original song on their server as opposed to making a copy. In addition, they may want you to give them credit and provide a link back to their page. Other artists do not want their songs embedded or linked and would consider doing so a copyright violation.
III. Consider the technical issues before you play music on your web page
Normally embedded music forces your visitor to download the music file. This is because embedded music downloads with the page, even before the user clicks on it. That might be OK if your music file is small or your visitor has a fast connection. If not, you risk turning away visitors because your page loads too slow. If you must include a large music file then embed it towards the bottom of your page. This will cause the rest of the page to load first. However this is another option, an M3U or RAM playlist.
Playlists embed and stream music. Because of this streaming capability m3u and RAM playlists are by far the preferred method. I'll talk about how to create playlists later.
Finally, before embedding music consider the simple solution. Use an anchor tag. An anchor tag does not start the download until the user clicks it. Windows PCs will give the user an option to either download or play the file. Below is an example. Simply change HREF to the URL (web address) of your music file. Change My Music Sample to the name of your music file.
|
<a HREF="musicsample.mp3">My MusicSample</a>
|
IV. Pros and cons of embedding music.
Before beginning ask yourself these questions:
What am I trying to accomplish with my music?
Does the music relate something important about me or my web page?
Does the music increase the value of my page?
What if my visitors have their own music playing when they arrive?
Would visitors be more or less likely to return to my page if I am playing music?
If I use option 1, would users feel like I am forcing my music on them?
Would a simple anchor tag accomplish my purpose?
What is going to be the cost to the user in terms of page download?
V. What to embed
If you don't know what format or level of quality to embed then visitthis page.
VI. How to embed music
As noted earlier, there are many ways to present embedded music.
1. Embedded music that starts automatically, without including controls to start/stop the music - Insert the following code into the HTML of your web page. Change SRC= "musicsample.mp3" to the URL (web address) of your music clip.
|
| |
|
<BGSOUND SRC="/Portals/0/musicsample.mp3">
|
|
| |
|
2. Embedded music that starts automatically, and includes controls to start/stop the music - Insert the following code into the HTML of your web page. Change SRC= "musicsample.mp3" to the URL (web address) of your music clip. Change the HEIGHT and WIDTH to specify how large in pixels you want the player to be. Set AUTOSTART to "TRUE".
|
| |
|
<EMBED SRC="/Portals/0/musicsample.mp3" WIDTH="300" HEIGHT="45" AUTOSTART="TRUE"></EMBED>
|
|
| |
|
3. Embedded music that does not start automatically, but includes controls to start/stop the music - This is the same as above but AUTOSTART is set to "FALSE".
|
| |
|
<EMBED SRC="/Portals/0/musicsample.mp3" WIDTH="300" HEIGHT="45" AUTOSTART="FALSE"></EMBED>
|
|
| |
| 4. Embedded music that loops (repeats) - To do this, set LOOP to the number repeats you desire. LOOP="infinite" plays forever. |
| |
|
<EMBED SRC="/Portals/0/musicsample.mp3" WIDTH="300" HEIGHT="45" AUTOSTART="FALSE" LOOP="3"></EMBED>
|
|
| |
| 5. Embedded music using a playlist to allow streaming - In this example I am going to embed a large song (4 mb) in .wma format using a .w3u playlist. This is the preferred method anytime you have files larger than 128 kb. |
| |
5a. Create a text file using Notepad, Wordpad, or some text editor on your computer.
5b. Open the file and type the URLs of the music files you want to play in the order you want them played. Yes, you can include more than one file. For example: |
| |
| MusicPlayList.M3U |
|
http://www.vanguard.edu/uploadedFiles/Webmaster/MusicSample_KimCanedy_UnequaledOne.wma
http://www.vanguard.edu/uploadedFiles/Webmaster/MusicSample_TreBurnham_TheBestThing.mp3
|
|
| |
| 5c. Save the file as .m3u. In other words, a normal text file has a three character extension of .txt. You need to change that extension to .m3u. |
| 5d. Load your m3u file onto the server. |
| 5e. Embed your m3u file as in the example below. Replace SRC with the URL (web address) of your m3u playlist. (In this example note the addition of TYPE="audio/mpeg". This is required for FireFox browsers. |
| |
|
<EMBED SRC="/Portals/0/musicplaylist.m3u" WIDTH="300" HEIGHT="45" AUTOSTART="FALSE" TYPE="audio/mpeg"></EMBED>
|
|
| |
| Finally a note on RAM files. These are RealAudio playlists. They work the same as m3u playlists except they contain RealAudio files. Create and open a text file. Enter the URLs to your RealAudio music files. Save the text file with a .RAM extension. Load it to your server. Embed the .RAM using the code below. Replace SRC with the URL of your RAM playlist. Voila. |
| |
| MusicPlaylist.RAM |
|
http://www.vanguard.edu/uploadedFiles/Webmaster/MusicSample_KimCanedy_UnequaledOne.wma
http://www.vanguard.edu/uploadedFiles/Webmaster/MusicSample_TreBurnham_TheBestThing.mp3
|
|
| |
|
<EMBED SRC="/Portals/0/musicplaylist.ram" WIDTH="300" HEIGHT="45" AUTOSTART="FALSE" TYPE="audio/mpeg"></EMBED>
|
|
| |
| Examples: Here are two examples demonstrating the concepts. These include cleanly displayed credit to the artist. The first one is a simple embedded mp3. The second is an embedded M3U playlist using a wmv music file (windows media format). |
|
|