我如何使用网络音频 api 发出滴答声（时钟）答案

【问题标题】：How can i make a ticking like noise (clock) using web audio api我如何使用网络音频 api 发出滴答声（时钟）
【发布时间】：2020-05-01 23:43:17
【问题描述】：

我从基本的白噪声开始，我想创建一个延迟，让它像时钟一样在每一秒之后开启和关闭。然后我将使用不同的过滤器调整噪声以改变噪声。

目前我有一个低通滤波器来改变噪音的频率声音。有人可以帮助我的下一步吗，如果我没有提供足够的信息，这是我第一次使用堆栈溢出。

这是我的代码：

html

<html>
  <input type="button" value="Start/Stop" id="StartStop">
  <input type="number"  min="1000" max="2000" value="1000" id="Filter">
  <script>
    let context= new AudioContext();
    StartStop.onclick = function() {
    if (context.state === 'suspended') context.resume();
    else context.suspend();
    }
    context.audioWorklet.addModule('mySound.js').then(() => {
      let myNoise = new AudioWorkletNode(context,'noise-generator');
      let myFilter = new AudioWorkletNode(context,'lowpass-filter',{parameterData:{frequency:1000}});
      Filter.oninput = function() {
        myFilter.parameters.get('frequency').value=this.value;
        FilterLabel.innerHTML = this.value ;
      }
      myNoise.connect(myFilter);
      myFilter.connect(context.destination);
    });
  </script>
</html>

javascopt

registerProcessor('noise-generator',class extends AudioWorkletProcessor {
  process(inputs, outputs) {
    for (let i=0;i<outputs[0][0].length;++i)  outputs[0][0][i]=2*Math.random()-1;
    return true;
  }
});

registerProcessor('gain-processor',class extends AudioWorkletProcessor {
  // Custom AudioParams can be defined with this static getter.
  static get parameterDescriptors() { return [{name:'gain',defaultValue:0.1}] }
//  constructor() { super() }  // The super constructor call is required
  process(inputs, outputs, parameters) {
    const input = inputs[0],output = outputs[0];
    for (let channel=0;channel<inputs[0].length;++channel)
      for (let i=0;i<input[channel].length;++i) output[channel][i] = input[channel][i] * parameters.gain[0];
    return true;
  }
});

registerProcessor('lowpass-filter', class extends AudioWorkletProcessor {
  static get parameterDescriptors() { return [{name:'frequency',defaultValue:1000,minValue:0}]; }
  constructor() {
    super();
    this.lastOut = 0;
  }
  process(inputs, outputs, parameters) {
    let input = inputs[0],output = outputs[0],coeff;
    let frequency = parameters.frequency;
    for (let channel = 0; channel < output.length; ++channel) {
      let inputChannel = input[channel],outputChannel = output[channel];
      coeff = 2 * Math.PI * frequency[0] / sampleRate;
      for (let i = 0; i < outputChannel.length; ++i) {
        outputChannel[i]=inputChannel[i] * coeff +(1-coeff)*this.lastOut;
        this.lastOut=outputChannel[i];
      }
    }
    return true;
  }
});

【问题讨论】：

标签： javascript html web-audio-api

【解决方案1】：

欢迎来到 StackOverflow。

首先，我会通过使用内置的GainNode 和BiquadFilterNode（或IIRFilterNode）而不是AudioWorkletNode 来实现这些来降低复杂性。

为了让噪音每秒关闭和打开，我会使用循环的 AudioBufferSourceNode 来创建常规的关闭/打开点击，并将其输入到 GainNode 的 gain AudioParam。像这样的东西（完全未经测试！）：

// Create buffer that's 1 sec long
let buffer = new AudioBuffer({sampleRate: context.sampleRate, length: context.sampleRate});
let data = buffer.getChannelData(0);
// Set the first few values of the buffer to 1.  You'll have to decide how many.
// This is basically a square wave with a short duty cycle.
data[0] = 1;

// Create the source that loops forever.
let tick = new AudioBufferSourceNode(context, {buffer: buffer});
tick.loop = true;

let gain = new GainNode(context, {gain: 0});
tick.connect(gain.gain);

// Start the source now.
tick.start();

// A Biquad filter instead of your worklet.  You'll have to choose the parameters.
let filt = new BiquadFilterNode(context);

// Connect up your noise source to the gain node, and connect the gain node
// to the destination:
myNoise.connect(filt).connect(gain).connect(context.destination);

tick 在短时间内为 1，这会添加到 GainNode 的增益中。因此，节点的增益为 1 位，然后为 0 其余时间。这适用于您的噪音，因此您会获得噪音输出一段时间然后静音。

我想这就是你想要的。

【讨论】：