## 介绍 js-audio-recorder是一个纯js实现的浏览器端录音插件。 目前支持以下功能: - 录音,暂停,恢复,和录音播放。 - 音频数据的压缩,支持单双通道录音。 - 录音时长、录音大小的显示。 - 导出录音文件,格式为pcm或wav。 - 录音波形显示,可自己定制。 ## 相关链接
//上传wav录音数据uploadWAVData() {varwavBlob =this.recorder.getWAVBlob();//创建一个formData对象varformData =newFormData()//此处获取到blob对象后需要设置fileName满足当前项目上传需求,其它项目可直接传把blob作为file塞入formDataconstnewbolb =newBlob([wavBlob], { type:'audio/wav'})//获取当时时间戳...
letwavBlob=this.recorder.getWAVBlob()letpcmBlob=this.recorder.getPCMBlob()this.recorder.downloadWAV()this.recorder.downloadPCM() 根据方法名,很容易理解,前两个方法是将wav/pcm格式的语音赋值给你声明的变量,后两个方法是触发浏览器的下载功能让用户获取语音并保存到电脑上 但是这里有个问题,就是他返回过来...
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() ...
recorder) { this.recorder.destroy(); this.recorder = null; } } }; </script> 4. 实现将生成的wav文件上传到后端的功能 在停止录音后,你可以获取录音的Blob对象,并将其上传到后端。这里使用FormData和fetch API进行上传: javascript methods: { async uploadRecording() { if (!this.audioUrl) ...
理解blob对象：二进制数据存储形式，适用于语音文件。然而，blob对象缺少文件名信息，导致上传时文件名混乱，影响后端处理。解决方法：使用代码将blob对象转换为file对象，允许为file对象指定文件名及扩展名。对于wav文件，确保指定扩展名。利用提供的功能实现语音播放及控制，根据实际需求构建网页播放器。
Vue中使用js-audio-recorder插件实现录音功能并实现上传Blob数据到SpringBoot后台接口: Vue中使用js-audio-recorder插件实现录音功能并实现上传Blob数据到SpringBoot后台接口_霸道流氓气质的博客- 上面在进行web端录音时在本地使用127.0.0.1或者localhost运行时可以正常录音,但是在通过ip访问进行录音时提示: ...
npm i js-audio-recorder 1. 代码 <template> <div class="BaseRecorder"> <div class="BaseRecorder-record"> <el-button @click="startRecorder()" :disabled="recorder_state !== '无'">开始录音</el-button> <el-button @click="pauseRecorder()">暂停录音</el-button> ...
importRecorderfrom"js-audio-recorder";constrecorder=newRecorder({sampleBits:16,// 采样位数,支持 8 或 16,默认是16sampleRate:48000,// 采样率,支持 11025、16000、22050、24000、44100、48000,根据浏览器默认值,我的chrome是48000numChannels:1,// 声道,支持 1 或 2, 默认是1// compiling: false,(0.x...