How to use the control inside a web page |
|
Active Waveform Analyzer 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="ActiveWaveformAnalyzer1"
classid="clsid:E8FB6734-ED06-4835-A6BF-C1DC90EF0F3C"
width="500" height="200">
</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="ActiveWaveformAnalyzer1"
classid="clsid:E8FB6734-ED06-4835-A6BF-C1DC90EF0F3C"
codebase="http://yourserver/awavanmms.cab"
width="500" height="200">
</object>
the "codebase" attribute is used in order to determinate the remote location of the control's CAB file which contains the AwavanMms.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="ActiveWaveformAnalyzer1"
classid="clsid:E8FB6734-ED06-4835-A6BF-C1DC90EF0F3C"
codebase="http://yourserver/awavanmms.cab#Version=1,0,0,0"
width="500" height="200">
</object>
It's important to note that the AwavanMms.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 CLASSID="clsid:5220CB21-C88D-11cf-B347-00AA00A28331">
<PARAM NAME="LPKPath" VALUE="awavanmms.lpk">
</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
Web pages can interact with the control through scripting: supposing that you have an initialization routine for your web page, it should look like the following one:
<script language="javascript">
function Init ()
{
try
{
// initialize the control
ActiveWaveformAnalyzer1.InitWaveformAnalyzer (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.
At this point you could customize the look of the waverform analyzer in a way like this:
<script language="javascript">
function Init ()
{
try
{
// initialize the control
ActiveWaveformAnalyzer1.InitWaveformAnalyzer (0);
// modify some of the available settings
ActiveWaveformAnalyzer1.SettingsGeneralParamSet (1, "3"); // nResolution = WAVEANALYZER_RES_MIDDLE
ActiveWaveformAnalyzer1.SettingsRulersParamSet (9, "#336633"); // colorRulersBackground
ActiveWaveformAnalyzer1.SettingsRulersParamSet (7, "false"); // bVisibleBottom
ActiveWaveformAnalyzer1.SettingsScrollbarsParamSet (4, "false");// bVisibleBottom
ActiveWaveformAnalyzer1.SettingsWaveParamSet (0, "3"); // nStereoVisualizationMode = STEREO_MODE_CHANNELS_MIXED
}
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>
How to handle control's events
During an analysis 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:
<script FOR="ActiveWaveformAnalyzer1" EVENT="WaveAnalysisStart ()">
divAnalyzerStatus.innerText = "Analyzing sound...";
</script>
<script FOR="ActiveWaveformAnalyzer1" EVENT="WaveAnalysisPerc (nPercentage)">
divAnalyzerStatus.innerText = "Analyzing sound... " + nPercentage + "%";
</script>
<script FOR="ActiveWaveformAnalyzer1" EVENT="WaveAnalysisDone (nTotalPeaksDetected, fPeakDurationInMs, nMaxPeakLeft, nMaxPeakRight)">
divAnalyzerStatus.innerText = "Analyzer in idle state";
setTimeout("DisplaySoundWaveform()", 100);
</script>
The code above will catch the WaveAnalysisStart, WaveAnalysisPerc and WaveAnalysisDone events in order to give a feedback about the advancement of an analysis session started through a call to the AnalyzeSoundFromFile method.
f you want to see a sample web page with some real coding and graphical rendering, you can follow this link to our test page.