Anne's World
Web Page Resources

[HTML] [Colors] [Graphics] [Graphics Tutorials] [Editors] [Extras] Sound [JavaScript/Java] [More]
[HTML] [Colors] [Graphics] [Graphics Tutorials] [Editors] [Extras] [Sound] [JavaScript/Java] [More]
[ Friends & Stuff ] [ Site Map & Search ] [ E-mail ]

Read some discoveries about adding sound to find out the safest way to add music for most of your visitors. Caution, some of your visitors might not find a console to turn music on or off. I need to update the information. Special note: although the EMBED tag was supported in most browsers, it was not supported in the HTML standards until recently with HTML 5.

Charles Belov's Cross-Browser Background Music Tips, unfortunately I can no longer find his web site, were the inspiration for information on this page. Pay special attention to <noembed></noembed> tag set around the <bgsound> tag in his simplest cross-browser code examples used on this page. You will need to remember this when you are visiting other sites on how to add sound that may have been written earlier and do not explain this part. The same goes for the suggested size for a console.

Sound and Multimedia

An Alternative to Embedding MIDI Files (L-6)
Macintosh MIDI User's Internet Guide Kelly NOT Found replace with MacAddict Guide to Making Music with GarageBand - Mac Audio Guy links
Standard MIDI Files on the Net Charles Kelly, uses customized google search for MIDI Digital Music Glossary of Terms to understand. Article about many MIDI archives have closed because of copyright and legal issues not there.
Classical Music Archives rates quality which is more important as people get better speakers on their computers. Free users are limited on what can download.
Classical Music Archives: J.S.Bach play for pleasure
FindSounds - Search the Web for Sounds Free, mostly wave but a small snippet might just be what you want on a page. (L-6)
Folk Music of England, Scotland, Ireland, Wales and America Lesley Nelson-Burns' (aka the Contemplator)'s Folk Music Site
Traditional Tunes in Midi Format Barry Taylor's site was among the first traditional music midi sites on the web. (L-5)
Public Domain Music Sequenced by Benjamin Robert Tubb Songs and lyrics pre-1922 cover American Artists, Civil War, Song Eras and Styles. Use for free non-commercial on web sites with credit link and email to him with urls where files are used. (L-5)
Online Community: Keyboard and MIDI news online community for musicians.
Objects, Images, and Applets in HTML documents HTML 4.01 way of adding sound not fully supported (L-6)
(How Stuff Works): "How MP3 Files Work" - Free music downloads, videos, and playlists
RealPlayer free media player. Read Support and system specifications before you download. Latest Windows only. Mac needs older version. Products and services for audio, visual and other multimedia.
The VRMLworks (Virtual Reality Modeling Language) Crispen's site for 3D Web technology (L-6)
Apple Quicktime (L-6)
Adobe Flash Player help and Shockwave high-performance multimedia. Some web pages will ask you to install or update players
How to Add Sound to an HTML5 Web Page Using the HTML5 Audio Element

Some discoveries about adding sound

My preference for most purposes is to make a clickable hyperlink with a description of the music you will hear if you select the link. This way visitors can choose to play the music if they wish on the player their browser supports and then turn it off when they do not want to listen anymore. Here is the way to make make the link
<a href="voi.mid" >Listen to Bach</a> and it works like this Listen to Bach. Linking is another way to play the same midi file that I use in the examples here. People have discovered there is a "bug" with some versions of Win98 and IE right so that this method is not working for them.

NOTE: There are new elements in HTML5 to handle media content. HTML5 New Elements. The content here doesn't reflect the changes. The embed tag produced invalid HTML prior to HTML 5. More research is needed for the new elements: audio (and allowed attributes), video, source, embed and track. w3schools summarizes the new tags and attributes. HTML5 audio tag, the control attribute adds audio controls, like play, pause, and volume. HTML5 embed Tag

Examples Using EMBED

End of reserved space of 200x80 pixels for the size of control console that will not crash browsers or cause unexpected results. Use the middle button to turn on the 21K Mozart MIDI file. Some of you may not see this console!

On this page in the example just above where the music does not load automatically and the example on the next page which has the music load automatically, I embedded sound to fiddle with Belov's Cross-Browser Background Music Tips, an excellent resource that is no longer online. His troubleshooting tips to test for problems on the ISP end also, especially that the server is sending the correct MIME types. Belov kept adding more tips as he got reports from users or tests on multiple browsers and MIDI players. Belov's email signature even carried the following advice: "Top reason MIDI doesn't work on your browser: You downloaded a small version of your browser from the web, and there's no MIDI plug-in in your plug-ins folder." and "Top reason MIDI doesn't work on your web site: The ISP is sending out the wrong MIME type for your MIDI files."

Zonie (fellow VU classmate who also assists with classes) advises from what he has learned through newsgroups and sources that a page loads more quickly and smoothly when you put the code for music at the very bottom of the web page. Belov confirmed that "this is true, although I [Belov] have had reports and confirmed myself that for at least one version of the QuickTime plug-in, the console must be visible on screen at the time the file loads or it will be impossible to play it. *Sigh*."

This is the code which should give most visitors a choice to turn on the music if they wish used above

<embed src="voi.mid" width="200" height="80" autostart="false" DISPLAY="SONG">

and the coding for the example I sent you to on the other page where the music loads automatically and shows a console for some visitors.

<embed src="voi.mid" width="200" height="80" autostart="true">
<bgsound src="voi.mid">

The code I used for the sound to load automatically works in Netscape and for friends using Microsoft Internet Explorer 3.01 and later or WebTV. Belov notes that the quotes are required around the attributes for WebTV now. The noembed tag set around the bgsound src="voi.mid" (thanks Sal for letting me borrow your Mozart) will still allow MSIE 3.0 and earlier to interpret the bgsound.

While a console shows up for me in Netscape 3.04, WebTV and some versions of MSIE will not show a control console. I want people to be able to turn off the sound if they wish. Reading further into the console tips, Belov suggested using width="200" height="80" for the console size that may not look good in some browsers but will not crash a system or cause unexpected results because it is too small. The size is really not that much bigger than what many people on the web have used for the console size of the plug-in installed with Netscape 3 on their pages who might not have known before. Notice also that you should not include use HIDE="false" in your HTML coding when you do this as this is not a valid option and you may "crash" some visitors if you use it.

The 200 x 80 is the size I use in my examples. If the plug-in your browser uses displays a smaller console than the designated size reserved for it, some browsers may show extra "gray space" for the remaining area. There is a larger square of background color showing for me than the actual size of the console because the MIDI player I use is smaller than the reserved size. (My friend on WebTV did not see space reserved for a console. When traveling to this page with win95 MSIE 3.02, Sal describes that she gets "that big old grey block like before a javascript applet loads, then a console, about 1 x 2.5 in the upper lefthand corner of the block.") Belov said that other browsers might fill in the remainder of the block with the background gif of the page so that it is just seen as a block which prevents text from being printed there. Another reason to place the code at the end of the page.

Netscape documentation about sizes depending on the browser version may not be applicable across Netscape plug-ins either. If you set the size too small, besides taking a chance on crashing some browsers or causing unexpected results, only one button to turn off the sound may show (or not enough to even do that) and you will not be able to turn it back on. If you do not set a size, MSIE does not get the console at all.

If I change the code to autostart="false", like that which is at the beginning of this section, so that people in Netscape and later versions of IE can at least turn on the music rather than have it load automatically, visitors using other browsers like WebTV may not even know that there is sound on the page because they will not have a console with the control buttons to allow them to turn on the music. Last year, an Internet friend showed us how to use a JavaScript code to allow people in IE (This was before the versions of MSIE that also recognized EMB SRC. bgsound does not have options to show a console.) to choose to turn on the music: you will miss those who cannot use JS or do not enable it. I used the default so at least they will only have to listen to the music once through rather than having it keep repeating. For sound to repeat endlessly with the EMBED SRC use loop="true" and for bgsound use loop="-1". While you can specify that the sound play a certain number of times by using LOOP with the number of times you want it to repeat, it is not recommended that you do this as it may not work the way you intend for certain browsers.

Given a choice, I would rather that some people using the"light" versions of browsers that are not configured with a plug-in not get the music (they will need to get a plug-in) rather than having complaints that there are errors for folks using IE 3.01 and later because their browsers do not know which line to interpret. It looks like MSIE may have fixed this "bug" in some of the later versions. Follow the link at the beginning of the page by Charles Belov to learn more about these issues and how to write the HTML that will work across most browsers. One of his test page examples gives a JavaScript code that works to hear the music for Netscape with JS enabled and both win 3.11 and win 95 versions of MSIE. (This outstanding site by a VU classmate is a wonderful example of how music starting automatically adds to the drama of Mysteries of the Osterraeder and I do not even want the choice to turn it off.)

Since you made it this far, here is the code to hide the control console and load automatically. (the one that some of you already do not see here.) I would make sure that your music is important to the page and not too long before using this version. Or consider the alternative of making a clickable link.

<embed src="voi.mid" hidden="true" autostart="true">
<bgsound src="voi.mid">

[HTML] [Colors] [Graphics] [Graphics Tutorials] [Editors] [Extras] Sound [JavaScript/Java] [More]
[HTML] [Colors] [Graphics] [Graphics Tutorials] [Editors] [Extras] [Sound] [JavaScript/Java] [More]
[ Friends & Stuff ] [ Site Map & Search ] [ E-mail ]


eXTReMe Tracker

kids around the world

©1996–2012   Links verified 23 February 2012