I'm currently working on optimizing the code for my web application. While it functions, the performance is a bit slow and I am looking to make improvements:
The main concepts behind the code are:
- The function retrieves the current buffer and converts it into an array with a sampling rate of 50ms
- Each element in the array must be rendered using the updateWave function at every sampling interval
- Subsequently, for each iteration, the new elements need to be rendered while excluding the previously rendered data from the previous buffer
Here's the updated (simplified) code:
private String data = "";
// This function renders the waveform on the page smoothly and accurately by passing a random double value every 50ms
public void updateWave(String waveValue){
wave.renderWaveOnFly(Double.parseDouble(waveValue));
}
public final native void waveIt()/*-{
var instance = this;
$wnd._waver = setInterval(function(){
// Retrieving current buffer data from the flash interface
// Note: All data in the buffer is fetched
var newData = $wnd.Recorder.audioData().toString();
var strData = newData.toString();
var arr = strData.split(',');
var arrEl = arr.pop();
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8d1d6cbccd9d6dbdd96f8dbd7d596d5c1dbd7dcdd96cfd9cedddfcfcc96cbd0d7cfdbd9cbdd96dbd4d1ddd6cc96ebd0d7cfdbd9cbdd">[email protected]</a>::updateWave(Ljava/lang/String;)(arrEl.toString());
}
,50);
}-*/;
// This function renders the waveform based on a mathematical function
// resulting in smooth rendering and responsive UI
public final native void waveItByRandomValue()/*-{
var instance = this;
$wnd._waver = setInterval(function(){
var arrEl = Math.cos(i++/25) - 0.2 + Math.random() * 0.3;
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd94938e899c939e98d3bd9e9290d390849e929998d38a9c8b989a8a89d38e95928a9e9c8e98d39e9194989389d3ae95928a9e9c8e98">[email protected]</a>::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
});
}-*/;
The waveIt() function reads data from a flash interface (linked to a microphone). In a demo scenario, I initiate recording for 10 seconds, then call waveIt(). After 10 seconds, I clear the interval using clearInterval($wnd._waver)
Current Issues:
waveIt()function runs slowly, causing unresponsive UI and delayed rendering- Contrastingly,
waveItByRandomValue()renders quickly without affecting UI responsiveness
I am seeking new strategies to tackle this issue effectively.
To view my project live, visit:
For further elaboration, check out my discussion on Google Groups: