基于WebSocket 技术与MSE 技术的实时音频流播放实现

2022-11-12李纪涛

科学技术创新 2022年33期

李纪涛

（国家广播电视总局无线电台管理局，北京 100866）

1 WebSocket 技术

WebSocket 是HTML5 开始提供的一种在单个TCP 连接上进行全双工通讯的协议,允许服务端主动向客户端推送数据, 使得客户端和服务器之间的数据交换变得更加简单。在Websocket 技术出现之前，由于Http 固有的技术特点，只能由客户端对服务端发起Http 请求，然后服务端返回最新的数据给客户端，而不能由服务端主动发起对客户端的连接请求及数据发送。为了实现推送技术，只能采用Ajax 轮询的方式，这种方式有明显的缺点，即浏览器需要不断的向服务器发出请求，浪费系统资源、数据实时性差。而Websocket 的出现解决了以上的问题[1]。WebSocket 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送[2]。MSE (Media Source Extensions)，即媒体源扩展，可以理解为一种API，其提供了实现无插件且基于Web 的流媒体的功能。通过MSE，媒体串流能够通过JavaScript 创建，并且可以使用HTML5 的

2 系统框架及工作流程

系统采用B/S 系统架构，后端能够实时监听WebSocket 请求及响应音频数据，并根据要求将音频字节流发送给前端，系统框架及工作流程见图1。

图1 系统框架及工作流程

（1）首先服务端启动后开始进行WebSocket 侦听。

（2）客户端浏览器向服务端发起WebSocket 连接，服务端响应客户端的连接请求，创建WebSocket连接。

（3）创建成功后，客户端响应OnOpen 事件，开启音频数据获取请求，并创建音频播放对象。

（4）服务端响应客户端请求数据事件，并持续向客户端发送音频字节流。

（5）客户端响应OnMessage 事件，获取音频字节流，向音频播放对象数据缓冲区中添加数据。

（6）开始播放音频数据。

3 服务端技术实现

服务端主要实现WebSocket 监听，音频字节流数据获取，音频字节流数据发送等几个功能，为此服务端需设置成常开系统，如windows 服务，或者相应的windows 程序，以实现对服务的持续服务。本研究以C#开发语言为例进行说明。

在服务端定义了两个字典分别用来存放发送的音频流以及请求的音频流，由于音频数据，特别是mp3 数据，需要一定的数据量累计才能实现播放，因此设计了一个fifo 队列用来存放发送给客户端的数据，对数据进行缓冲处理后再进行发送。同时为支持多客户端，同时不同的客户端可以播放不同的音频流，故此，设计了对客户端请求进行存储，以满足对多个播放请求推送相应不同的音频字节流。为适应不同的音频格式，在推送音频数据前，还将音频格式进行标识，以适应前端调用不同的音频解码播放[3]。

4 客户端WebSocket 实现

WebSocket 为html5 提供的特性，为此客户端浏览器必须为支持html5 的浏览器。

5 客户端音频流播放实现

MediaSource 是媒体资源HTMLMediaElement 对象的接口。 MediaSource 对象可以附着在HTMLMediaElement 在客户端进行播放。JavaScript 可以通过URL.createObjectURL 方法生成一个临时的src,该src 和MediaSource 对象绑定，MediaSource 对象通过自己的SourceBuffer 集合从外部接收数据，然后将数据输入到HTMLMediaElement 对象进行数据解析播放。一个MediaSource 对象有至少一个或多个SourceBuffer 对象。MediaSource 对象上有三个主要事件， sourceopen、sourceended、sourceclose。其中，sourceopen 事件是在给audio.src 赋值之后触发；sourceended 事件是在用户主动调用终止被触发；sourceclose 事件是在SourceBuffer 和MediaElement 中无可用数据(一般是播放到视频末尾)时被触发[4]。我们一般需要在给audio.src 赋值之后，监听sourceopen 事件，以确保MediaSource 和HTMLMediaElement 已经完成绑定，并在此之后才开始进入数据处理流程。数据处理的过程，主要是围绕SourceBuffer 对象展开的，SourceBuffer 对象通过监听updateend 事件，判断audioTrunks 中是否有数据，如果有数据则通过appendBuffer 函数将数据添加到SourceBuffer 中，如果没有数据则添加一段极短时间的空数据，以保证持续触发数据更新事件，通过这种方式能够实现对audioTrunks 缓冲区的持续检查，这样，当WebSocket接收到数据并添加到audioTrunks 中，确保持续进行音频流播放[5]。