【小玩】cc-audiobuffer 一個切片語音拼接工具

源碼在最後，喜歡就給個Star ！

萌新跪求優化指導，請Forks

萌新瑟瑟發抖

話說在那麼緊張的大三快要找實習了而本身還在玩這些真的好嗎？T_T

這個小工具是我在最近解決項目問題中製做的。

背景是這樣的：做爲前端的萌新，被主程老大們嚇得瑟瑟發抖。語音實時通信！這個是最近項目中的一個里程碑，也是一個難點所在。主程老大們的想法是，瀏覽器錄音，切片，經過服務器轉存再經過廣播Url的方式進行轉發。使得各個客戶端均可以實時通信。

解決方法：大神 muaz-khan WebRTC中的 MediaStreamRecorder 進行瀏覽器錄音和切片（膜拜），使用七牛雲 存儲，轉發並得到切片語音的Url！最後最後，就是拼接語音啦，因此就產生了這個cc-audiobuffer工具。

直接看實現

cc-audiobuffer採用了ES6封裝類來實現，而且使用babel轉義。

連續播放的實現

• 遞歸的思想，只要緩衝區中還有Audio，就繼續播放。

• 事件監聽，監聽Audio對象中的 ended 事件做爲下一段語音播放的標誌。

play() {
        const _this = this
        if (this.isHasBuffer()) {
            this.currentAudio = this.shiftBuffer()
            this.currentAudio.play()
            _this.currentAudio.addEventListener('ended', function () {
                _this.play()
            }, false)
        }else{
            this.currentAudio=null
        }
    }

語音提早加載的實現

• 在語音的Url加入緩衝區的時候，使用Audio對象的preload屬性實現。

let audio = new Audio(url)
audio.preload = "auto"
this.AudioUrlBag.push(audio)

動態語音加載的實現

• CCAudioBuffer有pushBuffer('url') 方法，若是緩衝區有Audio正在播放的話，此方法將新的Audio加入隊列，若是緩衝區中沒有Audio播放，將會將Audio加入緩衝區同時自動播放新的Audio。

pushBuffer(url) {
        if(!this.isHasCurrentAudio()){
            let audio = new Audio(url)
            audio.preload = "auto"
            this.AudioUrlBag.push(audio)
            this.play()
        }
        else{
            let audio = new Audio(url)
            audio.preload = "auto"
            this.AudioUrlBag.push(audio)
        }
    }

想試一下嗎？

安裝

npm:

npm install cc-audiobuffer

import CCAudioBuffer from 'cc-audiobuffer'

script：

<script src="dist/cc-audiobuffer.js"></script>

使用

無參數建立

let CCAudioBuffer = new CCAudioBuffer()

CCAudioBuffer.pushBuffer('url')

當有新的url語音地址傳過來的時候，CCAudioBuffer會提早加載而且自動播放語音。無論什麼時候調用pushBuffer('url'),這些語音都會依次進入緩衝區且連續播放直到緩衝區爲空。

有參數建立

let CCAudioBuffer= new CCAudioBuffer([new Audio('url'),new Audio('url'),new Audio('url')])

CCAudioBuffer.play()

CCAudioBuffer.pushBuffer('url')

當你有參數建立時，參數規定是Audio對象的一個數組。

接下來須要調用play() 接口保證參數內的Audio播放。

pushBuffer() 的做用和無參數建立同樣。

反思一下

最近真是忙成象拔蚌，這個工具作的很急，自我安慰下。

源碼很短很短，也沒有考慮到對象內部的一些私有封裝什麼的。仍是想之後有時間能重寫一下。

也寫寫些請求啥的，但願請教你們，問問你們有沒有優化方案什麼的，也給小生我上門課。

最後這裏是Gayhub源碼

喜歡給個Star！指教給個Forks！

戳我