Signatur
Beschreibung
Die Eigenschaft maxDecibels eines AnalyserNode legt den höchsten Leistungswert (in Dezibel relativ zum Vollausschlag, dBFS) fest, der bei der Umrechnung der FFT-Analyse in vorzeichenlose Byte-Werte berücksichtigt wird. Zusammen mit minDecibels ergibt sich ein Skalierungsbereich: Werte bei oder oberhalb von maxDecibels werden zu 255, Werte bei oder unterhalb von minDecibels werden zu 0. Alles dazwischen wird linear abgebildet.
Der Standardwert ist -30. Die Eigenschaft ist lesbar und schreibbar. Sie wirkt sich nur auf getByteFrequencyData() aus. getFloatFrequencyData() liefert unabhängig davon die tatsächlichen Dezibelwerte, und die Zeitbereichsdaten (getByteTimeDomainData()/getFloatTimeDomainData()) sind davon gar nicht betroffen.
In der Praxis passt man maxDecibels an, damit Spektrum-Visualisierungen den verfügbaren Bereich gut ausnutzen: Wenn das Signal sehr laut ist und die Balken ständig am oberen Rand „kleben“, erhöht man den Wert (z. B. auf -10 oder 0). Bei leisen Quellen wie Mikrofonen senkt man ihn, damit die Ausschläge sichtbarer werden.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $wert | number | -30 | Beim Setzen: neuer Höchstwert in dBFS. Muss größer als minDecibels sein. |
Rückgabewert
-30).Beispiele
Standardwert lesen und neuen Bereich setzen
const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
console.log(analyser.maxDecibels); // Standard
console.log(analyser.minDecibels);
// Bereich für laute Musik erweitern
analyser.minDecibels = -90;
analyser.maxDecibels = -10;
console.log(analyser.maxDecibels);Spektrum-Visualisierung mit angepasstem Bereich
const audioCtx = new AudioContext();
const audio = document.querySelector('audio');
const source = audioCtx.createMediaElementSource(audio);
const analyser = new AnalyserNode(audioCtx, {
fftSize: 256,
minDecibels: -90,
maxDecibels: -10,
smoothingTimeConstant: 0.85
});
source.connect(analyser).connect(audioCtx.destination);
const canvas = document.querySelector('canvas');
const ctx2d = canvas.getContext('2d');
const data = new Uint8Array(analyser.frequencyBinCount);
const draw = () => {
requestAnimationFrame(draw);
analyser.getByteFrequencyData(data); // 0..255 zwischen min- und maxDecibels
ctx2d.fillStyle = '#000';
ctx2d.fillRect(0, 0, canvas.width, canvas.height);
const barWidth = canvas.width / data.length;
data.forEach((v, i) => {
const h = (v / 255) * canvas.height;
ctx2d.fillStyle = `rgb(${v + 50}, 80, 160)`;
ctx2d.fillRect(i * barWidth, canvas.height - h, barWidth - 1, h);
});
};
audio.addEventListener('play', () => { audioCtx.resume(); draw(); });Fehler bei ungültigem Bereich abfangen
const analyser = new AudioContext().createAnalyser();
try {
analyser.maxDecibels = -120; // kleiner als minDecibels (-100)
} catch (err) {
console.log(err.name);
}
console.log(analyser.maxDecibels); // unverändert// Wichtig · Fallstricke
- Ist der neue Wert kleiner oder gleich
minDecibels, wird eineIndexSizeError-DOMExceptiongeworfen. Beim Ändern beider Grenzen auf die Reihenfolge achten (erst die Grenze setzen, die den Bereich erweitert) oder beide gleich im Konstruktornew AnalyserNode(ctx, { minDecibels, maxDecibels })übergeben – dort wird ein ungültiger Bereich ebenfalls mit einer Exception abgelehnt. - Nur
getByteFrequencyData()wird beeinflusst. Wer mitgetFloatFrequencyData()arbeitet, muss selbst skalieren. - Der Wert ist in dBFS angegeben, also meist negativ.
0entspricht dem Vollausschlag. Positive Werte sind zulässig, in der Praxis aber selten sinnvoll. - Kompatibilität: Wird von allen modernen Browsern unterstützt. Einige sehr alte WebKit-Versionen kannten nur
webkitAudioContext. Browser erlauben einenAudioContextoft erst nach einer Nutzerinteraktion (Autoplay-Richtlinie), deshalbaudioCtx.resume()aufrufen.