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

李紀(jì)濤

（國(guó)家廣播電視總局無線電臺(tái)管理局，北京 100866）

1 WebSocket 技術(shù)

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

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

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

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

（1） 首先服務(wù)端啟動(dòng)后開始進(jìn)行WebSocket 偵聽。

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

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

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

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

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

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

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

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

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

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

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

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

6 結(jié)論

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