使用 Javascript 暂停音频时消除可听见的爆裂声

Question

当您使用

audio.pause();

使用 javascript 暂停音频元素时，您可以听到爆裂声。

当波形在波形中间停止/切断时，而不是在过零处，就会发生这种情况。

我一直在寻找解决此问题的方法，并看到很多人建议像这样快速淡出：

var fadeAudio = setInterval(function () {
    if (audio.volume <= 0.0) {
        clearInterval(fadeAudio);
        audio.volume = 0;
    }
    if (audio.volume != 0.0){
        audio.volume -= 0.1;
    }
}, 200);

然而，这会带来更糟糕的最终结果，并且点击次数依次递减。

在 javascript 中停止音频而不产生任何爆裂声的最佳方法是什么

Answer 1

您可以使用一种称为音频淡入淡出的技术。这允许您在完全停止之前逐渐降低音量。然后尝试以对数方式降低音量

function fadeAudioSmoothly(audio) {
    let fadeInterval = 10; 
    let fadeStep = 0.05;
    let minVolume = 0.01   
    
    let fadeOut = setInterval(function() {
        audio.volume = Math.max(audio.volume - fadeStep, minVolume);
        
        if (audio.volume <= minVolume) {
            clearInterval(fadeOut);
            audio.volume = 0;
            audio.pause();
        }
    }, fadeInterval);
}