您现在的位置是：网站首页> 编程资料编程资料

vue实现录音功能js-audio-recorder带波浪图效果的示例_vue.js_

2023-05-24 352人已围观

简介 vue实现录音功能js-audio-recorder带波浪图效果的示例_vue.js_

前言：
因为业务需要，现在将整理的录音功能资料记录下，使用插件js-audio-recorder
实现效果：可得到三种录音数据，pcm,wav,mp3 等
官方api入口：点我(网不好的童鞋可以看最下面的api截图)
官方案例入口：点我
官方源码git入口：点我
实现步骤：

一：安装插件 js-audio-recorder
二：安装将格式转换为mp3的插件 lamejs
三：附上实现源码：
到这里，代码就结束了，上面每个方法都有很详细的注释，就不累赘了

整理api:（有代理的可以看官网，这里是摘取官网的api）

1，使用

安装

npm 方式
script 标签方式

2，属性

实例初始化

sampleBits
sampleRate
numChannels
compiling

实例属性

duration
fileSize

3，操作

start()
pause()
resume()
stop()
play()
getPlayTime()
pausePlay()
resumePlay()
stopPlay()
destroy()

音频数据

录音结束，获取取录音数据
录音结束，下载录音文件
录音中，获取录音数据
录音波形显示

播放外部

Player.play(blob)

其他

录音权限
getPermission()

4，Event

onprocess(duration)

onprogress(duration)

onplay

onpauseplay

onresumeplay

onstopplay

onplayend

5，应用

语音识别

6，PlayerPlayer 播放类

Player.play([arraybuffer])
Player.pausePlay()
Player.resumePlay()
Player.stopPlay()
Player.addPlayEnd(fn)
Player.getPlayTime()
Player.getAnalyseData()

7，其他音频格式

安装lamejs

前言：

因为业务需要，现在将整理的录音功能资料记录下，使用插件js-audio-recorder

实现效果：可得到三种录音数据，pcm,wav,mp3 等

官方api入口：点我(网不好的童鞋可以看最下面的api截图)

官方案例入口：点我

官方源码git入口：点我

实现步骤：

一：安装插件 js-audio-recorder

cnpm i js-audio-recorder --s

二：安装将格式转换为mp3的插件 lamejs

cnpm install lamejs --s

三：附上实现源码：

提示：慎用自身的这个监听事件，可以拿到数据，但是每秒拿到的数据非常多

您现在的位置是：网站首页> 编程资料编程资料

vue实现录音功能js-audio-recorder带波浪图效果的示例_vue.js_

目录

前言：

因为业务需要，现在将整理的录音功能资料记录下，使用插件js-audio-recorder

实现效果：可得到三种录音数据，pcm,wav,mp3 等

官方api入口：点我(网不好的童鞋可以看最下面的api截图)

官方案例入口：点我

官方源码git入口：点我

实现步骤：

一：安装插件 js-audio-recorder

二：安装将格式转换为mp3的插件 lamejs

三：附上实现源码：