Reagieren: AudioContext-Sound wird bei Mausraddrehung inkonsistent abgespielt [geschlossen] ⇐ JavaScript

[Anonymous]

Ich implementieren einen Pomodoro-Timer, bei dem durch Drehen eines Rads (z. B. eines physischen Knopfs) bei jedem Schritt des Mausrads ein kurzes mechanisches „Klick“-Geräusch erklingen soll.
Ich habe zwei Ansätze ausprobiert:

• Verwendung von AudioContext

Code: Select all

const ctx = new AudioContext();
let buffer;

async function load() {
const res = await fetch("/click.mp3");
const arr = await res.arrayBuffer();
buffer = await ctx.decodeAudioData(arr);
}

function play() {
const src = ctx.createBufferSource();
src.buffer = buffer;
src.connect(ctx.destination);
src.start(0);
}

Problem:
Der Ton wird „verschluckt“ und nach ein paar Radbewegungen stoppt die Wiedergabe.

• Verwendet new Audio()

Code: Select all

const audio = new Audio("/click.mp3");
audio.play();

Problem:
Der Ton wird verzögert abgespielt, sodass er nicht reagiert.
Mein Ziel
Bei jedem Wheel-Scroll-Ereignis sofort und zuverlässig einen sehr kurzen Ton abspielen.
Wie gehandhabt man die Schnellwiedergabe richtig, damit der Ton nicht abgedrosselt oder verzögert wird?