g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Autism Spectrum Disorders
Mental Health
Blogs / Social Networking
Kidney Disease
Today in History

All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g HTML Site

BellaOnline's HTML Editor


Website Music - Anchor, Bgsound and Embed Tags

Guest Author - Diane Cipollo

In the first part of this tutorial we discussed the different types of audio files used most often on webpages. In this part of the tutorial we will discuss methods of adding music to your HTML webpages. So let's take a look at how to code the HTML. You can use the HTML anchor tag method or the bgsound and embed tags method.

The first method is to use the HTML anchor tag (link). This is a user-friendly method because it offers the web visitor a choice to view your webpage with or without music. The visitor can view your webpage faster because he does not need to wait for the audio file to download with the webpage itself. The audio file is only downloaded if he chooses to hear the song and clicks on the link which will open the web browser's audio player as a pop-up window. Let's say you want to put a midi file on your webpage and the name of the midi audio file is "song.mid". Also you want to use the anchor tag method. The code for the link would look like the code below. The href attribute tells the browser where to look for the audio file. The value of the href attribute will be the url address of the audio file. You can use the complete url as in the example below or you can remove the "www.yourwebsite.com/" if the audio file is in the same place as the webpage. (Click here for a review of the HTML anchor tag.)

<a href="http://www.yourwebsite.com/song.mid">
Note--The arrow indicates that the code is wrapped to a second line and should really be all on one line.

The second method will make the audio file play automatically when the webpage displays. You will use the bgsound tag and/or the embed tag for this method. Here is the code.

<bgsound src="http://www.yourwebsite.com/song.mid"

<embed src="http://www.yourwebsite.com/song.mid"
autostart="true" hidden="false" width="300"
height="45" loop="infinite">
Note--The arrow indicates that the code is wrapped to a second line and should really be all on one line.

srcsource attribute - value is the url address of audio file
autostarttrue or false (embed tag)
looptrue, false, or number of times the song is to be played (embed tag)
infinite or number of times the song is to be played (bgsound tag)
width and height measurements of audio control panel on webpage (embed tag)
hiddentrue or false - controls the visibility of the control panel (embed tag)

The embed and bgsound elements have several attributes that control the way the song is played and how the audio control panel is displayed on the webpage.

  1. The src attribute works the same way as it does in most other HTML tags. It tells the browser where to find the audio file.
  2. The autostart can be turned on or off by setting the value of this attribute to true or false. When turned on, autostart will cause the music to play as soon as the file has been downloaded. (embed tag)
  3. The loop attribute tells the browser how many times to play the file.

If you want to use the embed tag, it is a nice effect to hide the control panel of the audio player. You can do this by setting the value of the hidden attribute to true. On the other hand, you can control the appearance of the control panel on the webpage with the height and width attributes. If the height, width and hidden attributes are not specified, then the control panel will appear on the webpage by default. Although the hidden feature is nice, you might want to leave the control panel visible so the listener can have control over the audio playback (such as the volume).

Most browsers can "read" the embed tag. However some browsers, especially the older ones, cannot. This is why you use the noembed tag. This tag tells the browser to follow the instructions between the opening <noembed> tag and the closing </noembed> tags only if the browser cannot read the embed tag itself. The bgsound tag works in the same way as the embed tag does. However, the bgsound tag does not have the height, width or hidden attributes.

This site needs an editor - click to learn more!

Add Website+Music+%2D+Anchor%2C+Bgsound+and+Embed+Tags to Twitter Add Website+Music+%2D+Anchor%2C+Bgsound+and+Embed+Tags to Facebook Add Website+Music+%2D+Anchor%2C+Bgsound+and+Embed+Tags to MySpace Add Website+Music+%2D+Anchor%2C+Bgsound+and+Embed+Tags to Del.icio.us Digg Website+Music+%2D+Anchor%2C+Bgsound+and+Embed+Tags Add Website+Music+%2D+Anchor%2C+Bgsound+and+Embed+Tags to Yahoo My Web Add Website+Music+%2D+Anchor%2C+Bgsound+and+Embed+Tags to Google Bookmarks Add Website+Music+%2D+Anchor%2C+Bgsound+and+Embed+Tags to Stumbleupon Add Website+Music+%2D+Anchor%2C+Bgsound+and+Embed+Tags to Reddit

RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the HTML Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2015 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor