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