基于WebSocket 技術與MSE 技術的實時音頻流播放實現

李紀濤

（國家廣播電視總局無線電臺管理局，北京 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]。

6 結論

本研究詳細介紹了B/S 系統中實時音頻流播放的具體技術實現及實現中的注意事項，提供了一整套實時播放音頻流的技術方案，對于廣播發射臺的音頻監聽業務需求具有指導意義。