Putting Sound in PageBuilder
By Beth Candy
(July 30, 2000)
The Scrapbook is your File Manager. File Managers are used to store your sound, image or text files. Currently the only files you can upload to your Scrapbook are image files. We cannot upload sound files to our Scrapbooks.
Optimally, webmasters should always link to their own file managers (Scrapbooks). However, the only way to have sound play on your PageBuilder site is to link to a sound file on another server.
Here's a list of generous web sites that allow linking to their Files:
Kool Midi's For WebTV
Beth's Christmas Midi's
BGsound.com
Dodgerdawg's Dugout
Filamorgan
Linkable Midi
Dolphin Dream's Midis
Flashers Little Music Shop
Music for WebTV E-Mails
Midi Request
Request Line
Norbert's Linkable Midis
After we have found a generous web site that gives us permission to link to their sound files, we need to write the HTML code.
WebTVers Have Two Ways
WebTV users have two ways to put sound in their Page Builders. The first thing you need is the URL (address) of a sound file. Press your "info" key when you are listening to a song at a site. You will see the URL after Audio:
I went to:
http://www.filamorgan.com/midi/
And selected:
http://www.filamorgan.com/midi/beachboys/beachboys2.mid
The first way to put sound in your Page Builder is to use the Microsoft tag:
<bgsound src=
"http://www.filamorgan.com/midi/beachboys/beachboys2.mid">
All I did was put the file name inside of this tag:
<bgsound src=
"URL">
When your site is downloaded, this song will automatically play. If you want the file to play over and over, add this attribute inside the tag: loop="-1"
<bgsound src=
"http://www.filamorgan.com/midi/beachboys/beachboys2.mid"
loop="-1">
Also, you can change the -1 to a number, such as "2" for it to play 2 times or "3" for it to play 3 times and stop.
The 2nd way is to use the Netscape tag:
<embed src=
"URL">
When I put the of the URL (address) of the sound file, it looks like this:
<embed src=
"http://www.filamorgan.com/midi/beachboys/beachboys2.mid">
As this is written (above) the sound file will not automatically play. A speaker image will show for the user to click on. You can, however, use this tag to automatically play by adding the attribute: autostart="true"
<embed src=
"http://www.filamorgan.com/midi/beachboys/beachboys2.mid" autostart="true">
And if you want the sound to play over and over again, add this attribute: loop="true"
<embed src=
"http://www.filamorgan.com/midi/beachboys/beachboys2.mid"
autostart="true" loop="true">
Note: Since the last upgrade, WebTVers will only hear the sound play once.
Why do Netscape and Microsoft use different html commands for sound? Well, because they want you to select their Browser. Computer users must select a browser and can only hear the compatible sound file. Aren't we lucky that we can hear either? If you want to please everyone, you can use both tags at the same time! First use the Netscape embed tag:
<embed src=
"http://www.filamorgan.com/midi/beachboys/beachboys2.mid"
autostart="true" loop="true">
Your Netscape friends browser will see this tag and play it. Now you will write:
<noembed>
I guess you figured out that the above tag means "for the browser who can't see embed tags." So, write the bgsound tag after the noembed
<embed src=
"http://www.filamorgan.com/midi/beachboys/beachboys2.mid"
autostart="true" loop="true">
<noembed>
<bgsound src=
"http://www.filamorgan.com/midi/beachboys/beachboys2.mid"
loop="-1">
The noembed tag has a closing tag to tell the browser it's done:
</noembed>
Here is the whole ball of wax:
<embed src=
"http://www.filamorgan.com/midi/beachboys/beachboys2.mid"
autostart="true" loop="true">
<noembed>
<bgsound src=
"http://www.filamorgan.com/midi/beachboys/beachboys2.mid"
loop="-1">
</noembed>
Computer Notes:
- WebTVers only hear the sound file once if using the embed tag attribute loop="true" Netscape users will hear it play repeatedly.
- You can add hidden="true" to your embed tag to prevent a console from appearing on computer screens.
- The volume tag is preset by default to 50. You can over-ride that with any number from 1 to 100 (100 is the loudest) by adding volume="100" (or whatever number) inside the embed tag.
Click on Image or Word to Hear
Giving your visitors the choice to select whether they want to hear your sound file or not is a wonderful option. It's not always a question of compatible taste in music. Sound files take time to download. Older browsers or computers, or WebTVers having a slow day are often inconvenienced by the added wait. If the speaker icon created by the embed tag does not thrill you, you can use another image. Here's how:
<a href="soundfile">
<img src="URL">
</a>
You would remove the word, soundfile, in the first tag (but leave the quotes) and replace with the actual URL of your soundfile. It will start with http:// and probably end with either .mid or .wav. You would remove the 3 letters URL (but leave the quotes) in the second tag and replace with the actual URL (address) of an image. The first tag makes anything written after it clickable. You can write a word or words, or you can write the code for an image. Any and all that comes after <a href="URL"> will be clickable and taken to the web site or hear the sound specified.
The Second tag is the HTML code to make an image appear on a web page. <img src="URL"> is seen by every browser. To get the URL of your scrapbook image:
- The image must be on a published page.
- Goto:
http://transload.starblvd.net/ts.shtml
- Type in the published page URL
- Press the "extract" button"
- You will see your image and its URL written above it.
The third tag is a closing tag. The </a> tag stops the clickability.
One Song Throughout Site
You will need to create two pages. One page is the Sound Page and the other is a Frames Page.
Sound Page
To create a page to put your background sound on:
- Click on "create"
- Click on a page style (same as your web site page style)
- Click on "Add an item"
- Select "text"
- Type in your HTML sound code.
For example:
<bgsound src=
"http://www.filamorgan.com/midi/beachboys/beachboys2.mid">
- Press "Done"
- Press "publish"
- Title it.
- Press "continue"
- Press "Publish"
- Press Done.
Frames Page
Now you will create a Frames page that has two pages in it- your web site and your sound page.
- Click on create
- Select the same background (for uniformity)
- Click on "Add an item."
- Select "text"
- In the large textbox, type:
<frameset rows="*,1%">
<frame src=
"http://community.webtv.net/webtvname/page1">
<frame src=
"http://community.webtv.net/webtvname/page2">
</frameset>
So in my Frameset, the top page is my web site. The asterisk says it can take up whatever space it needs. The bottom page is my sound page. I have directed that it takes up 1% of the bottom space.
Instead of webtvname/page1 you would be typing in your webtv name and the title of your web site. Instead of webtvname/page2 you would be typing in your webtv name and the title of your sound page.
Mission complete! This is a whole new page. You would use this new Frames page as your starting point.
Play 2 Different Sound Files
If you would like to have two different sound files play on a single page, you can use any of the usual methods (the bgsound or embed tags) and then have a meta tag play a sound file. For example, you might already have this tag on your page:
<bgsound src=
"http://www.filamorgan.com/midi/beachboys/beachboys2.mid">
And then add this tag:
<meta http-equiv="refresh" content="60; url=http://www.angelfire.com/pa3/candy/images/sound1.wav">
The 60 in the above code is saying that 60 seconds after the page has loaded, start playing this sound file. (The other song started playing as soon as the page downloaded.) You would have to time your sound file to determine when you want the 2nd one to begin.
You would remove the
<http://www.angelfire.com/pa3/candy/images/sound1.wav>
of course, and put in the URL of the sound file you want. Let's take a careful look at the meta tag:
<meta http-equiv="refresh" content="60; url=http://yadda.mid">
There is no quote in front of http. and there is a semicolon (not a colon) after the number. These two things are often overlooked. Meta tags should be entered in the "Head" of a document. The best we can do is put it in as item #1.
Common Errors
Common errors in writing HTML code, is not using the quotes or only using one quote (e.g., the beginning quote but not the end quote). Another error is a typographical error. You need to double check that each letter is not only correct, but is also the correct case (e.g., upper or lower case).
The most common error is spacing. The URL (address) of a sound file begins with http:// and ends with "dot" something; .mid .au .wav, etc. There are no spaces in an address. Sometimes it appears as though there might be, because a long address wraps around to the next line. It is important to remember that once you start writing the address part of your code that you never use the return key or the space bar. Keep typing and allow WebTV to wrap it around for you. Here's an example of an address:
http://www.filamorgan.com/midi/beachboys/beachboys2.mid
Keep in mind that while there is never a space in the URL (address) part of the code, there are spaces in the code. The 3 places there are spaces in writing HTML sound code:
- between bgsound and src.
- between embed and src.
- after the end quote, if there is an attribute (e.g., loop="true").
Here's an example of code and address together. The only space is the one between bgsound and src:
<bgsound src=
"http://www.filamorgan.com/midi/beachboys/beachboys2.mid">
To troubleshoot you can break down the areas into checking the address of the sound file, and then checking the HTML code. You can write perfect code, but if the URL is incorrect, it will never play.
One of the most frustrating errors is the one not visible. Sometimes when we cut and paste HTML code and addresses, we paste an invisible space. The invisible space is at the end of a line and causes an address or code to break up. If you have checked your code and see there are no errors, you can check for invisible spaces. This is how:
- Go to the front of the second line with your cursor.
- Look at the end of your first line. Note the character (e.g., the letter R).
- Gently press your delete key once.
- Did you delete the last letter of line one? Did you delete that letter R?
- If you did, then replace it.
- If you did not, then you deleted an invisible space.
- If you deleted an invisible space, press your delete key again until you have deleted the letter R (R was only an example of what could be that last letter on line one). Replace the letter as soon as you delete it.
- Continue to the front of subsequent lines until you have deleted all invisible spaces.
Inserting HTML in PageBuilder
To insert this or any HTML code into your Page Builder:
- Go to your Page Builder Index.
- Click on the page you want to add HTML to.
- Click on "Change page"
- Click on "Add an item"
- Select "text"
- Type your HTML code into the large rectangular box.
- You will see on the lower left hand corner what item number this is on your page. You have the option to move it up.
- Press "Done."
- Press "Publish" on left sidebar.
Important: The "Publish" button on the left sidebar is actually a "save" button. It saves any changes you made to your page.
- Mission Complete!
with love from, Beth Candy
Beth's Help Pages
Page Builder Questions? Post them Here.
|