共计 4070 个字符,预计需要花费 11 分钟才能阅读完成。
应用 Recorder 插件
能够在 HTML5 网页中进行录音,录音实现后失去 blob 文件对象,而后将 blob 上传到服务器;我的项目应用的 vue3.0 版本(这个插件同时反对 vue2.0、也反对 uniapp,很强!!),录音过程中会显示可视化波形,同时可能做到兼容 PC 端、Android、和 iOS,一次编码 到处运行,哈哈~ 省了不少事
步骤 1:
npm 装置 recorder-core
插件包(Recorder 插件的 GitHub 文档 | Gitee 文档)
npm install recorder-core
步骤 2:
在须要录音的组件中引入插件,和对应录音格局的编码器、可视化插件
// 必须引入的外围
import Recorder from 'recorder-core'
// 引入 mp3 格局反对文件;如果须要多个格局反对,把这些格局的编码引擎 js 文件放到前面通通引入进来即可
import 'recorder-core/src/engine/mp3'
import 'recorder-core/src/engine/mp3-engine'
// 录制 wav 格局的用这一句就行
//import 'recorder-core/src/engine/wav'
// 可选的插件反对项,这个是波形可视化插件
import 'recorder-core/src/extensions/waveview'
//ts import 提醒:npm 包内已自带了.d.ts 申明文件(不过是 any 类型)
步骤 3:
先编写局部界面,3 个按钮,1 个可视化波形显示区域
<template>
<div>
<div> <!-- 按钮 -->
<button @click="recOpen"> 关上录音, 申请权限 </button>
| <button @click="recStart"> 开始录音 </button>
<button @click="recStop"> 完结录音 </button>
| <button @click="recPlay"> 本地试听 </button>
</div>
<div style="padding-top:5px"> <!-- 波形绘制区域 -->
<div style="border:1px solid #ccc;display:inline-block;vertical-align:bottom">
<div style="height:100px;width:300px;" ref="recwave"></div>
</div>
</div>
</div>
</template>
步骤 4:
关上录音,申请录音权限(这些办法都是放到 methods 外面,下同)
,recOpen(){
// 创立录音对象
this.rec=Recorder({
type:"mp3" // 录音格局,能够换成 wav 等其余格局
,sampleRate:16000 // 录音的采样率,越大细节越丰盛越细腻
,bitRate:16 // 录音的比特率,越大音质越好
,onProcess:(buffers,powerLevel,bufferDuration,bufferSampleRate,newBufferIdx,asyncEnd)=>{
// 录音实时回调,大概 1 秒调用 12 次本回调
// 可实时绘制波形,实时上传(发送)数据
if(this.wave) this.wave.input(buffers[buffers.length-1],powerLevel,bufferSampleRate);
}
});
// 关上录音,取得权限
this.rec.open(()=>{console.log("录音已关上");
if(this.$refs.recwave){// 创立音频可视化图形绘制对象
this.wave=Recorder.WaveView({elem:this.$refs.recwave});
}
},(msg,isUserNotAllow)=>{
// 用户回绝了录音权限,或者浏览器不反对录音
console.log((isUserNotAllow?"UserNotAllow,":"")+" 无奈录音:"+msg);
});
}
步骤 5:
开始录音,和完结录音
,recStart(){if(!this.rec){console.error("未关上录音");return }
this.rec.start();
console.log("已开始录音");
}
,recStop(){if(!this.rec){console.error("未关上录音");return }
this.rec.stop((blob,duration)=>{
//blob 就是咱们要的录音文件对象,能够上传,或者本地播放
this.recBlob=blob;
// 简略利用 URL 生成本地文件地址,此地址只能本地应用,比方赋值给 audio.src 进行播放,赋值给 a.href 而后 a.click()进行下载(a 需提供 download="xxx.mp3" 属性)var localUrl=(window.URL||webkitURL).createObjectURL(blob);
console.log("录音胜利",blob,localUrl,"时长:"+duration+"ms");
this.upload(blob);// 把 blob 文件上传到服务器
this.rec.close();// 敞开录音,开释录音资源,当然能够不开释,前面能够间断调用 start
this.rec=null;
},(err)=>{console.error("完结录音出错:"+err);
this.rec.close();// 敞开录音,开释录音资源,当然能够不开释,前面能够间断调用 start
this.rec=null;
});
}
步骤 6:
上传录音文件到服务器,和本地间接试听
,upload(blob){
// 应用 FormData 用 multipart/form-data 表单上传文件
// 或者将 blob 文件用 FileReader 转成 base64 纯文本编码,应用一般 application/x-www-form-urlencoded 表单上传
var form=new FormData();
form.append("upfile",blob,"recorder.mp3"); // 和一般 form 表单并无二致,后端接管到 upfile 参数的文件,文件名为 recorder.mp3
form.append("key","value"); // 其余参数
var xhr=new XMLHttpRequest();
xhr.open("POST", "/upload/xxxx");
xhr.onreadystatechange=()=>{if(xhr.readyState==4){if(xhr.status==200){console.log("上传胜利");
}else{console.error("上传失败"+xhr.status);
};
};
};
xhr.send(form);
}
,recPlay(){
// 本地播放录音试听,能够间接用 URL 把 blob 转换成本地播放地址,用 audio 进行播放
var localUrl=URL.createObjectURL(this.recBlob);
var audio=document.createElement("audio");
audio.controls=true;
document.body.appendChild(audio);
audio.src=localUrl;
audio.play(); // 这样就能播放了
// 留神不必了时须要 revokeObjectURL,否则霸占内存
setTimeout(function(){URL.revokeObjectURL(audio.src) },5000);
}
附:Recorder 的更多办法
rec.open(success,fail) // 关上录音,申请录音权限
rec.close() // 敞开录音,开释麦克风资源
rec.start() // 开始录音
rec.stop(success,fail) // 完结录音
rec.pause() // 暂停录音
rec.resume() // 复原持续录音
// 可视化插件:WaveView 插件
import 'recorder-core/src/extensions/waveview'
// 可视化插件:WaveSurferView 插件
import 'recorder-core/src/extensions/wavesurfer.view'
// 可视化插件:FrequencyHistogramView 插件
import 'recorder-core/src/extensions/frequency.histogram.view'
import 'recorder-core/src/extensions/lib.fft'
//BufferStreamPlayer 插件:实时播放录音片段文件,把片段文件转换成 MediaStream 流
import 'recorder-core/src/extensions/buffer_stream.player'
//ASR_Aliyun_Short 插件:阿里云语音辨认(语音转文字),反对实时语音辨认、单个音频文件转文字
import 'recorder-core/src/extensions/asr.aliyun.short'
//Sonic 插件:变速变调插件
import 'recorder-core/src/extensions/sonic'
附这个插件的在线测试地址:https://xiangyuecn.gitee.io/recorder/
vue3 我的项目打包后,放服务器外面,同时开启 https 拜访(必须 https 能力录音,本地 localhost 没有这个限度),而后电脑、Android、iOS 上关上这个网页就都能录音了(但有些浏览器不能录音,比方 UC、夸克,不过好在手机零碎自带浏览器、微信外面都能录音,成果还是很不错的)。
【完】
正文完