Web Audio API 入门指南 - Dyte

WebRTC 的一个关键组成部分是音频传输，而 Web Audio API 是处理和合成 Web 应用程序中音频的核心工具。它允许开发者通过一组高级 JavaScript 对象和函数，创建复杂的音频处理和合成功能。Web Audio API 可广泛应用于各种音频场景，例如游戏中的音乐和音效、虚拟现实中的交互式音频等。

捕获和播放音频

Web Audio API 提供了多种方法，用于在 Web 应用程序中捕获和播放音频。以下是一个使用 MediaStream API 捕获音频并通过 Web Audio API 播放音频的示例：

首先，通过调用 navigator.mediaDevices.getUserMedia() 请求用户麦克风的访问权限：

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    // 流变量包含麦克风的音轨
  })
  .catch(err => {
    console.log('获取麦克风时出错', err);
  });

接下来，创建 Web Audio API 的 AudioContext 对象实例，并通过 audioCtx.createMediaStreamSource() 方法将 MediaStream 对象转换为 MediaStreamAudioSourceNode：

const audioCtx = new AudioContext();
const source = audioCtx.createMediaStreamSource(stream);

然后，将源节点连接到音频上下文的目标节点以播放音频：

source.connect(audioCtx.destination);

通过调用 start() 方法，音频上下文将开始从麦克风捕获音频并通过扬声器播放。

自动播放

不同浏览器对网络音频的自动播放有不同的处理策略，通常为了防止不必要的音频播放，浏览器会实施一定的限制：

Chrome、Edge、Firefox 和 Safari 实施了“静音自动播放”策略，仅当音频静音或用户与网站交互后，才允许自动播放音频。
Safari 要求用户在播放音频之前进行交互（例如点击）。
Firefox 提供选项允许用户禁用音频自动播放，需与网站交互后才可播放音频。

开发者可以使用 play() 方法启动音频播放，但前提是用户已与网站交互且音频未设置为自动播放。此外，Web Audio API 提供了 AudioContext.resume() 方法，用于恢复因浏览器暂停的音频播放。

为了确保音频自动播放功能正常，开发者需了解不同浏览器的策略，并提供清晰的用户界面以便用户控制音频播放。

编解码器

Web Audio API 支持多种音频编解码器，以下是一些常见的编解码器及其特点：

PCM：无损编解码器，数字化表示模拟音频信号，支持广泛。
MP3：有损编解码器，压缩比高，音质良好，但部分新浏览器不支持。
AAC：有损编解码器，音质高，低比特率，支持广泛。
Opus：有损编解码器，低延迟、高质量，适合网络传输，现代浏览器均支持。
WAV：无损编解码器，文件质量高但体积较大。
Ogg：开源容器格式，通常与 Vorbis 编解码器配合使用。
Vorbis：开源有损编解码器，高音质，低比特率。

通过选择广泛支持的编解码器，可以确保音频内容在不同设备和平台上的兼容性。

权限管理

处理音频权限时，可以使用 Permission API 和 MediaDevices.getUserMedia() 方法请求访问麦克风或摄像头的权限。以下是一个示例：

navigator.permissions.query({ name: 'microphone' })
  .then(permissionStatus => {
    permissionStatus.onchange = function () {
      if (permissionStatus.state === 'granted') {
        // 授予麦克风访问权限
      } else if (permissionStatus.state === 'denied') {
        // 拒绝麦克风访问权限
      }
    };
  });

使用 MediaDevices.getUserMedia() 方法处理权限请求和错误：

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    // 授予麦克风访问权限
  })
  .catch(error => {
    console.log('发生错误：', error);
  });

在调用这些方法前，建议检查浏览器是否支持相关 API。此外，向用户提供权限授予的明确说明，并确保在权限被拒绝时，网站功能不会中断。

音频处理

音频处理是通过信号处理技术操控音频信号的过程，广泛应用于音乐制作、音频效果、降噪和语音处理等领域。音频处理主要分为基于频率和基于时间的处理。

例如，可以通过增益节点控制音量，或通过滤波器节点修改音频的频率响应：

const gainNode = audioCtx.createGain();
source.connect(gainNode);
gainNode.connect(audioCtx.destination);

未来我们将介绍更多具体的音频处理用例。

示例应用

以下是 Web Audio API 的一些实际应用场景：

语音聊天和会议

通过捕获用户麦克风音频并实时处理，可构建基于浏览器的语音聊天和会议应用程序。

语音识别

处理麦克风输入的音频并进行分析，可实现语音控制界面。

音频可视化

生成音频输入数据并进行可视化，例如音乐播放器中的频谱图。

游戏音效

在浏览器游戏中创建交互式音频体验，包括背景音乐和即时音效生成。

音频编辑

提供强大的音频操作工具，用于录制、编辑和导出音频。

总结

Web Audio API 是一个功能强大的工具，适用于各种音频处理和合成场景。通过合理利用该 API，开发者可以为用户提供丰富的音频体验。未来，我们将继续探索更多与 Web Audio API 相关的高级用例和技术细节。

原文链接: https://dyte.io/blog/web-audio-api/