摘要:解決方法大神中的進行瀏覽器錄音和切片膜拜,使用七牛云存儲,轉發并獲得切片語音的最后最后,就是拼接語音啦,所以就產生了這個工具。事件監聽,監聽對象中的事件作為下一段語音播放的標志。反思一下最近真是忙成象拔蚌,這個工具做的很急,自我安慰下。
萌新瑟瑟發抖</>復制代碼
源碼在最后,喜歡就給個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:
使用</>復制代碼
無參數創建
</>復制代碼
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!
戳我
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/81836.html
摘要:源碼的升級解釋函數無論在一開始播放和暫停之后繼續播放都要調用。接下來即將要實現的功能接下來的計劃單例模式報錯處理暫停播放繼續播放清空隊列優化 Gayhub 源碼與2.x文章 喜歡給個Star ! 不斷完善更新中 1.x版本文章: 文章 更新功能 當前播放語音暫停 當前播放語音繼續播放 清空當前的語音隊列 使用請看 源碼Markdown 。 源碼的升級 _playNext() {...
摘要:一一維數組的索引與切片對象的內容可以通過索引或切片來訪問和修改,與中的切片操作一樣。在指定位置分裂數組本身作為一個參數,分類位置構成的列表作為第二個參數同時也可以對一維數組和多位數組進行操作。 1.概述 今天我們來講一下Numpy數組的索引與切片,numpy數組的索引與切片和Python中的切片與索引的作用相同,可以快速的取出數據,進行下一步的運用或者查看,但是兩種切片還有一些不同的地...
摘要:與純占位符相對應,非純占位符的切片是非空列表,對它進行操作賦值與刪除,將會影響原始列表。不同位置的替換非等長替換刪除元素切片占位符可以帶步長,從而實現連續跨越性的替換或刪除效果。 2018-12-31 更新聲明:切片系列文章本是分三篇寫成,現已合并成一篇。合并后,修正了一些嚴重的錯誤(如自定義序列切片的部分),還對行文結構與章節銜接做了大量改動。原系列的單篇就不刪除了,畢竟也是有單獨成...
摘要:它是一門解析型的語言,何為解析型語言呢就是在運行時通過解析器將源代碼一行行解析成機器碼。而像語言,等則是編譯型的語言,即通過編譯器將所有的源代碼一次性編譯成二進制指令,生成一個可執行的程序。 ...
閱讀 3968·2021-11-11 10:58
閱讀 3343·2021-09-26 09:46
閱讀 1922·2019-08-30 15:55
閱讀 987·2019-08-30 13:52
閱讀 1955·2019-08-29 13:11
閱讀 3036·2019-08-29 11:27
閱讀 1526·2019-08-26 18:18
閱讀 2651·2019-08-23 14:17
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要