Javascript WebAudio播放开始和结束时弹出的声音

每当我使用以下代码播放声音时：

// 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年音频播放设备的这种行为是如何被接受的。。。有没有办法减轻或消除这种情况

---

回答

下面的答案是一组很好的#s，用于将单击减少到基本上为零。我并不是说这对音色很好，但对声音来说是完美的

// 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);

这将创建一个向上渐变和向下渐变

使用a消除（或至少减少）咔哒声噪音

这里有一个很好的解释：

---

完整示例

基本示例取自：

播放
停止
var audioCtx=new（window.AudioContext | | window.webkitadiocontext）（）；
var源；
var play=document.querySelector（'.play'）；
var stop=document.querySelector（'.stop'）；
var gainNode=audioCtx.createGain（）；
函数getData（）{
source=audioCtx.createBufferSource（）；
var request=new XMLHttpRequest（）；
request.open（'GET'，'./sample.wav'，true）；
request.responseType='arraybuffer'；
request.onload=函数（）{
var audioData=请求。响应；
audioCtx.decodeAudioData（音频数据，功能（缓冲区）{
source.buffer=缓冲区；
source.connect（gainNode）；
gainNode.connect（audioCtx.destination）；
gainNode.gain.setValueAtTime（1，audioCtx.currentTime）；
},
职能（e）{
console.log（“音频数据解码错误”+e.err）；
});
}
request.send（）；
}
play.onclick=函数（）{
getData（）；
source.start（0）；
play.setAttribute（'disabled'，'disabled'）；
}
stop.onclick=函数（）{
gainNode.gain.setValueAtTime（gainNode.gain.value，audioCtx.currentTime）；
增益节点增益指数斜率时间（0.0001，audioCtx.currentTime+1）；
setTimeout（函数（）{
source.stop（）；
}, 1000)
play.removeAttribute（“禁用”）；
}

更新的文章链接：

<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>