基于WebSocket 技術(shù)與MSE 技術(shù)的實時音頻流播放實現(xiàn)

李紀濤

（國家廣播電視總局無線電臺管理局，北京 100866）

1 WebSocket 技術(shù)

WebSocket 是HTML5 開始提供的一種在單個TCP 連接上進行全雙工通訊的協(xié)議,允許服務(wù)端主動向客戶端推送數(shù)據(jù), 使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡單。在Websocket 技術(shù)出現(xiàn)之前，由于Http 固有的技術(shù)特點，只能由客戶端對服務(wù)端發(fā)起Http 請求，然后服務(wù)端返回最新的數(shù)據(jù)給客戶端，而不能由服務(wù)端主動發(fā)起對客戶端的連接請求及數(shù)據(jù)發(fā)送。為了實現(xiàn)推送技術(shù)，只能采用Ajax 輪詢的方式，這種方式有明顯的缺點，即瀏覽器需要不斷的向服務(wù)器發(fā)出請求，浪費系統(tǒng)資源、數(shù)據(jù)實時性差。而Websocket 的出現(xiàn)解決了以上的問題[1]。WebSocket 中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進行雙向數(shù)據(jù)傳輸。瀏覽器和服務(wù)器只需要做一個握手的動作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送[2]。MSE (Media Source Extensions)，即媒體源擴展，可以理解為一種API，其提供了實現(xiàn)無插件且基于Web 的流媒體的功能。通過MSE，媒體串流能夠通過JavaScript 創(chuàng)建，并且可以使用HTML5 的

2 系統(tǒng)框架及工作流程

系統(tǒng)采用B/S 系統(tǒng)架構(gòu)，后端能夠?qū)崟r監(jiān)聽WebSocket 請求及響應(yīng)音頻數(shù)據(jù)，并根據(jù)要求將音頻字節(jié)流發(fā)送給前端，系統(tǒng)框架及工作流程見圖1。

圖1 系統(tǒng)框架及工作流程

（1） 首先服務(wù)端啟動后開始進行WebSocket 偵聽。

（2） 客戶端瀏覽器向服務(wù)端發(fā)起WebSocket 連接，服務(wù)端響應(yīng)客戶端的連接請求，創(chuàng)建WebSocket連接。

（3） 創(chuàng)建成功后，客戶端響應(yīng)OnOpen 事件，開啟音頻數(shù)據(jù)獲取請求，并創(chuàng)建音頻播放對象。

（4） 服務(wù)端響應(yīng)客戶端請求數(shù)據(jù)事件，并持續(xù)向客戶端發(fā)送音頻字節(jié)流。

（5） 客戶端響應(yīng)OnMessage 事件，獲取音頻字節(jié)流，向音頻播放對象數(shù)據(jù)緩沖區(qū)中添加數(shù)據(jù)。

（6） 開始播放音頻數(shù)據(jù)。

3 服務(wù)端技術(shù)實現(xiàn)

服務(wù)端主要實現(xiàn)WebSocket 監(jiān)聽，音頻字節(jié)流數(shù)據(jù)獲取，音頻字節(jié)流數(shù)據(jù)發(fā)送等幾個功能，為此服務(wù)端需設(shè)置成常開系統(tǒng)，如windows 服務(wù)，或者相應(yīng)的windows 程序，以實現(xiàn)對服務(wù)的持續(xù)服務(wù)。本研究以C#開發(fā)語言為例進行說明。

在服務(wù)端定義了兩個字典分別用來存放發(fā)送的音頻流以及請求的音頻流，由于音頻數(shù)據(jù)，特別是mp3 數(shù)據(jù)，需要一定的數(shù)據(jù)量累計才能實現(xiàn)播放，因此設(shè)計了一個fifo 隊列用來存放發(fā)送給客戶端的數(shù)據(jù)，對數(shù)據(jù)進行緩沖處理后再進行發(fā)送。同時為支持多客戶端，同時不同的客戶端可以播放不同的音頻流，故此，設(shè)計了對客戶端請求進行存儲，以滿足對多個播放請求推送相應(yīng)不同的音頻字節(jié)流。為適應(yīng)不同的音頻格式，在推送音頻數(shù)據(jù)前，還將音頻格式進行標(biāo)識，以適應(yīng)前端調(diào)用不同的音頻解碼播放[3]。

4 客戶端WebSocket 實現(xiàn)

WebSocket 為html5 提供的特性，為此客戶端瀏覽器必須為支持html5 的瀏覽器。

5 客戶端音頻流播放實現(xiàn)

MediaSource 是媒體資源HTMLMediaElement 對象的接口。 MediaSource 對象可以附著在HTMLMediaElement 在客戶端進行播放。JavaScript 可以通過URL.createObjectURL 方法生成一個臨時的src,該src 和MediaSource 對象綁定，MediaSource 對象通過自己的SourceBuffer 集合從外部接收數(shù)據(jù)，然后將數(shù)據(jù)輸入到HTMLMediaElement 對象進行數(shù)據(jù)解析播放。一個MediaSource 對 象有至少一個或多個SourceBuffer 對象。MediaSource 對象上有三個主要事件， sourceopen、sourceended、sourceclose。 其中，sourceopen 事件是在給audio.src 賦值之后觸發(fā)；sourceended 事件是在用戶主動調(diào)用終止被觸發(fā)；sourceclose 事件是在SourceBuffer 和MediaElement 中無可用數(shù)據(jù)(一般是播放到視頻末尾)時被觸發(fā)[4]。我們一般需要在給audio.src 賦值之后，監(jiān)聽sourceopen 事件，以確保MediaSource 和HTMLMediaElement 已經(jīng)完成綁定，并在此之后才開始進入數(shù)據(jù)處理流程。數(shù)據(jù)處理的過程，主要是圍繞SourceBuffer 對象展開的，SourceBuffer 對象通過監(jiān)聽updateend 事件，判斷audioTrunks 中是否有數(shù)據(jù)，如果有數(shù)據(jù)則通過appendBuffer 函數(shù)將數(shù)據(jù)添加到SourceBuffer 中，如果沒有數(shù)據(jù)則添加一段極短時間的空數(shù)據(jù)，以保證持續(xù)觸發(fā)數(shù)據(jù)更新事件，通過這種方式能夠?qū)崿F(xiàn)對audioTrunks 緩沖區(qū)的持續(xù)檢查，這樣，當(dāng)WebSocket接收到數(shù)據(jù)并添加到audioTrunks 中，確保持續(xù)進行音頻流播放[5]。

6 結(jié)論

本研究詳細介紹了B/S 系統(tǒng)中實時音頻流播放的具體技術(shù)實現(xiàn)及實現(xiàn)中的注意事項，提供了一整套實時播放音頻流的技術(shù)方案，對于廣播發(fā)射臺的音頻監(jiān)聽業(yè)務(wù)需求具有指導(dǎo)意義。