网络音频“点击"即使使用exponentialRampToValueAtTime也能发出声音 [英] Web audio "Click" sound even when using exponentialRampToValueAtTime

问题描述

我试图避免在停止振荡器时出现难看的咔嗒"声，因此我决定尝试使用 exponentialRampToValueAtTime 进行一些淡出.像这样:

I am trying to avoid having the ugly "click" sound when stopping an oscillator, so I decided to try some fade-outs with exponentialRampToValueAtTime. Like this:

var playButton = document.getElementById('play');
var stopButton = document.getElementById('stop');

var context = new AudioContext();
var gainNode = context.createGain();
var oscillator =  context.createOscillator();

gainNode.connect(context.destination);
oscillator.connect(gainNode);
gainNode.gain.setValueAtTime(1, context.currentTime);
oscillator.start();
gainNode.gain.exponentialRampToValueAtTime(0.0001, context.currentTime + 1);

这很好用，没有咔哒"声，而且斜坡下降很平滑.但是，一旦我使用按钮和事件侦听器执行此操作，丑陋的点击就会回来，并且以某种方式下降会更加残酷

This works well, there's no "click" sound and the ramp down is smooth. However, as soon as I do this using buttons and event listeners, the ugly click comes back and somehow the ramp down is more brute

顺便说一句，请在按停止"后等待 1 秒钟，然后再按播放"或发生丑陋的事情:)

var playButton = document.getElementById('play');
var stopButton = document.getElementById('stop');

var context = new AudioContext();
var gainNode = context.createGain();
var oscillator;

gainNode.connect(context.destination);


playButton.addEventListener('click', function() {
  oscillator = context.createOscillator();
  oscillator.connect(gainNode);
  gainNode.gain.setValueAtTime(1, context.currentTime);
  oscillator.start();
}, false);

stopButton.addEventListener('click', function() {
  gainNode.gain.exponentialRampToValueAtTime(0.0001, context.currentTime + 1);
  setTimeout(function(){
  	oscillator.stop();
  }, 1000)
}, false);

<button id="play">play</button>
<button id="stop">stop</button>

我显然在这里遗漏了一些理论.除了侦听器之外，代码非常相似，并且两个片段的结果在质量上非常不同.你能解释一下这种差异的来源吗?

I'm clearly missing some theory here. The code is very similar except for the listeners and the outcome of both snippets is very different in quality. Can you please explain where that difference comes from?

有没有办法在使用按钮/侦听器时实现第一个片段质量?

Is there a way to achieve the first snippet quality while using buttons/listeners?

谢谢！

推荐答案

问题是斜坡是根据先前计划的值完成的，在本例中是按下播放按钮时.如果您在安排斜坡之前再次设置该值，您将再次获得平滑过渡！

The problem is that the ramp is done from the previously scheduled value, which in this case is when you pressed the play button. If you set the value once more before scheduling the ramp you'll get a smooth transition again!

var playButton = document.getElementById('play');
var stopButton = document.getElementById('stop');

var context = new AudioContext();
var gainNode = context.createGain();
var oscillator;

gainNode.connect(context.destination);


playButton.addEventListener('click', function() {
  oscillator = context.createOscillator();
  oscillator.connect(gainNode);
  gainNode.gain.setValueAtTime(1, context.currentTime);
  oscillator.start();
}, false);

stopButton.addEventListener('click', function() {
  gainNode.gain.setValueAtTime(gainNode.gain.value, context.currentTime);
  gainNode.gain.exponentialRampToValueAtTime(0.0001, context.currentTime + 1);
  setTimeout(function(){
  	oscillator.stop();
  }, 1000)
}, false);

<button id="play">play</button>
<button id="stop">stop</button>

这篇关于网络音频“点击"即使使用exponentialRampToValueAtTime也能发出声音的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！