logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Autism Spectrum Disorders: 4:00 PM

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

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">
Play</a>
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.

<noembed>
<bgsound src="http://www.yourwebsite.com/song.mid"
loop="infinite">
</noembed>

<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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor