Tutorials > How to use the control inside a web page

Active DJ Studio is marked as "safe for scripting" and "safe for initialization" so it can be inserted and used from within a HTML web page. As you may know, the technique for adding ActiveX controls inside HTML code is the use of the <OBJECT> tag as displayed on the following HTML code:

<OBJECT id="Amp3dj1"

classid="clsid:6F714D46-E4EF-11D4-93EF-00D0D7032099"

width="1" height="1"

style="visibility:hidden">

</OBJECT>

Obviously the code above will not work if the control is not already installed and registered on the client machine; in order to download, install and register the control on a client machine, you will need to modify the code in the following way (observe text in red color):

<OBJECT id="Amp3dj1"

classid="clsid:6F714D46-E4EF-11D4-93EF-00D0D7032099"

codebase="http://yourserver/amp3dj.cab"

width="1" height="1" style="visibility:hidden">

</OBJECT>

the "codebase" attribute is used in order to determinate the remote location of the control's CAB file which contains the Amp3dj.ocx control and the needed dependencies: this CAB file (digitally signed) is not included with the original installation package and can be requested by registered customer contacting our support team.

Through the "codebase" attribute it's also possible managing control's versioning: in this way, in case the client PC should already contain an outdated version of the control, the browser could request to re-download and re-install the CAB file containing the latest version of the control. Versioning can be managed modifying the OBJECT tag like this (observe text in red color):

<OBJECT id="Amp3dj1"

classid="clsid:6F714D46-E4EF-11D4-93EF-00D0D7032099"

codebase="http://yourserver/amp3dj.cab#Version=5,0,0,0"

width="1" height="1" style="visibility:hidden">

</OBJECT>

It's important to note that the Amp3dj.ocx control requires a runtime license so, in order to let it work inside a web page, you will have to embed the LPK license file inside the HTML code as described below:

</OBJECT>

it's mandatory that the <OBJECT> tag above, containing the LPK file, must be inserted inside the HTML code BEFORE any other <OBJECT> tag.

Due to the fact that only one LPK object can be embedded inside the HTML code, if you should need using more than one ActiveX control inside your page, you will have to create a LPK file including all of them. Details about creation of LPK files can be found on the Microsoft web site. If you are a registered user and if you should need assistance in creating the LPK file, feel free to contact our support team.

How to set/modify control's properties

The <OBJECT> tag we used earlier sets the value of the control's properties to their default. How do we go about setting them to a different 'default' value at design-time? The answer is to add a <PARAM> tag to the code. The example below sets the EnableSpeakers value to 1, which means that the speakers assignment will be enabled.

<OBJECT id="Amp3dj1"

classid="clsid:6F714D46-E4EF-11D4-93EF-00D0D7032099"

codebase="http://yourserver/amp3dj.cab"

width="1" height="1" style="visibility:hidden">

</OBJECT>

Control's properties can be also modified at runtime through scripting (Javascript, VBScript, ecc.) like in the example below:

// enable speakers assignment

Amp3dj1.EnableSpeakers = 1;

</script>

How to call control's methods

Due to the fact that this specific control doesn't have a user interface, web pages will have to interact with him through scripting: supposing that you have an initialization routine for your web page, it should look like the following one:

function Init ()

{

try

{

// allocate one player on the default sound card

Amp3dj1.InitDJSystem (1, 0, 0, 0, 0, 0);

}

catch (e)

{

// probably the control is still not installed: this function will be called again

// after the control installation so we can exit right now

return;

}

// enable speakers assignment

Amp3dj1.EnableSpeakers = 1;

}

</script>

The try/catch block is quite useful in order to avoid annoying warning messages caused by the script being executed before the control is fully downloaded/installed.

How to handle control's events

During a playback session, you could have the need to handle events fired by the control: catching events is quite straight-forward and, in Javascript, you can use a way like this:

EventSoundLoaded (nPlayer, nItemIndex);

</script>

The code above will catch the SoundLoaded event and will call the specific function that will perform the needed actions, like displaying the control's status or enabling some button on the web page's user interface:

function EventSoundLoaded (nPlayer, nItemIndex)

{

document.getElementById ("Play").disabled = false;

document.getElementById ("Stop").disabled = false;

}

How to display visual feedbacks on a web page

As you may know, graphical features embedded inside the control need to rely on an existing window control and on its surface in order to perform graphical rendering; when the control is inserted inside a form or inside a dialog box, the only task you have to perform is to add a picture control and to "connect" to its window handle; with web pages this is quite more difficult because HTML elements don't expose their window handle; for this reason we have created a further very small OCX control to add to your web pages with the purpose of performing graphical rendering on its surface.

This new control is named MmsGraphSurface.ocx and is installed and registered with our product's setup package for immediate usage. This control is very basic and exposes the following properties and methods:

BackColor property: the color used to render the graphical surface (default is set to Black)

hWnd property: the control's window handle (also known as HWND); this property (read-only) is used to connect the graphical control to the recorder control

SetBackgroundImage method: allows setting a background image, in form of a Windows bitmaps handle (also known as HBITMAP), that will be rendered on the control's surface

The graphical control can be instanced inside HTML using the following code:

<OBJECT id="GraphSurfaceForVuMeter"

classid="clsid:1C671DB5-E86A-4951-BD4E-0E4D0F7F4248"

width="50" height="100" style="visibility:hidden" >

</OBJECT>

Obviously you can add more than one instance of the control depending upon the number of graphical rendering you need to obtain.

At this point you can start using the graphical surface of this control connecting it to the recorder control in a way like this:

function CreateVuMeter ()

{

// create the embedded Vu-Meter

Amp3dj1.VuMeter.Create (GraphSurfaceForVuMeter.hWnd);

Amp3dj1.VuMeter.Show (1);

}

or, if you need to display the static bitmap of the recorded sound's waveform, after having completed the waveform analysis, in a way like this:

<OBJECT id="GraphSurfaceForWaveform"

classid="clsid:1C671DB5-E86A-4951-BD4E-0E4D0F7F4248"

width="500" height="250" style="visibility:hidden" >

</OBJECT>

function DisplaySoundWaveform ()

{

// get the dimensions of the display surface

m_width = document.getElementById ("GraphSurfaceForWaveform").offsetWidth;

m_height = document.getElementById ("GraphSurfaceForWaveform").offsetHeight;

// obtain and display the full sound's waveform

var hBitmap = Amp3dj1.Waveform.BitmapViewSaveToMemory (0, 0, -1, m_width, m_height, 2);

GraphSurfaceForWaveform.SetBackgroundImage (hBitmap);

}

If you want to see a basic web page with some real coding, graphical rendering and waveform analysis, you can follow this link to our test page.

Another sample web page, simulating a sort of Internet Radio, is available on the following link.