Use javascript library problem, nothing display

Hello, i want to realize an application using wavesurfer.js which can display a wave player for audios(See 2nd picture), but it doesn’t work with the connector, nothing displays, even i hard code in javascript., can somebody help me, please?

public class WaveSurfer extends AbstractJavaScriptComponent

    public WaveSurferState getState()
        return (WaveSurferState) super.getState();

    public void setAudio(String source)
        getState().audio = source;

Connector javascript:

com_test_WaveSurfer = function() {
    var element = $(this.getElement());
    this.onStateChange = function()
        // Create an instance
        var wavesurfer = Object.create(WaveSurfer);

            container: '#ROOT-2521314', //find this in html source, hard code
            waveColor: '#A8DBA8',
            progressColor: '#3B8686'
        wavesurfer.load('VAADIN/jquery/ft_incoming.wav');  //Find it, but cannot load, no error, but nothing displays

The player is created, but not visible(see jointed picture).

Can you give me an example of using this wavesurfer.js please? Thanks.


You don’t have any errors on your logs? You can also check your browser’s console log to check for errors.

No error on the log, maybe it’s because of the html div, i saw that we should define the place to add this player:

    container: '#demo' // this is the only required param

Should i define a customComponent for it or should i define the UI/View with html to be able to add the


Your WaveSurferState should have a
string property. Then after initializing the WaveSurfer:

WaveSurfer waveSurfer = new new WaveSurfer();

[/code]then use this in your connector:[code]
var divHolder = document.getElementById(this.getState().divHolder);

container: divHolder,
waveColor: ‘#A8DBA8’,
progressColor: ‘#3B8686
[/code]Kindly check if this will work :slight_smile:

Let me know if this will work with you as this is the same approach we are using in our custom javascript component.