Web音频播放声音在开始和结束时弹出 [英] WebAudio play sound pops at start and end

问题描述

每当我使用诸如

// binaryData = a wave file from a websocket
let ctx = new AudioContext();
ctx.decodeAudioData(binaryData, function(audioData){
   let source = ctx.createBufferSource();
   source.buffer = audioData;
   source.connect(ctx.destination);
   source.start(0);
});

在播放的每个剪辑之间都有一个非常可听见的咔嗒声或砰砰声.忘记了我正在尝试使用此系统播放实时音频的事实；为什么在播放的每个声音片段的开头和结尾都有小故障?我不了解2017年使用音频播放设备的行为如何……可以缓解或消除这种情况吗?

There is a very audible click or pop between each clip played. Forget the fact that I'm trying to play real-time audio with this system; why is it that there is a glitchy noise at the beginning and end of each sound clip played? I'm not understanding how this is acceptable behaviour in 2017 from an audio playing device... Is there any way to mitigate or eliminate this?

答案

按照以下答案进行操作，可以使用一组不错的#号来将点击次数减少到几乎没有.我并不是说这对音调很有用，但对声音而言却完美无瑕.

Following the answer below here is a good set of #s to use to reduce clicking to basically nothing. I'm not saying this works great for a tone, but its flawless for voice.

// start of clip
// clipPlayTime may be 0 or your scheduled play time
gain.setValueAtTime(0.01, clipPlayTime);
gain.exponentialRampToValueAtTime(1, clipPlayTime + 0.001);
// end of clip
gain.setValueAtTime(1, clipPlayTime + clipLength - 0.001);
gain.exponentialRampToValueAtTime(0.01, clipPlayTime + clipLength);

这将创建一个斜坡上升和一个斜坡下降.

This creates a ramp up and a ramp down.

推荐答案

使用 exponentialRampToValueAtTime() 来消除(或至少减少)咔嗒声.

Use a exponentialRampToValueAtTime() to remove (or atleast reduce) the clicking noise.

这是一个很好的解释:网络音频，丑陋的点击和人耳

Here's a great explanation: Web Audio, the ugly click and the human ear

完整示例

摘自以下示例的基本示例: https://developer.mozilla.org/zh-CN/docs/Web/API/BaseAudioContext/decodeAudioData

Base example taken from: https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/decodeAudioData

<button class="play">Play</button>
<button class="stop">Stop</button>

<script type="text/javascript">
var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
var source;
var play = document.querySelector('.play');
var stop = document.querySelector('.stop');
var gainNode = audioCtx.createGain();


function getData() {
    source = audioCtx.createBufferSource();
    var request = new XMLHttpRequest();
    request.open('GET', './sample.wav', true);
    request.responseType = 'arraybuffer';
    request.onload = function() {
        var audioData = request.response;

        audioCtx.decodeAudioData(audioData, function(buffer) {
                source.buffer = buffer;
                source.connect(gainNode);
                gainNode.connect(audioCtx.destination);
                gainNode.gain.setValueAtTime(1, audioCtx.currentTime);
            },

            function(e) {
                console.log("Error with decoding audio data" + e.err);
            });
    }
    request.send();
}


play.onclick = function() {
    getData();
    source.start(0);
    play.setAttribute('disabled', 'disabled');
}

stop.onclick = function() {
    gainNode.gain.setValueAtTime(gainNode.gain.value, audioCtx.currentTime);
    gainNode.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + 1);
    setTimeout(function() {
        source.stop();
    }, 1000)
    play.removeAttribute('disabled');
}
</script>

这篇关于Web音频播放声音在开始和结束时弹出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！