Web 音频 API 入门

Posted on by

WebRTC 的一个关键部分是音频传输，而 Web Audio API 则专注于在 Web 应用程序中处理和合成音频。它提供了一组高级 JavaScript 对象和函数，允许开发人员创建复杂的音频处理和合成。该 API 可用于构建各种音频应用，例如游戏中的音乐和音效、虚拟现实中的交互式音频等。

接下来，探讨 Web Audio API 背后的各种概念。

捕获和播放音频

Web Audio API 提供了多种方法在 Web 应用程序中捕获和播放音频。

以下是使用 MediaStream API 捕获音频并通过 Web Audio API 播放音频的示例：

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

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    // 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() 方法时，它将开始从麦克风捕获音频并通过扬声器播放：

audioCtx.start();

自动播放

浏览器对网络音频的自动播放处理方式各不相同，但总体来说，它们已实施策略以防止不必要的音频自动播放。这是为了避免用户因意外音频而感到惊讶，并防止滥用自动播放功能。

Chrome、Edge、Firefox 和 Safari 实施了“静音自动播放”策略，仅在音频静音或用户之前与网站有过交互时才允许自动播放音频。Safari 更进一步，要求用户必须先进行交互（例如点击）才能播放音频。Firefox 则允许用户选择音频的自动播放设置，默认情况下声音被禁用，用户需要与网站交互以允许音频播放。

开发者可以使用 play() 方法启动音频播放。该方法仅在用户与网站交互且音频未设置为自动播放时有效。

此外，Web Audio API 提供了 AudioContext.resume() 方法，用于在浏览器暂停音频播放后恢复播放。这个方法在用户已与网站交互但由于缺乏进一步的交互而导致音频暂停时非常有用。

总的来说，为了确保网络音频的自动播放按预期工作，了解不同浏览器的策略并提供清晰的用户界面以允许用户控制音频播放是非常重要的。

WebRTC 通话的特殊情况

除了上述自动播放限制外，在 WebRTC 通话中使用 Web 音频时，还有一些与 Web 音频相关的特殊情况：

  • 当选项卡位于后台时，Safari 不允许创建新的 <audio> 标签，因此无法在新参与者加入会议时创建新的音频标签。
  • WebRTC 的回声消除功能在 Chromium 上的 AudioContext API 中不适用。
  • 可以创建一个 <audio> 标签并将所有音频轨道添加到公共流，但每次添加新轨道时需要特别注意。
  • 在 Safari 中，必须再次调用 play() 方法。
  • 在 Chromium 中，必须重新设置 srcObject。

编解码器

Web Audio API 旨在与多种音频编解码器兼容。以下是一些常见的编解码器及其特点：

  • PCM：脉冲编码调制（PCM）是模拟音频信号的数字表示，属于无损编解码器，意味着压缩过程中不会损失音频质量。PCM 是网络上最基本且广泛支持的音频编解码器。
  • MP3：MPEG-1 音频第 3 层（MP3）是一种常用的有损音频编解码器，以高压缩比和良好的音质著称。大多数浏览器支持，但一些较新的浏览器可能不支持。
  • AAC：高级音频编码（AAC）是一种有损音频编解码器，以高音质和低比特率而闻名。大部分浏览器支持，但并非全部。
  • Opus：Opus 是为低延迟、高质量和低比特率音频而设计的有损编解码器，旨在在互联网上表现出色，所有现代浏览器均支持。
  • WAV：波形音频文件格式（WAV）是一种无损音频编解码器，受到广泛支持。通常用于存储高质量音频，但文件大小相对较大。
  • Ogg：Ogg 是一种开源数字多媒体容器格式，许多浏览器支持，常与 Vorbis 编解码器一起使用。
  • Vorbis：Vorbis 是一种开源且无专利的有损音频编解码器，以高音质和低比特率著称。大多数浏览器支持，但并非全部。

使用广泛支持的编解码器有助于确保音频内容能够在不同设备和平台上顺利播放。

权限管理

处理网络音频权限问题时，可以使用 Permission API 和 MediaDevices.getUserMedia() 方法请求访问麦克风或摄像头的权限。

以下是请求麦克风权限并处理各种权限状态的示例：

navigator.permissions.query({ name: 'microphone' }).then(function(permissionStatus) {
    permissionStatus.onchange = function() {
        if (permissionStatus.state === 'granted') {
            // 访问麦克风权限已授予
            // 创建音频上下文并访问麦克风
        } else if (permissionStatus.state === 'denied') {
            // 访问麦克风权限被拒绝
            // 处理权限被拒绝的情况
        }
    };
});

对于 MediaDevices.getUserMedia() 方法，可以使用 catch 方法处理错误并实现回退：

navigator.mediaDevices.getUserMedia({ audio: true })
    .then(function(stream) {
        // 访问麦克风权限已授予
        // 创建音频上下文并访问麦克风
    })
    .catch(function(error) {
        console.log('发生错误:', error);
        // 处理权限被拒绝或其他错误
    });

在调用 navigator.permissions.query() 和 navigator.mediaDevices.getUserMedia() 之前，还可以检查浏览器是否支持这些功能。

除了处理权限问题外，还需向用户提供明确的说明，指导如何授予权限，并确保在权限被拒绝或浏览器不支持 Web Audio API 的情况下，网站的其他功能不会受到影响。

音频处理

音频处理是利用信号处理技术对音频信号进行操纵，应用广泛，包括音乐制作、音频效果、降噪和语音处理等。

音频处理主要分为两种类型：基于频率的处理和基于时间的处理。

可以在音频处理链中添加不同的处理节点，例如控制音量的增益节点或调整音频频率响应的滤波器节点。

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

将来将详细介绍更具体的音频处理用例。

用例示例

以下是一些网络音频 API 的实际应用示例：

  1. 语音聊天和会议
    Web Audio API 允许从用户麦克风捕获音频并实时处理，用于构建浏览器内的语音聊天和会议应用，例如 Dyte。
  2. 语音识别
    Web Audio API 可用于处理来自用户麦克风的音频输入，并进行分析以识别语音，进而创建语音控制界面。
  3. 可视化
    Web Audio API 可以从音频输入生成数据，用于创建可视化效果。例如，音乐播放器应用可以生成当前播放歌曲的频谱可视化。
  4. 游戏中的音乐和音效
    在基于浏览器的游戏中，Web Audio API 可用于创建互动音频体验，开发者可以播放背景音乐和音效，并根据游戏事件动态生成音频。
  5. 音乐和音频编辑
    Web Audio API 提供强大的音频操作工具，包括过滤、混合和处理，使开发者能够创建基于 Web 的音频编辑工具，用于录制、编辑和导出音频。

结论

本文以 WebRTC 为例，介绍了网络音频传输的基础知识及相关概念。关于这一主题还有更多内容值得深入探讨，后续将会在未来几周内发布，敬请关注。

原文链接：Introduction to Web Audio API

Leave a Reply