Il peut être utilisé Recorder插件pour enregistrer dans des pages Web HTML5. Une fois l'enregistrement terminé, l'objet de fichier blob est obtenu, puis le blob est téléchargé sur le serveur ; la version vue3.0 utilisée par le projet (ce plug-in prend en charge à la fois vue2.0 et uniapp, très fort !!), pendant le processus d'enregistrement, la forme d'onde visualisée sera affichée, et en même temps, elle peut être compatible avec PC, Android et iOS, et l'encodage unique peut s'exécuter partout , haha ~ évite beaucoup de problèmes
Étape 1 :
package de plug-in d'installation npm recorder-core( documents GitHub pour le plug-in Recorder | Documents Gitee )
npm install recorder-core
Étape 2 :
Introduisez le plug-in dans le composant à enregistrer, ainsi que le plug-in d'encodeur et de visualisation correspondant au format d'enregistrement
//必须引入的核心
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类型）
Étape 3 :
première partie d'écriture de l'interface, 3 boutons, 1 zone d'affichage de forme d'onde visuelle
<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>
Étape 4 :
Activez l'enregistrement et demandez l'autorisation d'enregistrement (ces méthodes sont toutes placées dans les méthodes, comme ci-dessous)
,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);
});
}
Étape 5 :
Démarrer l'enregistrement et terminer l'enregistrement
,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;
});
}
Étape 6 :
Téléchargez le fichier d'enregistrement sur le serveur et écoutez directement le local
,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);
}
Pièce jointe : Plus de méthodes d'enregistrement
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'
Joindre l'adresse de test en ligne de ce plugin : https://xiangyuecn.gitee.io/recorder/
Une fois le projet vue3 empaqueté, placez-le sur le serveur et ouvrez l'accès https en même temps (https est nécessaire pour enregistrer, l'hôte local local n'a pas cette limitation), puis ouvrez cette page Web sur l'ordinateur, Android, et iOS pour enregistrer (mais certains navigateurs ne peuvent pas enregistrer, comme UC, Quark, mais heureusement, le système de téléphonie mobile est livré avec un navigateur et peut enregistrer dans WeChat, et l'effet est toujours très bon).
【sur】