Question

I have this code for my web application that I need some improvement, it works somehow but the outcome is quite slow:

The idea behind this code are:

• The function gets the current buffer and then transpose it into an array (with 50ms sampling rate)
• At every sampling, the elements of the array must be rendered by passing each element in the updateWave function
• For the next iteration, the current buffer is fetched again, but it contains the previous data (so previous data/elements should not be rendered) the new elements must be rendered again.

Updated (simplified code):

private String data = "";   
// This function renders the waveform in the page, has been tested to
// render properly and smoothly by passing random double value at 50ms interval    
public void updateWave(String waveValue){
    wave.renderWaveOnFly(Double.parseDouble(waveValue));
}

public final native void waveIt()/*-{   
    var instance = this;
    $wnd._waver = setInterval(function(){
            // Get the current buffer from the flash interface
            // Note it fetches everything in the buffer
            var newData = $wnd.Recorder.audioData().toString();
            var strData = newData.toString();
            var arr = strData.split(',');
            var arrEl = arr.pop();
            [e-mail]::updateWave(Ljava/lang/String;)(arrEl.toString());
            //console.log(arrEl);
        }
    ,50);
}-*/;

// This function renders the waveform from math function 
// and the waveform is smooth and the UI is still responsive
public final native void waveItByRandomValue()/*-{  
    var instance = this;
    $wnd._waver = setInterval(function(){
            var arrEl = Math.cos(i++/25) - 0.2 + Math.random() * 0.3;
            [e-mail]::updateWave(Ljava/lang/String;)(arrEl.toString());
        }
    ,50);
}-*/;

public native void renderWaveOnFly(Double _data)/*-{
    var data = $wnd.data;
    data.push(_data);
    $wnd._waveform.update({
        data: data
    });
}-*/;

waveIt() is a function that reads a buffer from a flash interface (which gets its data from the microphone). For the demo, I set the mic recorder to record 10 seconds when triggered, then when recording starts waveIt(), after 10 seconds call clearInterval($wnd._waver)

The problem with this:

• waveIt() function is really slow, i.e, the UI is not responsive when running this and that the rendering takes so slow
• Compared to waveItByRandomValue() which renders fast and the UI is still responsive when running this function

I am running out of strategy on how to make this work right.

To see my project live see this: http://bitly.com/XGboA1

I also did explain a bit more of this problem in Google Groups: http://bitly.com/SqSZVl

Answer 1

This might be a part of the solution, typed arrays :

http://www.html5rocks.com/en/tutorials/webgl/typed_arrays/