【小玩】cc-audiobuffer 一个切片语音拼接工具

2shou 发布于2019-08-20 14:41 / 1065人阅读

摘要：解决方法大神中的进行浏览器录音和切片膜拜，使用七牛云存储，转发并获得切片语音的最后最后，就是拼接语音啦，所以就产生了这个工具。事件监听，监听对象中的事件作为下一段语音播放的标志。反思一下最近真是忙成象拔蚌，这个工具做的很急，自我安慰下。

源码在最后，喜欢就给个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！

戳我

云服务器 idc机房托管语音开发工具切片保存数组切片图片切片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81836.html

cc-audiobuffer 2.x 版本

摘要：源码的升级解释函数无论在一开始播放和暂停之后继续播放都要调用。接下来即将要实现的功能接下来的计划单例模式报错处理暂停播放继续播放清空队列优化 Gayhub 源码与2.x文章喜欢给个Star ！不断完善更新中 1.x版本文章：文章更新功能当前播放语音暂停当前播放语音继续播放清空当前的语音队列使用请看源码Markdown 。源码的升级 _playNext() {...

qpal 2019-08-20 16:17 评论0 收藏0
Numpy数组的索引与切片和变形拼接分裂

摘要：一一维数组的索引与切片对象的内容可以通过索引或切片来访问和修改，与中的切片操作一样。在指定位置分裂数组本身作为一个参数，分类位置构成的列表作为第二个参数同时也可以对一维数组和多位数组进行操作。 1.概述今天我们来讲一下Numpy数组的索引与切片,numpy数组的索引与切片和Python中的切片与索引的作用相同,可以快速的取出数据,进行下一步的运用或者查看,但是两种切片还有一些不同的地...

miracledan 2019-07-31 10:18 评论0 收藏0
Python进阶：切片的误区与高级用法

摘要：与纯占位符相对应，非纯占位符的切片是非空列表，对它进行操作赋值与删除，将会影响原始列表。不同位置的替换非等长替换删除元素切片占位符可以带步长，从而实现连续跨越性的替换或删除效果。 2018-12-31 更新声明：切片系列文章本是分三篇写成，现已合并成一篇。合并后，修正了一些严重的错误（如自定义序列切片的部分），还对行文结构与章节衔接做了大量改动。原系列的单篇就不删除了，毕竟也是有单独成...

liaorio 2019-07-30 18:40 评论0 收藏0
【Python从入门到精通】五万六千字对Python基础知识做一个了结吧！（二十八）【值得收藏】

摘要：它是一门解析型的语言，何为解析型语言呢就是在运行时通过解析器将源代码一行行解析成机器码。而像语言，等则是编译型的语言，即通过编译器将所有的源代码一次性编译成二进制指令，生成一个可执行的程序。 ...

leeon 2021-10-14 09:43 评论0 收藏0