本文将展示一个可用鼠标弹奏的虚拟键盘的代码以及可运行的演示示例。该键盘允许你在标准波形以及一种自定义波形之间进行切换,而且你可以使用键盘下方的音量滑块来控制主增益。这个示例使用了以下 Web API 接口:AudioContext、OscillatorNode、PeriodicWave 以及 GainNode。由于 OscillatorNode 继承自 AudioScheduledSourc...
本文将演示如何通过 ConstantSourceNode(恒定源节点)将多个参数关联在一起,以便它们共享同一个值,并且这个值可以通过设置ConstantSourceNode.offset 的值来进行更改。有时候,你可能希望将多个音频参数关联起来,以便共享同一个值,同时还能以某种方式进行更改。例如,你可能有一组振荡器,其中两个需要共享相同的可配置的音量,也可能对某些特定输入应用了一个滤波器,但...
本文将介绍如何创建一个音频工作线程处理器,并在 Web 音频应用程序中使用它。在 Web Audio API 首次引入浏览器时,它就包含了使用 JavaScript 代码创建自定义音频处理器的能力,这些处理器会被调用以执行实时音频操作。ScriptProcessorNode 的缺点在于它在主线程上运行,因此会阻塞其他正在进行的操作,直至它执行完毕。这尤其是对于像音频处理这种可能会非常耗费计算...
在编写创意代码时,并没有严格意义上的对错。只要你考虑到了安全性、性能和可访问性,就可以采用适合自己的风格。在本文中,我们将分享一些最佳实践 —— 使用 Web Audio API 的指导原则和知识技巧。加载音频 / 音频文件使用 Web Audio API 加载声音主要有四种方式,但具体应该选用哪种,可能会让人有些困惑。在处理文件时,你可以从 HTMLMediaElement(即 <a...
在本教程中,我们将介绍声音的创建和修改,以及定时和调度。我们将介绍样本加载、包络、滤波器、波表和调频。如果你熟悉这些术语,并且正在寻找 Web Audio API 应用程序的介绍,那么你就来对地方了。注意:你可以在 GitHub 的 webaudio-examples 仓库的 step sequencer 子目录中找到下面演示的源代码。你也可以查看 在线示例。
本文解释了 Web Audio API 功能背后的一些音频理论,以帮助你在设计应用程序的音频路由时做出明智的决策。如果你还不是一名音响工程师,本文将为你提供足够的背景知识,让你理解 Web Audio API 为何会如此运作。音频图(Audio graphs)Web Audio API 涉及在音频上下文(AudioContext)中处理音频操作,其设计旨在实现模块化的音频路由。每个音频节点执...
前言首先,祝大家国庆节快乐!但我想,A股有仓位的朋友应该会双倍快乐,而持有港股或中概股的朋友,估计会是三倍快乐吧!当然,如果不知道我在说什么的,那么我希望未来一段时间最好也不要知道,否则,很可能会沦为韭菜,而能懂的大概已经是老韭菜,被割习惯了,应该早已感觉不到疼痛了吧!
这篇文章将让我们了解如何开始使用 Web Audio API。本文会先简要介绍一些概念,然后研究一个简单的便携式音响示例,这个示例允许我们加载一个音频轨道,播放和暂停它,并改变它的音量和立体声像。Web Audio API 并不能取代 <audio> 媒体元素,而是对其进行补充,就像 <canvas> 与 <img> 元素并存一样。你的用例将决定你使用什么...
由于在开发 一起学笛子 这个网站的时候多处用到了 Web Audio API,因此,最近也阅读了不少的相关资料。奈何可能太小众了,相关博文比较少,哪怕是著名的 MDN 也没有健全的中文文档,为数不多的几篇也是貌似机译的,晦涩难懂,因此,不得不借助翻译工具,阅读英文文档,啃得着实有点头疼。本来想着针对前面的学习和使用心得写几篇笔记的,但考虑到后续还会对 Web Audio API 有更深入的使...
前言前面的文章说过,我在开发 一起学笛子 网站的时候,用的是邮箱验证的方式,这篇文章将详细介绍一下具体的实现过程。实际上,在 一起学笛子 这个网站中,有两处用到了邮箱验证,一个是注册,另一个是重置密码(忘记密码),而且这两个地方的用法是一模一样的,所以,我接下来还是以熟悉的注册场景举例说明。