Resources, Advice & Tips for Covid-19
Read More

Audio Javascript

Ryan Dube
Audio Javascript
Audio Javascript

When it comes to designing a functional and interesting web page, audio javascript code and tools can help with adding great music and sound effects to bring your website alive.

What is Audio Javascript?

Ever since hypertext markup language (HTML) became the standard for producing web pages transmitted over the Internet, web designers look for ways to play sounds on web pages in a way that will work on all browsers and for all operating systems. This concept is called cross-compatibility, and it has been the Achilles heel of web design for many years. Even today it remains a significant web design issue.

The Internet Before Audio Javascript Was Available

Before audio Javascript techniques became a viable way to play sound on a web page, the standard methods used to play background music using HTML included the use of the "BGSOUND" tag or the "EMBED" tag. To have a web page play music automatically, web designers would type:

<bgsound src="yourfile.mid">

This would cause the midi sound file to automatically start playing the moment a web visitor visited your page. Since most web designers quickly realized that the majority of web travelers considered this very annoying, the "EMBED" tag was used to present an actual sound player in the web page itself which gave the visitor the option to control the sound. The embed code looks like this:

<embed src="yourfile.mid" autostart="true" width="130" height="40"> </embed>

The "EMBED" tag has a number of properties that allow the web designer to configure the embedded player so that it is sized appropriately, automatically starts playing the music or not, or whether or not it's invisible. An invisible embedded player that autostarts is a lot like the "BGSOUND" tag. Even worse, such a setup can be configured to auto-loop so that the music never ends.

Audio Javascript Code Introduces Flexibility

The problem with the tags described above is that they are static. They start playing sound when the page loads or when the visitor clicks on the embedded player's "play" button. However, audio Javascript functions introduced the ability for web designers to integrate sound throughout a web page. With Javascript, designers could generate sound effects when users ran the mouse over certain links or buttons, or they could make sure to use the correct HTML tag setup appropriate to the browser that the user is currently using.

For the most part, web designers know that the "BGSOUND" tag is appropriate for Internet Explorer, and the "EMBED" approach is best with Netscape Navigator and similar browsers. Javascript allows web designers to check whether or not users are using Internet explorer or not by using the following Javascript which generates the HTML for the web page on the fly, using the correct embedded sound code depending on browser type.

<script> <!-- var sound1="yoursound.mid" if (navigator.appName=="Microsoft Internet Explorer") document.write('<bgsound src='+'"'+sound1+'"'+' loop="infinite">') else document.write('<embed src='+'"'+sound1+'"'+'hidden="true" border="0" width="10" height="10" autostart="true" loop="true">') //--> </script>

As you explore the code displayed above, you can see the flexibility that Javascript provides. Since the sound file is now applied to a variable, the sound file can be selected within the script based on a number of factors, such as the time of day, the current date or other system variables.

Using Javascript for Sound Effects

As mentioned above, another feature that Javascript provides is the ability to introduce sound effects to a web page. You can have the web page play specific sounds based on whether the user moves the mouse pointer over a link, a menu button or even a picture. You could provide sound effects for any number of Javascript events such as onMouseOver, onClick and more. The first step to integrate such a feature to your web page is to embed an invisible sound player into your web page by copying the following text into your normal web page HTML code.

<EMBED SRC="YOURSOUND.MIDI" autostart=FALSE HIDDEN=TRUE NAME="LinkSound"> <A HREF="link_target.html" onMouseOver="playSound()" onClick="return false;">Link Text</A>

As you can see from reviewing the code above, the audio player is embedded into the web page in an invisible state, and it doesn't autostart the sound file. Once you're page loads, this player is loaded with your sound file and is ready to play. The moment the user runs the mouse over the click, the javascript "playSound()" function is called. This is the function that you've entered into the script section of the web page code.

<SCRIPT LANGUAGE=JavaScript> function playSound(){; } </SCRIPT>

When you call the function above (from anywhere in your web page), it will enable the "play" function of the embedded sound player called "LinkSound" as defined in your "EMBED" tag.

More Information

By making using Javascript for your web page sound needs, you have the flexibility to play not only one sound, but a variety of sounds based on user actions or user system features. Since most users have Javascript enabled in their browsers these days, the odds are very good that your script will work for the large majority of your visitors.

Audio Javascript