本文范例代码使用vue2.0开发
首先当然是在项目中安装包

npm install js-audio-recorder

然后在页面中引入

import Recorder from 'js-audio-recorder'

该插件可以控制录得的语音的质量，以下是插件内配置对象的定义**【这是插件里面的东西，我贴在这里给大家看一眼而已，不用抄】**

interface recorderConfig {sampleBits?: number,        // 采样位数sampleRate?: number,        // 采样率numChannels?: number,       // 声道数compiling?: boolean,        // 是否边录边播
}

声明一个录音器对象，参数是你需要的配置项的对象，以下是我使用的，实际可以根据你的需要去调整

recorder: new Recorder({sampleBits: 16, // 采样位数，支持 8 或 16，默认是16sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000numChannels: 1
}),

录音器对象声明好以后就可以开始操作了

开始录音

this.recorder.start().then(() => {// 开始录音console.log('开始录音了=========')},(error) => {// 出错了console.log(error)}
)

通过上面这段代码开始录音，比如你页面上是点击某个按钮开始录音，你就可以把这段代码写在按钮的点击事件中

结束录音

this.recorder.stop()

结束录音就这一句，就这么简单

获取语音

该插件可以输出pcm格式或wav格式的语音【实际上你要wav他就是手动拼个header给你】，获取语音的方法有如下四种

let wavBlob = this.recorder.getWAVBlob()
let pcmBlob = this.recorder.getPCMBlob()
this.recorder.downloadWAV()
this.recorder.downloadPCM()

根据方法名，很容易理解，前两个方法是将wav/pcm格式的语音赋值给你声明的变量，后两个方法是触发浏览器的下载功能让用户获取语音并保存到电脑上
但是这里有个问题，就是他返回过来的语音是blob对象
什么是blob对象呢？blob对象是js的二进制对象之一，用于存储二进制数据，语音文件当然是一种二进制数据这没错，那问题在哪呢，问题就在于，blob对象是纯二进制，没有文件名的，这意味着如果你需要把语音上传到你的后端你的服务器上，传输的时候会使用blob作为文件名，你的后端接受到文件会因为没有扩展名而不知道这是什么语音文件，会来看这篇文章的同志应该是很清楚语音的格式多了去了，你肯定不会希望自己的后端拿到一个文件名为“blob”的语音
那怎么办呢
来，抄下面这段代码

let wavBlob = this.recorder.getWAVBlob()
let renameFile =new File([wavBlob], '文件名.wav', { type: 'audio/wav' })

通过这段代码，可以将blob对象转换成file对象，这个时候你就可以给这个file对象定文件名了，记得扩展名也需要写，另外我这里扩展名写的是wav，如果你获取的是PCM的数据的话，扩展名记得要写.pcm或者.raw

语音播放及控制

这个插件还提供了一些其他方法来实现播放和播放控制

this.recorder.play()        // 播放
this.recorder.getPlayTime() // 获取当前播放的秒数
this.recorder.pausePlay()   // 暂停播放
this.recorder.stopPlay()    // 停止播放

通过这些功能我们可以自己去做一个网页播放器，这个具体实现就根据你的实际需求去考虑了

前端使用js-audio-recorder组件实现录音、语音下载、播放等【含blob对象转换为file对象】相关推荐

node.js将buffer对象转换为json对象
d 是buffer对象 let jsstr = JSON.stringify(d);let jsondata = JSON.parse(jsstr);let buf = new Buffer(json ...
js二进制流转Blob对象。Blob对象再转File对象
JavaScript 二进制转文件使用js将blob对象转file对象前端处理后端返回的二进制流文件 js中Blob对象一般用法 js中关于Blob对象的介绍与使用上传的文件对象完整代码实例 ...
jquery 对象和 js 对象为什么要互相转换?_JQuery对象与dom对象两者之间的相互转换...
jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程.但是在 JQuery 中,有些 javascript 方法却不能直接使用.如何解决这个问题呢?接下来就讲述一下 ...
电脑录音软件哪个好用？试试Renee Audio Recorder Pro（都叫兽录音机软件）吧
Renee Audio Recorder Pro 是一款相当出色的专业级高保真电脑录音软件,中文名叫都叫兽录音机,支持同时或独立录制来自电脑/麦克风的声音,当没有声音可以录制的时候会 ...
Apowersoft Streaming Audio Recorder（录音精灵）官方中文版V4.3.5.2 | Apowersoft录音精灵官方下载
Apowersoft Streaming Audio Recorder(录音精灵)是一款来自Apowersoft公司的专业级电脑录音软件,能够极大提升用户听觉盛宴的录音工具,支持从各大音乐网站.视频平 ...
前端调用麦克风获取实时音频流和录音并上传至后台
前端调用麦克风获取实时音频流和录音并上传至后台 index.html <!DOCTYPE html> < a href=" ">Default.html&l ...
笔记,前端重点 js,es6,vue2,vue3,小程序...... (记得收藏)
------------vue2 部分面试题--------# (1)防抖:就是将一段时间内连续的多次触发转化为一次触发. (2)节流:减少一段时间内触发的频率区别:两者区别在于函数节流是固定时间做 ...
java socket中属性详解_前端开发：关于Vue组件中的data属性值是函数而不是对象的详解...
最近在搞关于前端开发的基础知识归纳,发现了不少经典知识点,那么本篇博文就来分享一个经典的知识点:Vue组件中的data属性值为什么是函数而不是对象.首先来了解一下Vue组件的使用理念:在Vue组件使用 ...
前端整合图片上传组件
复制头像上传组件从vue-element-admin复制组件: vue-element-admin/src/components/ImageCropper vue-element-admin/src ...

前端使用js-audio-recorder组件实现录音、语音下载、播放等【含blob对象转换为file对象】

开始录音

结束录音

获取语音

语音播放及控制

前端使用js-audio-recorder组件实现录音、语音下载、播放等【含blob对象转换为file对象】相关推荐

最新文章

热门文章