< div style = "font-size:14px" > < h3 > 录音时长： { { recorder && recorder . duration . toFixed ( 4 ) } } < / h3 > < el - button type = "primary" @click = "handleStart" > 开始录音 < / el - button > < el - button type = "info" @click = "handlePause" > 暂停录音 < / el - button > < el - button type = "success" @click = "handleResume" > 继续录音 < / el - button > < el - button type = "warning" @click = "handleStop" > 停止录音 < / el - button > 播放时长： { { recorder && ( playTime > recorder . duration ? recorder . duration . toFixed ( 4 ) : playTime . toFixed ( 4 ) ) < el - button type = "primary" @click = "handlePlay" > 播放录音 < / el - button > < el - button type = "info" @click = "handlePausePlay" > 暂停播放 < / el - button > < el - button type = "success" @click = "handleResumePlay" > 继续播放 < / el - button > < el - button type = "warning" @click = "handleStopPlay" > 停止播放 < / el - button > < el - button type = "error" @click = "handleDestroy" > 销毁录音 < / el - button > < el - button type = "primary" @click = "uploadRecord" > 上传 < / el - button > < / div > < / div > < / template > < script > import Recorder from 'js-audio-recorder' export default { data ( ) { return { recorder : null , playTime : 0 , timer : null , src : null created ( ) { this . recorder = new Recorder ( ) methods : { // 开始录音 handleStart ( ) { this . recorder = new Recorder ( ) Recorder . getPermission ( ) . then ( ( ) => { console . log ( '开始录音' ) this . recorder . start ( ) // 开始录音 } , ( error ) => { this . $message ( { message : '请先允许该网页使用麦克风' , type : 'info' console . log ( ` ${ error . name } : ${ error . message } ` ) handlePause ( ) { console . log ( '暂停录音' ) this . recorder . pause ( ) // 暂停录音 handleResume ( ) { console . log ( '恢复录音' ) this . recorder . resume ( ) // 恢复录音 handleStop ( ) { console . log ( '停止录音' ) this . recorder . stop ( ) // 停止录音 handlePlay ( ) { console . log ( '播放录音' ) console . log ( this . recorder ) this . recorder . play ( ) // 播放录音 // 播放时长 this . timer = setInterval ( ( ) => { try { this . playTime = this . recorder . getPlayTime ( ) } catch ( error ) { this . timer = null } , 100 ) handlePausePlay ( ) { console . log ( '暂停播放' ) this . recorder . pausePlay ( ) // 暂停播放 // 播放时长 this . playTime = this . recorder . getPlayTime ( ) this . time = null handleResumePlay ( ) { console . log ( '恢复播放' ) this . recorder . resumePlay ( ) // 恢复播放 // 播放时长 this . timer = setInterval ( ( ) => { try { this . playTime = this . recorder . getPlayTime ( ) } catch ( error ) { this . timer = null } , 100 ) handleStopPlay ( ) { console . log ( '停止播放' ) this . recorder . stopPlay ( ) // 停止播放 // 播放时长 this . playTime = this . recorder . getPlayTime ( ) this . timer = null handleDestroy ( ) { console . log ( '销毁实例' ) this . recorder . destroy ( ) // 毁实例 this . timer = null uploadRecord ( ) { if ( this . recorder == null || this . recorder . duration === 0 ) { this . $message ( { message : '请先录音' , type : 'error' return false this . recorder . pause ( ) // 暂停录音 this . timer = null console . log ( '上传录音' ) // 上传录音 const formData = new FormData ( ) const blob = this . recorder . getWAVBlob ( ) // 获取wav格式音频数据 // 此处获取到blob对象后需要设置fileName满足当前项目上传需求，其它项目可直接传把blob作为file塞入formData const newbolb = new Blob ( [ blob ] , { type : 'audio/wav' } ) const fileOfBlob = new File ( [ newbolb ] , new Date ( ) . getTime ( ) + '.wav' ) formData . append ( 'file' , fileOfBlob ) const url = window . URL . createObjectURL ( fileOfBlob ) this . src = url // const axios = require('axios') // axios.post(url, formData).then(res => { // console.log(res.data.data[0].url) // }) < / script >

播放通过audio标签控制，可以上传到公司服务器获取线上地址，还可以通过blob对象获取到播放url

	  const blob = this.recorder.getWAVBlob()
      this.url = window.URL.createObjectURL(blob)
1.录音时长duration是recorder的属性，可以实时获取；但播放时长需要通过方法getPlayTime()获取，播放时不能实时改变，此处我用了个100ms延迟的定时器假装实时获取，如果有更好的办法，欢迎指教。
 2.getWAVBlob()获取录音数据的方法获取的时blob对象，当前项目中需要验证fileName，所以需要把blob转成file，改变fileName上传。
 3.官网提供的demo中还有波形图，可以参考。
 
官网地址：https://recorder-api.zhuyuntao.cn/
 官网项目演示地址：https://recorder.zhuyuntao.cn/
 
 
有问题欢迎指出，一起讨论学习。
 
客户说录音文件太大，20s就有2M左右，需要压缩。
 查看文档降低采样位数，采样率，单声道可以降低音频质量，测试20s大概只有200k左右，只需获取record对象时申明即可。
 
this.recorder = new Recorder({
                    sampleBits: 8, // 采样位数，支持 8 或 16，默认是16
                    sampleRate: 11025, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
                    numChannels: 1 // 声道，支持 1 或 2， 默认是1
                    // compiling: false,(0.x版本中生效,1.x增加中)  // 是否边录边转换，默认是false
                    vue使用js-audio-recorder实现录音功能前言1.安装2.引用3.页面4.方法5.播放总结前言最近项目中需要实现一个录音上传功能，用于考试、作业中，学生可以上传朗读课文的录音，安排。效果图1.安装npm i js-audio-recorder2.引用import Recorder from 'js-audio-recorder'this.recorder = new Recorder()3.页面    <!-- 录音上传 -->    <Moda
				
最近在做的Vue项目里有关于录音和录音文件上传的功能，用到的是一个开源框架js-audio-recorder，官方文档上关于录音、暂停录音等也封装了很多方法，在这里我主要说下录音文件上传部分，网上找了很多但是关于转换成mp3格式的文件上传的不是太多，在此记录一下也方便后期自己的学习。
Vue项目js-audio-recorder导入和引用
录音文件转mp3格式并上传
Vue项目js-audio-recorder导入和引用
1.使用命令行安装库
npm i js-audio-rec.




    

				
vue-audio-recorder Vue.js的音频记录器。
它允许在服务器上创建，播放，下载和存储记录。
实时演示功能漂亮的UI干净的Vue-audio-recorder Vue.js的音频记录器。
它允许在服务器上创建，播放，下载和存储记录。
实时演示功能精美干净的UI下载/上传/播放记录时间限制记录限制大量回调个人音频播放器MP3 / WAV支持在（台式机）Chrome OS Firefox中测试在Safari浏览器中的安装vue-audio-recorder-保存AudioRecorder道具Prop类型描述尝试次数记录尝试次数的头标对象HTTP标头
				
开源项目推荐：Vue-audio-recorder，打造交互式音频录制体验
 vue-audio-recorderA simple audio recorder for VueJS applications项目地址:https://gitcode.com/gh_mirrors/vu/vue-audio-recorder 项目介绍
在这个数字化时代，语音交互已成为应用程序不可或缺的一部分。对于Vue...
				
vue使用js-audio-recorder实现一句话识别功能：以vue前端框架+腾讯云语音识别为基础，实现客户端长按录音，获取语音转换编译出来的识别码，传给后端去腾讯云语音识别库去换取识别回来的文本尽心客户端的文本查询！实现一句话查询效果！以vue前端框架+腾讯云语音识别为基础，实现客户端长按录音，获取语音转换编译出来的识别码，传给后端去腾讯云语音识别库去换取识别回来的文本尽心客户端的文本查询！实现一句话查询效果！以vue前端框架+腾讯云语音识别为基础，实现客户端长按录音，获取语音转换编译出来的识别码，传给后端去腾讯云语音识别库去换取识别回来的文本尽心客户端的文本查询！实现一句话查询效果！以vue前端框架+腾讯云语音识别为基础，实现客户端长按录音，获取语音转换编译出来的识别码，传给后端去腾讯云语音识别库去换取识别回来的文本尽心客户端的文本查询！实现一句话查询效果！以vue前端框架+腾讯云语音识别为基础，实现客户端长按录音，获取语音转换编译出来的识别码，传给后端去腾讯云语音识别库去换取识别回来的文本尽心客户端的文本查询！实现一句话查询效果！以vue前端框架+腾讯云语音识别为基础，实现客
				
要使用 vue-audio-player，需要按照以下步骤进行操作：
1. 首先，在 Vue 项目中安装 vue-audio-player，可以使用 npm 或 yarn 安装。例如，可以使用以下命令进行安装：
   npm install vue-audio-player
2. 在需要使用 vue-audio-player 的 Vue 组件中，导入 vue-audio-player：
   import VueAudioPlayer from 'vue-audio-player'
3. 在模板中使用 vue-audio-player，例如：
   <vue-audio-player src="path/to/audio.mp3"></vue-audio-player>
   在这个例子中，`src` 属性指定了音频文件的路径。
4. 可以通过设置 vue-audio-player 的各种属性和事件来自定义播放器的行为和外观。例如，可以设置 `autoplay` 属性来自动播放音频，或者监听 `ended` 事件来在音频播放结束时执行一些操作。
以上是使用 vue-audio-player 的基本步骤，如果需要更详细的使用说明和示例代码，可以参考 vue-audio-player 的官方文档。