处理阵列以进行波形渲染的快速方法

Question

我的 Web 应用程序有这段代码，我需要一些改进，它以某​​种方式工作，但结果很慢：

这段代码背后的想法是：

• 函数获取当前缓冲区，然后转置为数组（采样率为50ms）
• 在每次采样时，必须通过在 updateWave 函数中传递每个元素来呈现数组的元素
• 对于下一次迭代，再次获取当前缓冲区，但它包含先前的数据（因此不应呈现先前的数据/元素）必须再次呈现新元素。

更新（简化代码）：

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();
            instance.@com.mycode.wavegwt.showcase.client.Showcase::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;
            instance.@com.mycode.wavegwt.showcase.client.Showcase::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() 是一个从闪存接口（从麦克风获取数据）读取缓冲区的函数。对于演示，我将麦克风录音机设置为在触发时录制 10 秒，然后在录音开始时waveIt()，10 秒后调用clearInterval($wnd._waver)

这个问题：

• waveIt() 函数真的很慢，也就是说，运行它时 UI 没有响应并且渲染速度很慢
• 与 waveItByRandomValue() 相比，waveItByRandomValue() 渲染速度快，并且在运行此函数时 UI 仍然响应

我已经没有如何使这项工作正确的策略了。

要实时查看我的项目，请参阅：http://bitly.com/XGboA1

我也在 Google 网上论坛中解释了更多这个问题：http://bitly.com/SqSZVl

Answer 1

这可能是解决方案的一部分，类型化数组：

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