Tutorials > How to use the control inside a web page

Active Sound Recorder 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="ActiveSoundRecorder1"

classid="clsid:EC1A33CC-0FB1-4F3A-BDE7-79773690BB28"

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

classid="clsid:EC1A33CC-0FB1-4F3A-BDE7-79773690BB28"

codebase="http://yourserver/asrecmms.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 AsrecMms.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="ActiveSoundRecorder1"

classid="clsid:EC1A33CC-0FB1-4F3A-BDE7-79773690BB28"

codebase="http://yourserver/asrecmms.cab#Version=4,0,0,0"

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

</OBJECT>

It's important to note that the AsrecMms.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 enables the use of the Sound Activation System and set a silence threshold to 1000.

<OBJECT id="ActiveSoundRecorder1"

classid="clsid:EC1A33CC-0FB1-4F3A-BDE7-79773690BB28"

codebase="http://yourserver/asrecmms.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 Sound Activation System

ActiveSoundRecorder1.DiscardSilence = 1;

ActiveSoundRecorder1.SilenceThreshold = 1000;

</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

{

// init the control

ActiveSoundRecorder1.InitRecordingSystem (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;

}

// set ENCODING_FORMAT_MP3

ActiveSoundRecorder1.EncodeFormats.ForRecording = 2;

// set MP3_ENCODE_PRESETS

ActiveSoundRecorder1.EncodeFormats.MP3.EncodeMode = 0;

// set MP3_PRESET_STANDARD

ActiveSoundRecorder1.EncodeFormats.MP3.Preset = 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: 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 a recording 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:

RecordingStartedEvent ();

</script>

RecordingStoppedEvent(result);

</script>

The code above will catch the RecordingStarted and RecordingStopped events and will call the specific functions that will perform the needed actions, like displaying the control's status as in the code below:

function RecordingStartedEvent ()

{

divRecordingStatus.innerText = "Recording..."

}

function RecordingStoppedEvent (result)

{

switch (result)

{

case 0:

divRecordingStatus.innerText = "Recording failure"

break;

case 1:

divRecordingStatus.innerText = "Recording completed"

break;

}

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

ActiveSoundRecorder1.VuMeter.Create (GraphSurfaceForVuMeter.hWnd);

ActiveSoundRecorder1.VuMeter.Show (1);

}

or, if you need to display the static bitmap of the recorded 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 ("MmsGraphSurface5").offsetWidth;

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

hBitmap = ActiveSoundRecorder1.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 upload recorded sound to a FTP server

As you may know, ActiveX controls instanced on a web page work locally on the client PC so any recording session performed by Active Sound Recorder will be stored on the hard disk or inside a memory buffer belonging to the client's PC: if you need to store recorded sounds remotely into your web server, you will have to request a FTP upload session of what has just been recorded: for this purpose you can use the RecordedSound.RequestUploadToFTP method.

A successful call to this method will fire the SoundUploadStarted event. Once the upload has been performed completely, the control will fire the SoundUploadDone event. During the uploading session your application is notified about the advancement percentage through the SoundUploadPerc method. An uploading session can be terminated before completion through a call to the RecordedSound.CancelUploadToFTP method.

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.