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