資訊專欄INFORMATION COLUMN
摘要：解決方法大神中的進(jìn)行瀏覽器錄音和切片膜拜，使用七牛云存儲，轉(zhuǎn)發(fā)并獲得切片語音的最后最后，就是拼接語音啦，所以就產(chǎn)生了這個工具。事件監(jiān)聽，監(jiān)聽對象中的事件作為下一段語音播放的標(biāo)志。反思一下最近真是忙成象拔蚌，這個工具做的很急，自我安慰下。
萌新瑟瑟發(fā)抖源碼在最后，喜歡就給個Star ！
萌新跪求優(yōu)化指導(dǎo)，請F(tuán)orks
話說在那么緊張的大三快要找實(shí)習(xí)了而自己還在玩這些真的好嗎？T_T
這個小工具是我在最近解決項(xiàng)目問題中制作的。
背景是這樣的：作為前端的萌新，被主程老大們嚇得瑟瑟發(fā)抖。語音實(shí)時通訊！這個是最近項(xiàng)目中的一個里程碑，也是一個難點(diǎn)所在。主程老大們的想法是，瀏覽器錄音，切片，通過服務(wù)器轉(zhuǎn)存再通過廣播Url的方式進(jìn)行轉(zhuǎn)發(fā)。使得各個客戶端都可以實(shí)時通訊。
解決方法：大神 muaz-khan WebRTC中的 MediaStreamRecorder 進(jìn)行瀏覽器錄音和切片（膜拜），使用七牛云 存儲，轉(zhuǎn)發(fā)并獲得切片語音的Url！最后最后，就是拼接語音啦，所以就產(chǎn)生了這個cc-audiobuffer工具。
直接看實(shí)現(xiàn)cc-audiobuffer采用了ES6封裝類來實(shí)現(xiàn)，并且使用babel轉(zhuǎn)義。
連續(xù)播放的實(shí)現(xiàn)遞歸的思想，只要緩沖區(qū)中還有Audio，就繼續(xù)播放。
事件監(jiān)聽，監(jiān)聽Audio對象中的 ended 事件作為下一段語音播放的標(biāo)志。
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
}
}
語音提前加載的實(shí)現(xiàn)
在語音的Url加入緩沖區(qū)的時候，使用Audio對象的preload屬性實(shí)現(xiàn)。
let audio = new Audio(url) audio.preload = "auto" this.AudioUrlBag.push(audio)動態(tài)語音加載的實(shí)現(xiàn)
CCAudioBuffer有pushBuffer("url") 方法，如果緩沖區(qū)有Audio正在播放的話，此方法將新的Audio加入隊(duì)列，如果緩沖區(qū)中沒有Audio播放，將會將Audio加入緩沖區(qū)同時自動播放新的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：
使用無參數(shù)創(chuàng)建
let CCAudioBuffer = new CCAudioBuffer()
CCAudioBuffer.pushBuffer("url")
當(dāng)有新的url語音地址傳過來的時候，CCAudioBuffer會提前加載并且自動播放語音。不管何時調(diào)用pushBuffer("url"),這些語音都會依次進(jìn)入緩沖區(qū)且連續(xù)播放直到緩沖區(qū)為空。
有參數(shù)創(chuàng)建
let CCAudioBuffer= new CCAudioBuffer([new Audio("url"),new Audio("url"),new Audio("url")])
CCAudioBuffer.play()
CCAudioBuffer.pushBuffer("url")
當(dāng)你有參數(shù)創(chuàng)建時，參數(shù)規(guī)定是Audio對象的一個數(shù)組。
接下來需要調(diào)用play() 接口保證參數(shù)內(nèi)的Audio播放。
pushBuffer() 的作用和無參數(shù)創(chuàng)建一樣。
反思一下最近真是忙成象拔蚌，這個工具做的很急，自我安慰下。
源碼很短很短，也沒有考慮到對象內(nèi)部的一些私有封裝什么的。還是想以后有時間能重寫一下。
也寫寫些請求啥的，希望請教大家，問問大家有沒有優(yōu)化方案什么的，也給小生我上門課。
最后這里是Gayhub源碼
喜歡給個Star！指教給個Forks！
戳我
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81836.html
摘要：源碼的升級解釋函數(shù)無論在一開始播放和暫停之后繼續(xù)播放都要調(diào)用。接下來即將要實(shí)現(xiàn)的功能接下來的計劃單例模式報錯處理暫停播放繼續(xù)播放清空隊(duì)列優(yōu)化 Gayhub 源碼與2.x文章 喜歡給個Star ！ 不斷完善更新中 1.x版本文章： 文章 更新功能 當(dāng)前播放語音暫停 當(dāng)前播放語音繼續(xù)播放 清空當(dāng)前的語音隊(duì)列 使用請看 源碼Markdown 。 源碼的升級 _playNext() {...
摘要：一一維數(shù)組的索引與切片對象的內(nèi)容可以通過索引或切片來訪問和修改，與中的切片操作一樣。在指定位置分裂數(shù)組本身作為一個參數(shù)，分類位置構(gòu)成的列表作為第二個參數(shù)同時也可以對一維數(shù)組和多位數(shù)組進(jìn)行操作。 1.概述 今天我們來講一下Numpy數(shù)組的索引與切片,numpy數(shù)組的索引與切片和Python中的切片與索引的作用相同,可以快速的取出數(shù)據(jù),進(jìn)行下一步的運(yùn)用或者查看,但是兩種切片還有一些不同的地...
摘要：與純占位符相對應(yīng)，非純占位符的切片是非空列表，對它進(jìn)行操作賦值與刪除，將會影響原始列表。不同位置的替換非等長替換刪除元素切片占位符可以帶步長，從而實(shí)現(xiàn)連續(xù)跨越性的替換或刪除效果。 2018-12-31 更新聲明：切片系列文章本是分三篇寫成，現(xiàn)已合并成一篇。合并后，修正了一些嚴(yán)重的錯誤（如自定義序列切片的部分），還對行文結(jié)構(gòu)與章節(jié)銜接做了大量改動。原系列的單篇就不刪除了，畢竟也是有單獨(dú)成...
摘要：它是一門解析型的語言，何為解析型語言呢就是在運(yùn)行時通過解析器將源代碼一行行解析成機(jī)器碼。而像語言，等則是編譯型的語言，即通過編譯器將所有的源代碼一次性編譯成二進(jìn)制指令，生成一個可執(zhí)行的程序。 ...
閱讀 3968·2021-11-11 10:58
閱讀 3341·2021-09-26 09:46
閱讀 1920·2019-08-30 15:55
閱讀 987·2019-08-30 13:52
閱讀 1954·2019-08-29 13:11
閱讀 3035·2019-08-29 11:27
閱讀 1525·2019-08-26 18:18
閱讀 2647·2019-08-23 14:17
