JavaScript tutorial: adding sound to your pages

JavaScript tutorial:
Adding sound to your pages


Depending on your needs, there are several ways to add sound to your pages:

Using an ActiveX control

Using the <embed> tag (HTML-only, no JavaScript involved)

As background sound (HTML-only, no JavaScript involved)

Playing music using an ActiveX control

Note: ActiveX controls are currently supported only by Internet Explorer.

Use your JavaScript Editor to open Music.htm (in the Tutorial folder inside your JavaScript Editor folder) and examine the code.

To run the code click on the Show Internal Viewer button

To play a sound file (in this case Canyon.mid) the code uses the Media Player ActiveX. It ships with any installation of Windows and can be used to play sound, animations and video files.

An example of how to add Media Player to your Web page is given below. Only the most useful parameters are shown, for a complete list have a look at the Music.htm code.

<object id=MPlyr classid=CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95
align=left width=0 height=0 style="VISIBILITY: hidden">
    <PARAM NAME="Filename" VALUE="Canyon.mid">
    <PARAM NAME="AutoSize" VALUE="0">
    <PARAM NAME="AutoStart" VALUE="0">
    <PARAM NAME="ClickToPlay" VALUE="0">
    <PARAM NAME="PlayCount" VALUE="1">
    <PARAM NAME="ShowControls" VALUE="0">
    <PARAM NAME="ShowAudioControls" VALUE="0">
    <PARAM NAME="ShowDisplay" VALUE="0">
    <PARAM NAME="ShowPositionControls" VALUE="-1">
    <PARAM NAME="ShowStatusBar" VALUE="0">
    <PARAM NAME="ShowTracker" VALUE="0">


Once the Media Player object is defined you can use its ID in your JavaScript functions to invoke the object's methods, such as MPlyr.Play() or MPlyr.Pause().

In this example the Media Player plays the sound file but remains hidden (style="VISIBILITY: hidden"). By changing the parameters you can control the size, appearance and other properties of the Player. Most importantly, by changing the "Filename" parameter you can use it to replay AVI, MPEG, MOV, MP3 and other types of Multimedia files.

Tip:Use JavaScript Editor to automatically generate all the code for using sound, video, animations, Flash and other other objects in your web pages:

Via Insert menu (works both for code view and Visual Designer view), or

Via Resource Manager (works both for code view and Visual Designer view), which lets you preview resources before inserting them.

Playing music using the <embed> tag

Using the <embed> tag to play sound and videos gives you the greatest compatibility - it works on all major browsers.

The following code fragment illustrates the use of the <embed> tag.

<embed src="MySoundFile.wav" controls="console" autostart="true">

The <embed> tag gives you the greatest compatibility, but not the greatest functionality - it has less options compared to the Media Player ActiveX. When using JavaScript Editor's Insert menu to place sound and video into your pages, a number of options will be grayed if you select the <embed> tag.

Playing background music

The sound file plays automatically as soon as your visitors enter the page when you place the <bgsound> tag inside the <head> section. Its use is shown below:

<bgsound balance="0" src="MySoundFile.wav" volume="1">

Tip: To add the background sound with JavaScript Editor's Visual Designer:

Open your web page and click on the Visual Designer button, and

Select Format / Page properties from the menu, and specify the new file for the background sound.

For more in-depth explanation on how to insert multimedia into your web pages with JavaScript Editor please see the Inserting Sound or Video section.