Skip to content

Performance: optimize AudioEngine getVisualizationData #237

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ysdede wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Performance: optimize AudioEngine getVisualizationData #237

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 22 additions & 17 deletions src/lib/audio/AudioEngine.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -868,33 +868,38 @@ export class AudioEngine implements IAudioEngine {
? outBuffer
: new Float32Array(outSize);
const samplesPerTarget = this.VIS_SUMMARY_SIZE / width;
const pos = this.visualizationSummaryPosition;

// Optimization: Pre-calculate bounds and sequential pointers to eliminate Math.floor/multiplication per sample
let outIdx = 0;
let startIdx = 0;
let floatEnd = samplesPerTarget;

for (let i = 0; i < width; i++) {
const rangeStart = i * samplesPerTarget;
const rangeEnd = (i + 1) * samplesPerTarget;
const endIdx = Math.floor(floatEnd);

let minVal = 0;
let maxVal = 0;
let first = true;

for (let s = Math.floor(rangeStart); s < Math.floor(rangeEnd); s++) {
// Use shadow buffer property to read linearly without modulo
const idx = (this.visualizationSummaryPosition + s) * 2;
const vMin = this.visualizationSummary[idx];
const vMax = this.visualizationSummary[idx + 1];

if (first) {
minVal = vMin;
maxVal = vMax;
first = false;
} else {

if (startIdx < endIdx) {
let idx = (pos + startIdx) * 2;
minVal = this.visualizationSummary[idx];
maxVal = this.visualizationSummary[idx + 1];

for (let s = startIdx + 1; s < endIdx; s++) {
idx += 2;
const vMin = this.visualizationSummary[idx];
const vMax = this.visualizationSummary[idx + 1];
if (vMin < minVal) minVal = vMin;
if (vMax > maxVal) maxVal = vMax;
}
}

subsampledBuffer[i * 2] = minVal;
subsampledBuffer[i * 2 + 1] = maxVal;
subsampledBuffer[outIdx++] = minVal;
subsampledBuffer[outIdx++] = maxVal;

startIdx = endIdx;
floatEnd += samplesPerTarget;
Comment on lines +876 to +902
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Apr 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
python - <<'PY'
import math
import re
from pathlib import Path

source = Path("src/lib/audio/AudioEngine.ts").read_text()
match = re.search(r'VIS_SUMMARY_SIZE\s*=\s*(\d+)', source)
if not match:
    raise SystemExit("VIS_SUMMARY_SIZE not found")

N = int(match.group(1))

def old_bounds(width: int):
    step = N / width
    return [math.floor((i + 1) * step) for i in range(width)]

def new_bounds(width: int):
    step = N / width
    bounds = []
    float_end = step
    for _ in range(width):
        bounds.append(math.floor(float_end))
        float_end += step
    return bounds

mismatches = []
for width in range(1, N + 1):
    old = old_bounds(width)
    new = new_bounds(width)
    if old != new:
        mismatches.append(width)
        if len(mismatches) <= 10:
            first = next(i for i, (o, n) in enumerate(zip(old, new)) if o != n)
            print(f"width={width} first_mismatch_bucket={first} old={old[first]} new={new[first]}")

print(f"mismatch_count={len(mismatches)}")
if mismatches:
    print("sample_mismatch_widths=", mismatches[:20])
PY

Repository: ysdede/keet

Length of output: 688

Use integer arithmetic for bucket boundary calculation to avoid floating-point drift.

The cumulative approach floatEnd += samplesPerTarget shifts bucket boundaries compared to the old per-iteration method Math.floor((i + 1) * step). Analysis shows 1,380 out of ~2,000 display widths produce different partitions, with mismatches occurring at boundary indices where floating-point rounding accumulates. For example, width=6 now ends bucket 5 at index 1999 instead of 2000; width=12 ends bucket 5 at 999 instead of 1000.

Replace the cumulative float calculation with integer-based bucket splitting to ensure partitions match the original algorithm and preserve visualization accuracy across all widths.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/lib/audio/AudioEngine.ts` around lines 876 - 902, The current loop in
AudioEngine.ts uses a cumulative floating-point boundary (floatEnd +=
samplesPerTarget) causing drift; replace that with integer arithmetic by
computing each bucket's end index via a per-iteration integer formula (e.g.,
endIdx = Math.floor((i + 1) * step) or using integer multiplication/division)
rather than accumulating floatEnd, and update usages of startIdx/endIdx (and
samplesPerTarget/step) accordingly so bucket partitions exactly match the
original Math.floor((i+1)*step) behavior and avoid rounding drift.

}
Comment on lines +876 to 903
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist bot Apr 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

While replacing multiplication with repeated addition (floatEnd += samplesPerTarget) is a valid micro-optimization, it can introduce floating-point precision errors that accumulate over the loop. This can lead to endIdx being off by one in some cases, potentially causing incorrect visualization rendering.

It's safer to recalculate the end bound in each iteration, similar to the original implementation. The performance impact on the outer loop is negligible compared to the gains in the inner loop, and it ensures correctness.

        for (let i = 0; i < width; i++) {
            const endIdx = Math.floor((i + 1) * samplesPerTarget);

            let minVal = 0;
            let maxVal = 0;

            if (startIdx < endIdx) {
                let idx = (pos + startIdx) * 2;
                minVal = this.visualizationSummary[idx];
                maxVal = this.visualizationSummary[idx + 1];

                for (let s = startIdx + 1; s < endIdx; s++) {
                    idx += 2;
                    const vMin = this.visualizationSummary[idx];
                    const vMax = this.visualizationSummary[idx + 1];
                    if (vMin < minVal) minVal = vMin;
                    if (vMax > maxVal) maxVal = vMax;
                }
            }

            subsampledBuffer[outIdx++] = minVal;
            subsampledBuffer[outIdx++] = maxVal;

            startIdx = endIdx;
        }

return subsampledBuffer;
}
Expand Down
Loading