Visual LANSA Forum

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

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

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.