融云实践（实时音频混音在 Web 端的探索与实践） 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 = 'https://www.it610.com/media/bgmusic.mp3'; audioEl.loop = true; audioEl.play(); // 从 audio 标签中抓取一个 mediaStream 对象，以在 chrome 浏览器中为例 let mediaStream = null audioEl.onloadedmetadata = https://www.it610.com/article/() => { 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
【融云实践（实时音频混音在 Web 端的探索与实践）】MixAudio 和 stopMixAudio 方法用于混音、停止混音的接口支持。
以下展示业务层混音的执行流程，rtcClient、rtcRoom 为业务端取得的 RTC 客户端实例和房间实例。
创建、发布一个麦克风资源