融云实践：实时音频混音在 Web 端的探索与实践

互联网改变世界，以社交为地基。关注【融云全球互联网通信云】了解更多

在社交中，分享欲是维持关系和感情的重要标准，无论是熟人社交、婚恋交友还是兴趣社群。

分享欲表现在语聊房、连麦直播等具体社交场景中，不仅是维系关系的方式，还带有更多陪伴的情绪价值。比如，语聊房中一起听一首最爱的歌，朋友连麦一起看一场共同期待的电影。

为了给用户提供基于分享的优质互动体验，就需要应用实时音频混音技术了。本文将从技术原理、技术方案、接口设计等方面分享融云实时音视频 Web 端 SDK 在混音技术方面的探索实践。

---

Web 端音频分享实现方案

对于支持发布本地或线上音视频资源的 Web 端 SDK 来说，最简单地实现在应用中分享音频的方式是：同时发布麦克风资源和需要共享的音频资源，对方通过订阅麦克风音频和共享音频便可听到两个声音。

这种方式的内部路径如下：

（双通道获取两路音频）

但“发布端发布两个音轨，订阅端订阅两个音轨”的实现方案显然不够优雅。

融云采用的方案，是通过实时音频混音技术，把麦克风和共享音频混合成一个音轨进行发布。这样，订阅端仅需订阅一个音轨。流程如下：

（实时音频混音）

混音后发布，不仅可以节省带宽，还可以减少订阅端的操作，更少操作，更优体验。

技术原理

Web Audio API 中的所有操作都基于音频节点 AudioNode 进行。AudioNode 是处理音频模块的通用接口，音频节点类型包含：音源节点、音效节点、音频输出节点、音频分析节点等。

每一个音频节点都有输入和输出，上一个音频节点输出处理完的音频，connect 连接到下一个音频节点的输入，完成音频数据在音频节点间的流转。

不同的音频节点连接在一起构成一个音频图 (Audio Graph)，音频图内的节点操作需要依赖音频上下文 AudioContext，每一个音频节点只有一个音频上下文。

实际应用中，需要使用 AudioContext 创建各类型音频节点，从一个或多个音源节点开始，经过一个或多个音频处理节点(如一个过滤器节点 BiquadFilterNode，一个音量控制节点 GainNode)，最终连接到一个目的地(AudioContext.destination)。

AudioContext.destination 返回一个 Audio

DestinationNode，是音频图中的最后一个节点，它负责把声音数据传输给扬声器或耳机。

如下是一个精简的音频图(Audio Graph)：

（单音轨 Audio Graph）

由于可以把多个音频源节点输出到同一个 AudioDestinationNode，也就意味着可以把麦克风音频和背景音乐连接到同一个输出口播放，音频图(Audio Graph)就变成了下面这个样子：

（双音轨 Audio Graph）

把两个不同的音频源连接到同一个输出口，即可达到混音目的。

---

技术方案

创建音源

音频源可以来源于一段从本地或线上读取的音频数据 ArrayBuffer、一个 audio 标签或浏览器麦克风生成的 MediaStream。以利用 MediaStream 生成音频源为例，创建音源节点的方法如下：
获取麦克风资源生成音源

// 创建一个音频上下文实例
const audioContext = new AudioContext();

// 浏览器生成一个包含音轨的 mediaStream 对象
let mediaStream = null;
navigator.mediaDevices.getUserMedia({audio: true}).then((ms) => {
    mediaStream = ms;
});

// 生成一个 mediaStream 音频源
const micSourceNode = audioContext.createMediaStreamSource(mediaStream);

---

本地播放背景音乐生成音源

// 创建一个 audio 标签播放本地音频
const audioEl = document.createElement('audio');
audioEl.src = '/media/bgmusic.mp3';
audioEl.loop = true;
audioEl.play();

// 从 audio 标签中抓取一个 mediaStream 对象，以在 chrome 浏览器中为例
let mediaStream = null
audioEl.onloadedmetadata = () => {
  mediaStream =  audioEl.captureStream();
}

// 生成本地音频对应的 mediaStream 音频源
const bgMusicSourceNode = audioContext.createMediaStreamSource(mediaStream);

---

创建播放出口

// 创建音源播放出口
const destination = audioContext.createMediaStreamDestination()

---

连接节点

将两个音频源节点连接至同一输出口。

// 麦克风音频源连接输出出口
micSourceNode.connect(destination)

// 背景音乐音频源连接输出出口
bgMusicSourceNode.connect(destination)

---

获取混音音轨

从输出节点处取得混合后的音轨MediaStreamTrack。

// 获取混音 audioTrack                             
const mixAudioTrack = destination.stream.getAudioTracks()[0]

取到混音音轨 mixAudioTrack 后，我们需要解决的问题是，如何在实际的音视频场景中，无需重新建立对等连接，就能使对端听到麦克风和共享音乐的声音。

混音音轨在 WebRTC 中生效

---

混音音轨在 WebRTC 中生效

此时就可以把混音音轨 mixAudioTrack 利用起来了。从 RTCPeerConnection 上找到发送麦克风音频的 RTCRtpSender 对象，使用 mixAudioTrack 替换已经发布的麦克风音轨，具体实现如下：

// 发布麦克风资源前创建的 RTCPeerConnection 实例对象
const rtcPeerConnection = new RTCPeerConnection([configuration])

// 获取发送音频的 RTCRtpSender 对象
const micSender = rtcPeerConnection.getSenders().find((sender) => {
  return sender.track.kind === 'audio'
})

// 使用 audioContetx 中拿到的混音 mixAudioTrack 替换麦克风 audioTrack
micSender.replaceTrack(mixAudioTrack)

接口设计规划

融云实时音视频 SDK 提供了 createMicrophone

AudioTrack、createLocalFileTracks 方法，分别用于创建麦克风音轨、本地或在线音频音轨。

混音依然建立在这两个方法创建的实例之上，在 RCRTCRoom 和 RCLivingRoom 上增加 start

MixAudio 和 stopMixAudio 方法用于混音、停止混音的接口支持。

以下展示业务层混音的执行流程，rtcClient、rtcRoom 为业务端取得的 RTC 客户端实例和房间实例。

创建、发布一个麦克风资源

// 创建一个麦克风音轨
const micAudioTrack = rtcClient.createMicrophoneAudioTrack()

// 发布麦克风音轨
rtcRoom.pushlish([micAudioTrack])

---

创建一个本地音频音轨

// 创建一个本地音频音轨，file 为 <input type='file'> 获取到的 File 实例
const localAudioTrack = rtcClient.createLocalFileTracks('bgmusic', file)

---

开始混音

将本地音频混入已发布的麦克风音频中，startMixAudio 的第一个参数为已发布的音轨，第二个为要混入的本地音频音轨。

// 开始混音
rtcRoom.startMixAudio(micAudioTrack, localAudioTrack)

---

停止混音

传入需要去掉混音的音轨。SDK 会从麦克风音频中去掉本地音频的声音。

// 停止混音
rtcRoom.stopMixAudio(micAudioTrack)

基于以上更加优雅简洁的方案，开发者可以更便捷、低成本地接入混音，降低集成阶段的学习门槛。未来，围绕让开发者的业务实现更加高效简单，融云还将持续精进技术，优化体验。