我的 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()
哪个渲染速度快并且运行此功能时 UI 仍然响应
我已经没有如何使这项工作正确的策略了。
要实时查看我的项目,请参阅: http: //bitly.com/XGboA1
我还在 Google 群组中解释了更多这个问题:http: //bitly.com/SqSZVl