My first Widget

[soa]

I'm trying to create a widget to wrap a javascript tool call wavesurfer (it plays audio files and displays a waveform - very cool).

https://wavesurfer-js.org/

I have the cdn referenced in my Resources

I'm getting an error:

Fatal Error:

Uncaught TypeError: Cannot read property 'on' of undefined
Reported By:

nesawvsrf.js, line 120

Is there an obvious error in my implementation?

The widget code is

//----------------------------------------------------------
// PROVIDE A SINGLE JAVASCRIPT FUNCTION TO DEFINE THE WIDGET
//----------------------------------------------------------

function( PROTOTYPE, WIDGET )
{

var Wavesurfer;
//--------------------------------------------------------
// WIDGET-INTERFACE FUNCTIONS (CALLED FROM THE VL-RUNTIME)
//--------------------------------------------------------

//
// 'onCreateInstance' - gets called when LANSA creates an instance of the widget.
//
PROTOTYPE.onCreateInstance = function()
{


}

//
// 'onRealizeControl' - gets called when LANSA creates a visual representation of the widget.
//
// Parameters:
//
// - parentDiv : the div that's been created as a container for this control.
//
PROTOTYPE.onRealizeControl = function( parentDiv )
{
construct(parentDiv);
}

//
// 'onSizeChanged - gets called when the widget changes size.
//
PROTOTYPE.onSizeChanged = function()
{
// The widget might need to redraw itself.
}
function construct(parentContainer)
{
var waveform = document.createElement("div");
waveform.id ="waveform";
parentContainer.appendChild(waveform);

Wavesurfer= WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple'
});
}

//-------------------------------
// WIDGET-PROPERTY IMPLEMENTATION
//-------------------------------

//
// FilePath - Location of file to play
//
// Type: String
//


PROTOTYPE.setFilePath = function( strValue )
{
Wavesurfer.load(strValue);
}

//-----------------------------
// WIDGET-METHOD IMPLEMENTATION
//-----------------------------

//
// Play - Play file
//
PROTOTYPE.Play = function()
{

Wavesurfer.play;

// Implementation...
}

Wavesurfer.on('ready', function () {
Wavesurfer.play();
});

// Done
return WIDGET.Completed;
}

And the test page is

Begin_Com Role(*EXTENDS #PRIM_WEB)
Define_Com Class(#NESAWaveSurfer) Name(#WaveSurfer) Displayposition(1) Height(100) Left(103) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(96) Width(100)

Evtroutine Handling(#Com_owner.Initialize)


Endroutine

Evtroutine Handling(#WaveSurfer.ready)

#WaveSurfer.FilePath := 'https://bosho.boardofstudies.nsw.edu.au ... 2NS1qe.MP3'
* #WaveSurfer.Play

Endroutine

End_Com

[dannyoorburg]

Hi,

the

Wavesurfer.on('ready', function () {
Wavesurfer.play();
});

is defined in the main flow, it'll execute when Wavesurfer is still an undefined variable.

You probably want to move that into your construct function.

Cheers,
Danny

[BrendanB]

QuickExport20170405134140.zip

(16.29 KiB) Downloaded 2453 times

Jim,

attached is modified version of your widget/webpage.

obviously, i am loading the file locally (the mp3 file). so you will need to change the webpage for that...

Brendan.