| |
Next-Day Delivery Available! |
|
Copywriting Article : Adding Background Music in HTML
Note: Background music on a website can be very complimentary to the site owner, however, visitors that access your site may find the audio addition annoying and immediately back out of the site. Therefore, the decision to add music to your website should not be taken lightly.
Music or Not, it's Still Just a File
Those who may be intimidated by the fact that they are uploading and providing music on a website can take comfort in the fact that the music file itself is not special. If you have ever inserted an image to a website, music will be a piece of cake - a bit larger piece of cake, but simple nevertheless. And the size of your music file does matter as it determines your site visitor's page loading time. Midi (.mid) files are generally smaller and load faster than mp3 (.mp3) and wave (.wav) files. Once you have determined which file you are going to work with, you're ready to begin!
- Locate and upload the music file to your server
The first step in the process is to put the music file (.midi, mp3, wav, etc) where your other website files are located (on your server). For this tutorial, we will assume we uploaded the file "my_favorite_song.mid". Depending on your hosting solution, there are several ways to do this. Most use some form of FTP (file transfer protocol), an application such as Dreamweaver or Frontpage, or a control panel as provided by your web host. Regardless of the file upload method you use, having the music file available online is required. You may also choose to link the music on your site from another website, but this is unprofessional, unreliable and otherwise highly discouraged.
- Modify the HTML to Allow the Music to Play
Once the file is uploaded, you must modify the HTML of the page. To do this, you must open the file that you want to play the music on. Depending on your target audience, you may decide to allow your site visitors to select when the music plays, as opposed to allowing it to play automatically. Providing a link to start the music not only prevents you from annoying unsuspecting site visitors, but it also allows you to add variety to the song options you provide. What you choose is based solely on your target audience. Since each audience differs, we have provided steps to each method.
Playing Music Automatically When Page Loads
To play music automatically when a web page loads, we use the 'embed' tag. For example, to embed our music file "my_favorite_song.mid", we would simply insert:
<embed src="my_favorite_song.mid" autostart="true" loop="false">
in the <HEAD> section of the HTML page. Keep in mind that you would change the "my_favorite_song.mid" part to be your actual music file's name. The autostart option tells the browser to automatically play the song, and the loop option determines whether (true) or not (false) the song should be repeated.
This above example assumes that you have saved the music file in the exact same location as the web page it will appear on. To be absolutely sure that the music file is loaded, you may want to insert the full location of the music file in the <embed> code. For example,
<embed src="http://www.yoursite.com/my_favorite_song.mid" autostart="true" loop="false">
Using Links to Provide Music on Your Site
To play a music file when clicked, you simply need to add a link to the music file as you would link to any other object on your sever (webpage, image, etc). For example, to link to our music file "my_favorite_song.mid", simply insert:
<a href="my_favorite_music.mid">Click here and listen to my favorite song</a>
wherever the link to click should appear on the web page.
- Cautiously Use Other Options
There are two additional options to the <embed> tag - hidden and those to change the size of the media player.
Hidden
The hidden option tells the browser whether or not to hide the music player and its controls. Setting hidden="true" prevents your visitors from stopping and starting the music from playing. A general rule of thumb is to not use the "hidden" option at all, and instead allow the default (hidden="false") to prevail. For example,
<embed src="my_favorite_song.mid" autostart="true" loop="false" hidden="true">
does not allow visitor to turn off music.
Changing the Size of the Media Player
cChanging the size of the media player that shows on your visitor's screen can be done using the "width" and "height" tags. For example, to change the height to 200 pixels and the width to 350 pixels, we would use the following:
<embed src="http://www.yoursite.com/my_favorite_song.mid" autostart="true" loop="false" height="200" width="350">
A general rule of thumb is to avoid changing the size of the media player as changes can distort the final view.
Once you have your music uploaded and HTML modified, your music will be available for your site visitors to enjoy.
|
