|Home | Web Design Tutorials | Free Graphics | Custom Graphics | Newsletter | Products | Specials | SEO | Sound Effects | Benefits | Login | View Cart|
How to Add Sound to a Web PageThere are a few different ways to add sound to web pages. You can have the sound in the background with no controls, as you probably noticed when you entered this page if you have your speakers on.
You can also have a control panel and let users start the sound file on their own or have the sound start automatically. Another option is to link to the sound file to have the sound file open in an external player. That option also gives users the option to save the sound file to their computer.
How to Play a Hidden SoundHere's the code I used to have the sound play when this page loaded:
<embed src="sample.wav" autostart="true" hidden="false" loop="false"> <noembed><bgsound src="sample.wav" loop="1"></noembed> </embed>Here's what that code means:
Sound with a Control PanelDepending on your available software and configuration, most users will see the miniature control panel below. You may have to click the play button twice to hear the sound. I have to anyway. The code for this mini-panel is the same as above except I changed the hidden parameter to true, changed the autostart to false, and added width="70" and height="28" to the code. For the full-sized control panel just leave out the width and height parameters.
You like that . . . song (for lack of a better term)? I made that some time ago while playing around with sound editing software. Yeah, I know, I have my snoopy little nose into a lot of things—but I have fun!
Adding Sound with a Meta TagIt's not well known, but there's also a way to use the refresh Meta Tag t0 download a sound to the user if they have the software installed to play the file type. This technique opens the sound in the player rather than in the browser. To do that, add the following code to the HEAD section of your web page:
<meta http-equiv="REFRESH" content="0;URL='FileName.mid?autostart=true'">Where it has 0 (zero) in the code, that's how long of a delay the browser should wait before opening the sound file. The FileName.mid is the name and extension of the sound file, and be sure to include the path to the file in front of the file name if the sound file isn't kept in the same directory. The autostart can be set to true or false as with an embedded sound.
Sound with a Simple LinkOf course, you can also add sound with a simple link. Depending on how the user's browser is configured, clicking the link will either open the sound file in a player or give the user the option of opening it or saving it. It's also available to download and save on their computer too, via the right-click menu. Code a link to a sound file just as you would a web page link, only place the address to the sound file in the link rather than the address to a web page, like so:
<a href="SomeSound.wav">Here's My Sound</a>
A Few Cautions
Bonus Tip: If you come across an embedded sound you don't want to listen to, press the Escape key on your keyboard. Most of the time this will stop the sound from playing, but it won't work if the sound is playing Flash.
The Right Way That Doesn't WorkFor future reference, here's how you're supposed to add sound to a web page—but remember, it doesn't work except with Safari:
<object> <param name="autostart" value="true"> <param name="src" value="YourSound.wav"> <param name="autoplay" value="true"> <param name="controller" value="true"> <embed src="eureka.wav" controller="true" autoplay="true" autostart="True" type="audio/wav" /> </object>And that's the name of that tune! While I don't offer music files here, I do offer some funky weird sound effects.
Almost a NewsletterSubscribe today and get a free gift, The Science of Getting Rich. Learn more, or subcribe below:
Did you know...The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]
Home | Web Design Tutorials | Free Graphics | Newsletter | Products | Specials | SEO | Sound Effects | Press Room