javascript - WEB AUDIO API 产生雨噼啪声

标签 javascript api web audio

我正在尝试在 javascript Web Audio API 中创建雨。
到目前为止,我已经为背景创建了一个低频隆隆声,并且我正在研究一个高频噪声,它将模仿雨滴的声音。然而,现在的高频噪声很像白噪声,太强而不能成为单个液滴。有谁知道如何将声音“分离”一点,使它听起来几乎像噼啪声。 Here是一个链接,如果你增加最后一个 slider (紫色),我希望高频噪音听起来像你能听到它。

到目前为止,这是我的 HTML 代码

<script>
let context= new AudioContext();
let context2= new AudioContext();

let lowpass = context.createBiquadFilter();
  lowpass.type = 'lowpass';
  //lowpass.Q.value = -7.01;
  lowpass.frequency.setValueAtTime(80, context2.currentTime);

let gain = new GainNode(context);
  gain.gain.value= 0.4;

let gain2 = new GainNode(context2);
  gain2.gain.value= 0.02;

let highpass=context2.createBiquadFilter();
  highpass.type = 'highpass';
  highpass.Q.value = 2;
  //highpass.frequency.setValueAtTime(6000, context2.currentTime);

let distortion = context2.createWaveShaper();

let delay = context2.createDelay(90.0);




function StartAudio() {context.resume()};
context.audioWorklet.addModule('basicnoise.js').then(() => {
  let myNoise = new AudioWorkletNode(context,'noise-generator');

  myNoise.connect(lowpass);
  lowpass.connect(gain);
  gain.connect(context.destination);
});

function StartAudio2() {context2.resume()};
context2.audioWorklet.addModule('basicnoise.js').then(() => {
  let myNoise2 = new AudioWorkletNode(context2,'noise-generator');

  myNoise2.connect(highpass);
  highpass.connect(gain2);
  gain2.connect(delay);
  delay.connect(context2.destination);
});

我一直在玩不同的功能,其中一些没有做太多,或者我只是没有正确使用它们,因为我对音频 API 场景非常陌生。感谢任何帮助,因为这是一个学校项目,我知道其他一些学生想要发出火声,也可以从噼啪声中受益!谢谢 !!

最佳答案

如果您将下雨视为一个物理过程,那么它基本上是大量的表面撞击声音(可能还有一些由气流产生的额外氛围)。当足够多的雨滴以足够快的速度撞击表面时,最终的结果就是噪音。

我认为一个逼真的雨水发生器会模拟许多单个水滴在距听者不同距离处撞击表面(这会导致衰减和过滤)。

也就是说,如果您想尝试“破解”您现在正在进行的噪声发生器,请尝试随机调制增益节点的增益值;在这里,发生器有 25% 的机会每 20 毫秒有效地静音(或者,考虑到计时器并不精确)。

setInterval(() => {
  gain.gain.value=(Math.random() < 0.75 ? 0.4 : 0);
}, 20)

关于javascript - WEB AUDIO API 产生雨噼啪声,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61482240/

相关文章:

android - Android 平板电脑的哪个 API 版本?

php - Laravel API 最佳实践

css - 如何更改网页客户端?

javascript - 为什么 ng-selected 调用函数 n 次

javascript - JavaScript 中的鼠标滚轮、滚轮和 DOMMouseScroll

django - 第一次生成移动应用程序的 key 时,如何与服务器共享它?

url - URL 路径中包含多个句点的 URL 是否有效?

linux - 使用命令行从谷歌下载图像

javascript - Phaser、Tileset 和 Tilemap 透明度

javascript - 使用 flask 发送文件并返回数据而不刷新 html 页面