Web Audio API：向您的网页添加带宽友好的声音
Web Audio API允许开发人员使用 JavaScript 在浏览器中利用强大的音频处理技术，而无需插件。除了实时定义和处理基于文件的音频源外，它还可以根据各种波形合成声音；这对于经常在低带宽网络上使用的 Web 应用程序非常有用。 在本教程中，我将通过介绍一些更有用的方法向您介绍 Web Audio API。我将演示如何使用它来加载和播放 mp3 文件，以及如何向用户界面添加通知声音（演示）。 如果您喜欢这篇文章并且想更深入地探讨这个主题，我正在为 SitePoint Premium 制作一个由 5 部分组成的截屏视频系列，名为“您什么也没听到！” 我可以使用网络音频 API 做什么？ Learn to Code with JavaScript API 在生产中的用例多种多样，但一些最常见的用例包括： 实时音频处理，例如向用户的声音添加混响 为游戏生成音效 向用户界面添加通知声音 在本文中，我们最终将编写一些代码来实现第三个用例。浏览器支持良好吗？ Chrome、Edge、Firefox、Opera 和 Safari 支持网络音频。也就是说，在撰写本文时，Safari 认为此浏览器功能处于实验阶段，并且需要webkit前缀。 使用API Web Audio API 的入口点是一个名为AudioContext 的全局构造函数。实例化时，它提 华人海外澳洲号码数据 供了定义符合AudioNode接口的各种节点的方法。这些可以分为三组： 源节点 – 例如 MP3 源、合成源 效果节点 – 例如平移 目标节点 – 由AudioContext实例公开为destination；这代表用户的默认输出设备，例如扬声器或耳机 Learn to Code with JavaScript 这些节点可以使用connect方法以各种组合方式链接起来。以下是使用 Web Audio API 构建音频图的总体思路。 使用 AudioContext 构建音频图来源：MDN 下面是将 MP3 文件转换为 AudioBufferSourceNode 并AudioContext通过实例的节点播放它的示例destination： 生成音频 除了支持通过 录制音频之外AudioBufferSourceNode，Web Audio API 还提供了另一个名为OscillatorNode的源节点。
https://manchestermassage.net/wp-content/uploads/2024/02/photo_2024-02-14_09-44-29-8.jpg
它允许根据指定波形生成频率。但这实际上意味着什么呢？ 在高水平上，频率决定了以 Hz 为单位测量的声音的音高。频率越高，音调就越高。除了自定义波形之外，还OscillatorNode提供了一些预定义波形，可以通过实例的type属性指定： OscillatorNode 支持的内置波形资料来源：Omegatron 维基百科 'sine'– 听起来类似于口哨 'square'– 这通常用于与旧视频游戏机合成声音 'triangle'– 几乎是正弦波和方波的混合体 'sawtooth'– 产生强烈的嗡嗡声 Learn to Code with JavaScript 以下是如何使用 OscillatorNode 实时合成声音的示例： OscillatorNode 如何使 Web 受益？ 使用代码合成声音的能力将导致比使用文件小得多的有效负载。这对于在从 2G 到 4G 的各种带宽上保持应用程序的奇偶性非常重要。无法保证移动数据连接的速度，尤其是在新兴市场。 48% 使用 2G 或 3G 移动互联网的人无法察觉 2G 和 3G 服务之间的任何差异。 爱立信，不断变化的移动宽带格局 为了演示这一点。
页:
[1]