I am developing a voice recorder for android,
I need to implement a waveform visualizer like google voice recorder app.
I got few code samples from GitHub to implement it.
the issue here is the waveform is not smooth like google voice recorder app.
Google voice recorder – each lines of the waveform moves smoothly
Google Voice Recorder
My voice reocrder app – each lines are drawn at the same spot, which makes the waveform looks jittery.
My Voice Recordera
I got the below code from a open source project, i need to optimize it to draw the waveform smoothly.
private void drawRecordingWaveform(@NonNull Canvas canvas) {
if (recordingData.size() > 0) {
int recordingDataSize = recordingData.size();
int half = getMeasuredHeight() / 2;
int width = getWidth();
float px = AndroidUtils.dpToPx(4);
for (int i = 0; i < recordingDataSize; i++) {
float startX = (float) viewWidth - i * px;
float startY = half + recordingData.get(recordingData.size()-1 - i) + 1;
float stopX = (float) viewWidth - i * px;
float stopY = half - recordingData.get(recordingData.size()-1 - i) - 1;
canvas.drawLine(startX,startY,stopX,stopY, waveformPaint);
}
}
}
1
If the waveform appears jittery because the amplitude data is very variable, you can apply a smoothing filter to your data?
Instead of drawing individual lines for each point, consider using a Path to create a continuous curve.
private void drawRecordingWaveform(@NonNull Canvas canvas) {
if (recordingData.size() > 0) {
int recordingDataSize = recordingData.size();
int half = getMeasuredHeight() / 2;
int width = getWidth();
float px = AndroidUtils.dpToPx(4);
Path path = new Path();
// Start path at the first point
float startX = width;
float startY = half + recordingData.get(recordingDataSize - 1) + 1;
path.moveTo(startX, startY);
for (int i = 1; i < recordingDataSize; i++) {
startX -= px;
startY = half + recordingData.get(recordingDataSize - 1 - i) + 1;
path.lineTo(startX, startY);
}
canvas.drawPath(path, waveformPaint);
}
}