Tutorials > How to use the control inside a web page

Active Sound Editor 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="ActiveSoundEditor1"

classid="clsid:1BA4141C-F322-49AA-96FC-D2814FC7EEB2"

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="ActiveSoundEditor1"

classid="clsid:1BA4141C-F322-49AA-96FC-D2814FC7EEB2"

codebase="http://yourserver/asoedmms.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 AsoedMms.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="ActiveSoundEditor1"

classid="clsid:1BA4141C-F322-49AA-96FC-D2814FC7EEB2"

codebase="http://yourserver/asoedmms.cab#Version=2,0,0,0"

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

</OBJECT>

It's important to note that the AsoedMms.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 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

{

// initialize the control

ActiveSoundEditor1.InitEditor (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;

}

</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: for this reason, avoid inserting calls to the "alert" function inside the catch block because it could give you misleading messages.

How to handle control's events

During an editing 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:

divEditorStatus.innerText = "Loading sound...";

</script>

divEditorStatus.innerText = "Loading sound..." + nPercentage + "%";

</script>

if (nResult == 1)

divEditorStatus.innerText = "Sound loaded successfully"

else

divEditorStatus.innerText = "Sound loading failure"

</script>

The code above will catch the SoundLoadingStarted, SoundLoadingPerc and SoundLoadingDone events in order to give a feedback about the advancement of a loading session started through a call to the LoadSound method.

How to display the Waveform Analyzer 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 create the Waveform Analyzer window as a child window of the container form; with web pages this is quite more difficult because HTML elements don't expose the window handle of the container; 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 editor 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 before the Waveform Analyzer is created

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

<OBJECT id="GraphSurfaceForAnalyzer"

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 editor control in a way like this:

function CreateWaveformAnalyzer ()

{

// get the dimensions of the display surface

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

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

// create the Waveform Analyzer and set some graphical setting

ActiveSoundEditor1.WaveformAnalyzer.Create (GraphSurfaceForAnalyzer.hWnd, 0, 0, m_width, m_height);

ActiveSoundEditor1.WaveformAnalyzer.SetGraphicalSettingsParam (5, "#336633"); // colorRulersBackground

ActiveSoundEditor1.WaveformAnalyzer.SetGraphicalSettingsParam (13, "false"); // bRulerTimeVisibleBottom

ActiveSoundEditor1.WaveformAnalyzer.SetGraphicalSettingsParam (15, "false"); // bScrollbarVisibleBottom

ActiveSoundEditor1.WaveformAnalyzer.SetGraphicalSettingsParam (16, "103"); // nResolution = WAVEANALYZER_RES_MIDDLE

ActiveSoundEditor1.WaveformAnalyzer.SetGraphicalSettingsParam (18, "3"); // nStereoVisualizationMode = STEREO_MODE_CHANNELS_MIXED

ActiveSoundEditor1.WaveformAnalyzer.Show (1);

}

or, if you need to display the static bitmap of the loaded sound's waveform, in a way like this

<OBJECT id="GraphSurfaceForWaveform"

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

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

</OBJECT>

function DisplayWaveform ()

{

// create a static bitmap of the overall sound's waveform

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

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

hBitmap = ActiveSoundEditor1.WaveformAnalyzer.SnapshotViewSaveToMemory (0, -1, width, height, -2);

// display the static bitmap of the sound's waveform

GraphSurfaceForWaveform.SetBackgroundImage (hBitmap);

}

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

How to load and edit sounds from on the Internet

Active Sound Editor doesn't have the capability to connect to the Internet in order to load a sound or an Internet stream: for this purpose the suggestion is to integrate the control with an instance of our Active Sound Recorder which comes with Internet features.

Special note when running under Windows Vista and later versions

As you may know, Windows Vista and later versions come with a new security layer named User Access Control (UAC): when UAC is enabled, security settings won't allow running external applications from within Internet Explorer; in order to encode in one of the following formats, our control makes use of an external encoder:

MP3 (Lame.exe)

OGG Vorbis (OggEnc.exe)

AAC and MP4 (Faac.exe)

WMA (Windows Media Components)

in order to avoid issues when using the mentioned encoding formats, due to the fact that disabling the UAC could expose the target PC to various security issues, you will have to instruct your clients to add your web site to the list of "Trusted Sites" available inside Internet Explorer security settings.