Web音频API简介-DEV365 开发者社区

WebRTC的关键部分是音频的传输。 Web Audio API全都是在Web应用程序中处理和综合音频。它允许开发人员使用一组高级JavaScript对象和功能创建复杂的音频处理和合成。 API可用于创建广泛的音频应用程序，例如游戏中的音乐和声音效果，虚拟现实中的交互式音频等等。

让我们看一下Web Audio API背后的各种概念。

捕获和播放音频

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

这是如何使用MediaStream API捕获音频并使用Web Audio API播放的示例：

首先，我们需要请求许可，通过调用 navigator.mediadevices.getusermedia（）。
来访问用户的麦克风。

    navigator.mediaDevices.getUserMedia({audio: true})
      .then(stream => {
        // The stream variable contains the audio track from the microphone
      })
      .catch(err => {
        console.log('Error getting microphone', err);
      });

接下来，我们创建一个Web音频API的实例 AudioContext 对象。然后，我们可以通过将MediaStream对象传递到 audioCtx.createMediaStreamSource() 方法来创建一个MediaStreamAudioSourceNode。

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

有源后，我们就可以将源节点连接到音频上下文的目标节点以播放音频。

    source.connect(audioCtx.destination);

现在，当我们在音频上下文上调用start()方法时，它将开始从麦克风中捕获音频并通过扬声器播放。

    audioCtx.start();

自动播放

浏览器以不同的方式处理Web音频自动播放，但是通常，他们实施了策略，以防止不必要的音频自动播放。这是为了保护用户免受不需要的音频的惊讶，并防止滥用自动播放功能。

Chrome，Edge，Firefox和Safari已实施了“静音自动播放”策略，该策略仅在音频静音时才允许音频自动播放，或者如果用户以前已经与网站进行了交互。
Safari在允许音频播放之前需要用户互动（click）进一步进行。
Firefox可以选择使用默认情况下的声音播放设置音频自动播放，并且用户需要与网站进行交互以允许音频播放。

开发人员可以使用 play() 方法来启动音频播放。此方法仅在用户与网站进行交互以及未设置音频自动播放时才有效。

此外，Web Audio API还提供 AudioContext.resume() 方法，该方法可在浏览器悬挂后恢复音频播放。此方法对于用户与网站进行交互的情况很有用，但是由于缺乏用户互动，音频已暂停。

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

webrtc呼叫怪癖：
除了上面列出的自动播放限制外，在WebRTC调用中使用它时，还有一些与Web音频相关的特定怪癖。

Safari Will Will 不是让您在标签处于后台时创建新的<audio>标签，因此，当新参与者加入您的会议时，您将无法创建新的音频标签。
WEBRTC回声取消不适合铬上的AudioContext API。
您可以创建一个<audio>标签，并将所有Audiotracks添加到一个公共流中，但是每次添加新曲目时。
- 在Safari中，您必须再次致电play()。
- 在铬中，您必须再次设置srcObject。

编解码器

Web Audio API旨在与各种音频编解码器一起使用。 Web浏览器支持的一些最常见的编解码器包括：

PCM：脉冲代码调制（PCM）是模拟音频信号的数字表示。这是一个无损的编解码器，这意味着在压缩过程中不会失去任何音频质量。 PCM是网络上最基本和广泛支持的音频编解码器。
mp3：MPEG-1音频第3层（MP3）是一种广泛使用的有损音频编解码器，以其高压比和良好的音频质量而闻名。它得到了大多数Web浏览器的支持，但不受一些最近的网络浏览器的支持。
AAC：高级音频编码（AAC）是一种有损音频编解码器，以其高音频质量和低比特率而闻名。它得到了大多数Web浏览器的支持，但不是全部。
opus：Opus是一种有损的编解码器，专为低延迟，高质量和低位型音频而设计，它的设计旨在在互联网上运行良好，它得到了所有现代浏览器的支持。
wav：波形音频文件格式（WAV）是一个无损音频编解码器，由Web浏览器广泛支持。它通常用于存储高质量的音频文件，但文件大小比其他编解码器更大。
OGG：OGG是用于数字多媒体的开源容器格式，它得到了大多数Web浏览器的支持，并且通常用于Vorbis编解码器。
vorbis：Vorbis是开源和无申请有损音频编解码器，以其高音频质量和低比特率而闻名。它得到了大多数Web浏览器的支持，但不是全部。

通过使用由Web浏览器广泛支持的编解码器，将确保可以在不同的设备和平台上播放音频内容。

权限

要处理各种Web音频权限问题，您可以使用 Permission api和 MediaDevices.getUserMedia() 方法要求访问麦克风或相机的权限。

这是如何请求麦克风许可并处理各种许可状态的一个示例：

    navigator.permissions.query({name:'microphone'})
        .then(function(permissionStatus) {
            permissionStatus.onchange = function() {
                if (permissionStatus.state === 'granted') {
                    // Access to microphone granted
                    // create an audio context and access microphone
                } else if (permissionStatus.state === 'denied') {
                    // Access to microphone denied
                    // handle denied permission
                }
            };
        });

对于 MediaDevices.getUserMedia() 方法，您可以使用 catch 方法来处理错误并实现后备：

    navigator.mediaDevices.getUserMedia({ audio: true })
        .then(function(stream) {
            // Access to microphone granted
            // create an audio context and access microphone
        })
        .catch(function(error) {
            console.log('Error occurred:', error);
            // handle denied permission or other errors
        });

您还可以检查 navigator.permissions.query() 和 navigator.mediaDevices.getUserMedia() 之前的浏览器支持。

除了处理许可问题外，重要的是向用户提供有关如何授予许可并确保如果拒绝许可或不支持Web音频API的明确说明浏览器。

音频处理

音频处理是使用信号处理对音频信号的操纵。它用于多种应用，例如音乐制作，音频效果，降低噪音，语音处理等。

我们可以在音频，基于频率和时间基础上进行两种类型的处理。

我们可以在音频处理图中添加处理节点，例如增益节点来控制音量或过滤节点以更改音频的频率响应。

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

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

例子

这是Web音频API用例的一些示例：

语音聊天和会议

Web音频API使您可以从用户的麦克风中捕获音频并实时处理。这可用于构建语音聊天和会议应用程序，例如直接在浏览器中运行的Dyte。

语音识别

Web音频API可用于从用户的麦克风中处理音频输入并分析以识别语音。这可用于为Web应用程序创建语音控制接口。

可视化

Web音频API可用于从音频输入中生成数据，该数据可用于创建各种可视化。例如，音乐播放器应用程序可以使用Web音频API来生成当前播放歌曲的频谱的可视化。

游戏中的音乐和声音效果

Web音频API可用于在基于浏览器的游戏中创建交互式音频体验。开发人员可以使用API播放背景音乐，声音效果，甚至可以根据游戏事件的速观生成音频。

音乐和音频编辑

Web Audio API提供了一组强大的工具，用于操纵音频，包括过滤，混合和处理。这允许开发人员创建可用于录制，编辑和导出音频的基于Web的音频编辑工具。

结论

在此博客文章中，我们介绍了WebRTC的基础知识和围绕它的概念的基础知识。还有更多内容可以赶上这个主题，我们将在未来几周内发布它。敬请关注。

如果您还没有听说过Dyte，请前往https://dyte.io，了解我们如何通过我们的SDK和Libraries彻底改变现场视频呼叫，以及如何在10,000分钟的10,000分钟内快速获得started，每月续签。如果您有任何疑问，可以在support@dyte.io与我们联系或询问我们的developer community。