Início / coding / Perguntas / 79353552
Accepted
Basj
Asked: 2025-01-14 06:13:35 +0800 CST

O fadeout de áudio usando exponentialRampToValueAtTime no Chrome ou Firefox não é confiável

  • 772

O código a seguir respeita a documentação do MDN , mas resulta em um silenciamento abrupto em vez de um fadeout de 2 segundos:

const audioContext = new window.AudioContext();
let oscillator;
let gainNode;
document.getElementById("playSweep").addEventListener("click", () => {
    oscillator = audioContext.createOscillator();
    oscillator.type = "sine"; // Sine wave
    oscillator.frequency = 200;
    gainNode = audioContext.createGain();
    gainNode.gain.setValueAtTime(1, audioContext.currentTime);
    oscillator.connect(gainNode);
    gainNode.connect(audioContext.destination);
    oscillator.start();
});
document.getElementById("fadeOut").addEventListener("click", () => {
    gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 2);
});
document.getElementById("fadeOut2").addEventListener("click", () => {
    gainNode.gain.linearRampToValueAtTime(0.001, audioContext.currentTime + 2);
});
<button id="playSweep">Play Frequency Sweep</button>
<button id="fadeOut">Exp Fade Out</button>
<button id="fadeOut2">Lin Fade Out</button>

Mesmo com a versão linear, podemos ouvir um clique, não é um fadeout limpo.

Como fazer um fadeout adequado na JS Web Audio API?

javascript

1 respostas

  1. Best Answer

    Você (aparentemente) precisa ter um evento ativo no AudioParamao chamar esses métodos para que eles façam a transição graciosamente. Você pode conseguir isso chamando setValueAtTime()logo antes de chamar qualquer um dos métodos.
    Observe que uma terceira maneira de fade-out, que é próxima o suficiente exponentialRampToValueAtTime()e permite ir a zero, é usar o parâmetro de constante de tempo desetTargetAtTime(target, startTime, timeConstant)

    const audioContext = new window.AudioContext();
let oscillator;
let gainNode;
document.getElementById("playSweep").addEventListener("click", () => {
    oscillator = audioContext.createOscillator();
    oscillator.type = "sine"; // Sine wave
    oscillator.frequency = 200;
    gainNode = audioContext.createGain();
    oscillator.connect(gainNode);
    gainNode.connect(audioContext.destination);
    oscillator.start();
});
document.getElementById("fadeOut").addEventListener("click", () => {
    gainNode.gain.setValueAtTime(1, audioContext.currentTime);
    gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 2);
    oscillator.stop(audioContext.currentTime + 2);
});
document.getElementById("fadeOut2").addEventListener("click", () => {
    gainNode.gain.setValueAtTime(1, audioContext.currentTime);
    gainNode.gain.linearRampToValueAtTime(0, audioContext.currentTime + 2);
    oscillator?.stop(audioContext.currentTime + 2);
});
document.getElementById("fadeOut3").addEventListener("click", () => {
    gainNode.gain.setTargetAtTime(0, audioContext.currentTime, 0.5);
    oscillator?.stop(audioContext.currentTime + 3);
});
    <button id="playSweep">Play Frequency Sweep</button>
<button id="fadeOut">Exp Fade Out</button>
<button id="fadeOut2">Lin Fade Out</button>
<button id="fadeOut3">Time constant Fade Out</button>

    • 1

relate perguntas