Web Audio Api:如何添加工作卷积器?

2024-04-29

我想学习/做的事情:如何使用脉冲响应在下面的代码沙箱中设置一个简单的工作卷积器(混响)。我认为这与设置过滤器类似,但事情似乎完全不同。

我尝试过的:与所有新技术一样,事物变化很快,因此很难知道哪些实施是正确的,哪些实施是错误的。我查看了无数的 WebAudio Api Convolver 教程,其中许多都是旧的,其他的也可以工作,但过于“臃肿”,很难理解正在发生的事情。我尝试实现 mozilla 文档中的一些示例:

我已经看过了:https://developer.mozilla.org/en-US/docs/Web/API/ConvolverNode/buffer https://developer.mozilla.org/en-US/docs/Web/API/ConvolverNode/buffer

我的问题:如何在下面的上下文中正确集成卷积器?正如你所看到的,我尝试过但无法弄清楚这一点。

 window.addEventListener('load', init, false);

function init() {
    setupWebAudio();
}

function setupWebAudio() {
    var audio = document.getElementById('music');
    var context = new AudioContext();
    var source = context.createMediaElementSource(audio);
    var filter = context.createBiquadFilter();
    var convolver = context.createConvolver();
    var inpulseRes = "hall.mp3";

    var hallBuffer = inpulseRes;
    soundSource = context.createBufferSource();
    soundSource.buffer = hallBuffer;
    convolver.buffer = hallBuffer;

    filter.type = 'lowpass';
    filter.frequency.value = 400;

var theParent = document.getElementById("test");
    theParent.addEventListener("mousedown", doSomething, false);
    function doSomething(e) {
        if (e.target !== e.currentTarget) {
            if(e.target == theParent.children[0]){
                filter.frequency.value += 200;
            }
            else if(e.target == theParent.children[1]){
                 filter.frequency.value -= 200;
            }
            else if(e.target == theParent.children[2]){
                 filter.type = 'highpass';
            }               
        }
        e.stopPropagation();
    }

    source.connect(filter);
    source.connect(convolver);
    filter.connect(context.destination);
    audio.play();
}

这是一个非常开放式的问题;你尝试过哪些方法没有成功,或者你错过了“脉冲响应”应该是什么?如果是后者,搜索“脉冲响应文件”,您会发现大量可以使用的免费文件。您还可以在对数衰减曲线上生成噪声到缓冲区中,并且您将获得基本的混响效果。创建脉冲响应缓冲区的基本方法:

function impulseResponse( duration, decay, reverse ) {
    var sampleRate = audioContext.sampleRate;
    var length = sampleRate * duration;
    var impulse = audioContext.createBuffer(2, length, sampleRate);
    var impulseL = impulse.getChannelData(0);
    var impulseR = impulse.getChannelData(1);

    if (!decay)
        decay = 2.0;
    for (var i = 0; i < length; i++){
      var n = reverse ? length - i : i;
      impulseL[i] = (Math.random() * 2 - 1) * Math.pow(1 - n / length, decay);
      impulseR[i] = (Math.random() * 2 - 1) * Math.pow(1 - n / length, decay);
    }
    return impulse;
}

您的代码有 BufferSourceNodeand卷积器指向同一个缓冲区,这几乎肯定是错误的;您通常不会使用缓冲源播放脉冲响应文件,并且通常不会使用普通声音文件作为脉冲响应。 (如果脉冲响应的作用不清楚,请在维基百科上查找卷积。)您需要执行以下操作:

function setupWebAudio() {
    var audio = document.getElementById('music');
    var context = new AudioContext();
    var source = context.createMediaElementSource(audio);
    var convolver = context.createConvolver();
    var irRRequest = new XMLHttpRequest();
    irRRequest.open("GET", "hall.mp3", true);
    irRRequest.responseType = "arraybuffer";
    irRRequest.onload = function() {
        context.decodeAudioData( irRRequest.response, 
            function(buffer) { convolver.buffer = buffer; } );
    }
    irRRequest.send();
// note the above is async; when the buffer is loaded, it will take effect, but in the meantime, the sound will be unaffected.

    source.connect( convolver );
    convolver.connect( context.destination );
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Web Audio Api:如何添加工作卷积器? 的相关文章

  • 暂停除了已激活的玩家之外的所有其他玩家。

    我有这个插件 它可以将不同的样式应用于 html5
  • 使用 jquery 远程图像属性

    目前我正在尝试获取远程图像宽度 高度 我正在开发一个链接共享模块 就像当你在 Facebook 上粘贴链接时 你可以看到标题 描述和图像 所以我尝试使用 php getimagesize 来获取图像宽度 高度 但速度非常慢 所以我正在考虑使
  • 如何使用 JavaScript 创建链接?

    我有一个标题字符串和一个链接字符串 我不知道如何将两者放在一起以使用 JavaScript 在页面上创建链接 任何帮助表示赞赏 我试图解决这个问题的原因是因为我有一个 RSS 源并且有一个标题和 URL 列表 我想将标题链接到 URL 以使
  • IE从哪个版本开始支持Object.create(null)?

    您可以通过多种方式在 JavaScript 中创建对象 creates an object which makes the Object prototype of data var data1 new Object Object liter
  • 如何在react-bootstrap中禁用表单提交的

    在下面的代码片段中 我有许多文本类型的输入表单 如果用户点击 我似乎会得到相同的合成事件 就像他们按下提交按钮一样 我想忽略作为表单提交 只允许一个人按下 提交 按钮 我删除了一些表单组以减少示例 在所有情况下 按钮或 ENTER 键 e
  • Chrome 中的性能问题

    我目前正在从事一个相对较大的项目 使用 AngularJs 构建 应用程序的一部分是一个表单 您可以向其中添加任意数量的页面 不幸的是 添加了很多不必要的垃圾 即表示表单模型的对象可能会变得非常大 在某些时候 Chrome 基本上无法处理它
  • Snap.svg - 停止在可悬停元素的子元素上重新触发悬停事件

    对于一个项目 我使用的 SVG 形状由背景多边形和背景多边形上方的一些文本 我已将其转换为路径 组成 我正在使用 Snap svg 为我的形状设置动画 当我将鼠标悬停在多边形上时 形状应该缩放到特定尺寸 包括其中的所有内容 鼠标移开时 形状
  • 隐藏 Div 的父级

    我只是想隐藏父divcomments section div class content content green div div div 我试过这个 document getElementById comments section pa
  • React-Redux:state.setIn() 和 state.set() 有什么区别?

    我见过使用setIn and set 在一些react redux代码中 state setIn state set 我在这里找到了一些文档https facebook github io immutable js https facebo
  • Chrome 扩展程序在代码中使用 client_secret

    我正在开发具有自己的 oAuth 授权的 Google Chrome 扩展 当然 我必须使用 client id 和 client secret 作为请求令牌 有什么办法可以向用户隐藏这些数据吗 由于此请求只是 javascript 源代码
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • 页面上使用 HTML Editor Extender 进行回发会导致 IE11 中出现 JavaScript 错误

    我已将 HTML 编辑器扩展程序添加到我正在处理的页面中 现在每当我在页面上发回帖子时 都会收到以下 Javascript 错误 JavaScript 运行时错误 参数无效 之后什么也没有发生 这在 IE10 或更低版本以及我所知道的所有其
  • Javascript 假值(null、未定义、false、空字符串:“”或 '' 和 0)和比较(==)运算符 [重复]

    这个问题在这里已经有答案了 当我使用任何一个值时 null undefined false 0 in a if陈述 它总是被评估为谬误 false 另外 这些值的否定 null undefined false 0 in a if语句总是被评
  • Firebase 函数 onWrite 未被调用

    我正在尝试使用 Firebase 函数实现一个触发器 该触发器会复制数据库中的一些数据 我想观看所有添加的内容votes user vote 结构为 我尝试的代码是 const functions require firebase func
  • 从数据库检查数据的异步解决方案各种循环子句

    我想要做的是异步检查数据库并从中获取结果 在我的应用程序中我试图实现Asynchronously将此步骤解决为 从数据库中检查手机号码JsonArray循环子句的种类 Create JsonArray从结果 打印创建的数组 我学到了足够多的
  • 对于只触及我的工作表的 Google 表格脚本,收到“此应用程序未经验证”

    我正在编写一个 Google Sheets 脚本 我只想访问与 gs 文件关联的同一电子表格中的数据 似乎我应该有权在自己的电子表格中运行脚本 但是每当我运行一个函数时 我都会得到一个This app isn t verified信息 我该
  • Javascript - 水波纹效果

    我需要 JS 上的脚本 它将以 水波纹 样式更改 images html 抱歉 6MB GIF 文件 http fcuunited ru temp listening2 gif http fcunited ru temp listening
  • 带参数的事件监听器

    我想将参数传递给 JavaScript 中的事件侦听器 我已经找到了解决方案 但我无法理解它们为什么或如何工作以及为什么其他解决方案不起作用 我有 C C 背景 但是 Javascript 函数的执行有很大不同 您能否帮助我理解以下示例如何
  • Javascript Replace() 和 $1 问题

    我正在尝试创建一个脚本来搜索文本中的模式并在它找到的字符串周围包裹一个标签 shop attributes td each function this html function i html return html replace E 0
  • 在 CKEditor 中设置字体大小和字体系列

    我正在使用 ckeditor 我想问一下这个插件如何设置font family和font size 我尝试过使用 CKEDITOR config font defaultLabel Arial CKEDITOR config fontSiz

随机推荐

  • 在 SQL Server 中以编程方式创建数据库

    如何以编程方式创建数据库以及执行此操作所需的最少信息是什么 Please没有 SQL Server 管理对象 API 建议 您可以使用SQL Server 管理对象 API http msdn microsoft com en us lib
  • jQuery UI:DatePicker,仅选择今天到过去的日期

    我在 jQuery UI 核心中使用 datePicker 我需要一个只能选择从过去一直到今天的日期的日期选择器 是否有捷径可寻 请注意 我使用的是 UI 核心 而不是 DatePicker 插件 我的 jQuery 调用 function
  • Java线程的等待和通知方法

    我正在学习 OCJP 现在我在 线程 章节 我有一些关于等待和通知方法的问题 我想我明白这里发生了什么 但我只是想确保我走在正确的道路上 我编写了这段代码作为示例 package threads public class Main stat
  • SQL Server 2008:在没有任何锁的情况下出现死锁

    我目前正在 SQL Server 2008 数据库上进行一些实验 更具体地说 我有一个 JDBC 应用程序 它使用数百个并发线程来执行数千个任务 每个任务都在数据库上运行以下查询 UPDATE from Table A where rowI
  • MVC3 BeginForm 不渲染
    标签

    我的视图存在问题 未呈现开始和结束 FORM 标签 下面是我的控制器的代码 HttpGet Authorize public ActionResult Edit long id Position position positionRepos
  • C++中while(x--)是什么意思

    我刚刚开始竞争性编程 并一直使用如下循环来定义大多数练习问题中的测试用例数量 for int i 1 i lt t i 然而 我见过人们使用 while 循环 它只有条件 t 运行起来也完全没问题 有人可以向我解释这种情况实际上是如何运作的
  • 无法解析 Android 资源字符串

    我正在学习 Android 我遇到了一个我认为很奇怪的问题 在 res values strings xml 我有
  • mariadb: jdbc: setTimestamp 截断毫秒

    在我看来 如果我使用准备好的语句将它们插入到我的 mariadb 中 毫秒就会被截断 谷歌搜索并不成功 我发现了很多类似的问题 这些问题要么已解决 要么不适用 但很难相信我是唯一一个遇到这个问题的人 所以我想在向 mariadb 提交错误之
  • 分析 Cortex-M7 (stm32f7) 上的 memcpy 性能

    简洁版本 从 GNU ARM 工具链中提取的 memcpy 的性能指标在 ARM Cortex M7 上对于不同的副本大小似乎差异很大 即使复制数据的代码始终保持不变 这可能是什么原因造成的 长版 我是使用 GNU Arm 工具链 11 2
  • 重写 openshift maven 脚本 (jenkins gear)

    我在 Openshift 上有 Jenkins 实例 我已启用 Jenkins 构建我的 Openshift 应用程序 这里是 Jenkins shell 脚本的一部分并记录它们生成的内容 Sync any libraries rsync
  • 如何将文本放置在 Font Awesome 图标上?

    有没有办法垂直对齐堆叠在 Font Awesome 图标顶部的文本 我想将这个堆栈中的 1 向上移动 以便它位于奖杯图标的杯子中央 我尝试在封装 1 的范围中添加底部边距和底部填充 但都没有成功 有没有一种简单的方法可以完成我想要完成的任务
  • 循环中的 Google 地图地理编码和标记

    我在这里完全困惑了 我有一个对象列表 每个对象都包含一个位置 我使用 google maps geocoder 查找这个位置 然后在地图上为该位置放置一个标记 但由于某种原因 只出现一个标记 我想这与我在其他线程中看到的闭包问题有关 但我似
  • 如何清除 asyncfileupload 的文本框值..?

    有一个按钮 MyButton 单击此按钮时 会出现一个 modalpopup MyPopup 其中包含一个 asyncfileupload ajax 控件 确定 按钮和 取消 按钮 asyncfileupload 功能的浏览功能工作正常 没
  • 从已知视频 ID 中获取 YouTube 视频标题

    我想在视频 ID 已知时仅使用 JavaScript 获取 YouTube 视频标题 是否可以 是的 可以使用 Javascript 和 JSON https developers google com youtube 2 0 develo
  • 如何在 uiview 中添加边框?

    我有一个 uiview 我想在这个 UIVIew 旁边添加一个边框 大约占 UIView 的 75 任何人都可以帮忙解决这个问题吗 我可以找到将边界绘制到外面的解决方案 好吧 不只是可以设置一个小属性来将边框与外部对齐 它向内部对齐绘制 因
  • d3.js v4 中的 d3.locale(),本地化

    我正在使用 d3 js 制作图表 现在想将其更新到 v4 结果发现d3 locale 由于所有日期格式的翻译都采用不同的语言 因此不再起作用 我该如何解决这个问题 我正在挖掘论坛 但对于 v4 我并没有真正找到它 你必须使用d3 timeF
  • Fortran 函数:指针作为实际参数,目标作为形式

    我正在尝试破译 Fortran 代码 它将指向函数的指针作为实际参数传递 而形式参数则是目标 它在主程序中定义并分配一个 globalDATA 类型的指针 然后调用一个传递该指针的函数 module dataGLOBAL type glob
  • 使用 Jenkins 作业将 Helm 图表部署到 Kubernetes

    我想创建一个 Jenkins 作业 将 Helm Chart 部署到 Kubernetes 集群中 Helm 图表存储在 Bitbucket 存储库中 pipeline agent any stages stage Download Hel
  • 如何快速计算集合的所有交集的包含顺序

    这是后续如何在python中快速获取集合的所有交集 https stackoverflow com questions 37622153 我有一个整数有限集合 Ai 的有限集合 A A1 Ak 我想计算Python下列 A 子集的所有交集
  • Web Audio Api:如何添加工作卷积器?

    我想学习 做的事情 如何使用脉冲响应在下面的代码沙箱中设置一个简单的工作卷积器 混响 我认为这与设置过滤器类似 但事情似乎完全不同 我尝试过的 与所有新技术一样 事物变化很快 因此很难知道哪些实施是正确的 哪些实施是错误的 我查看了无数的