Recorder 实现语音录制并上传到后端(兼容PC和移动端)

2024-02-20 10:36

本文主要是介绍Recorder 实现语音录制并上传到后端(兼容PC和移动端),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Recorder 首页:https://github.com/xiangyuecn/Recorder

一、安装

npm install recorder-core

二、代码部分

1. HTML页面

<template><div><el-inputv-model="ttsText"type="textarea"placeholder="请输入内容"></el-input><el-button type="success" @click="recStart()">开始录音</el-button><el-button type="success" @click="recStop()">结束录音</el-button><el-button type="success" @click="recPlay()">本地试听</el-button><div style="padding-top: 5px"><!-- 波形绘制区域 --><divstyle="border: 1px solid #ccc;display: inline-block;vertical-align: bottom;"><div style="height: 100px; width: 300px" ref="recwave"></div></div></div></div>
</template>

2. 引入插件

// 上传语音文件用
import axios from "axios";
// Recorder核心文件
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. 方法

// 转文字的内容
var ttsText = ref("");
// 录音Recorder对象
let rec: any;
// 录音文件对象
let recBlob: any;
let wave: any;
const recwave = ref(null);// 打开录音(请求权限)
function recOpen() {//创建录音对象rec = Recorder({type: "wav", //录音格式,可以换成mp3等其他格式sampleRate: 16000, //录音的采样率,越大细节越丰富越细腻bitRate: 16, //录音的比特率,越大音质越好onProcess: (buffers: any,powerLevel: any,bufferDuration: any,bufferSampleRate: any,newBufferIdx: any,asyncEnd: any) => {//录音实时回调,大约1秒调用12次本回调//可实时绘制波形,实时上传(发送)数据if (wave) {wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate);}},});if (!rec) {alert("当前浏览器不支持录音功能!");return;}// 打开录音,获得权限rec.open(() => {console.log("录音已打开");//创建音频可视化图形绘制对象if (recwave.value) {wave = Recorder.WaveView({ elem: recwave.value });}},(msg: any, isUserNotAllow: any) => {//用户拒绝了录音权限,或者浏览器不支持录音console.log((isUserNotAllow ? "UserNotAllow," : "") + "无法录音:" + msg);});
}
// 开始录音
function recStart() {if (!rec) {console.error("未打开录音");return;}rec.start();console.log("已开始录音");
}
// 结束录音
function recStop() {if (!rec) {console.error("未打开录音");return;}rec.stop((blob: any, duration: any) => {//blob就是我们要的录音文件对象,可以上传,或者本地播放recBlob = blob;//简单利用URL生成本地文件地址,此地址只能本地使用,比如赋值给audio.src进行播放,赋值给a.href然后a.click()进行下载(a需提供download="xxx.mp3"属性)const localUrl = (window.URL || window.webkitURL).createObjectURL(blob);console.log("录音成功", blob, localUrl, "时长:" + duration + "ms");upload(blob); //把blob文件上传到服务器//   rec.close(); //关闭录音,释放录音资源,当然可以不释放,后面可以连续调用start,关闭的话则需要重新打开录音//   rec = null;},(err: any) => {console.error("结束录音出错:" + err);rec.close(); //关闭录音,释放录音资源,当然可以不释放,后面可以连续调用startrec = null;});
}
// 上传录音
function upload(blob: any) {console.log("视频上传服务器:");//blob格式转换为base64格式blobToDataURI(blob, function (result) {axios({method: "POST",url: `https://xxxxx/api/xxxxx/xxxxx`,		// 这里是后端的接口地址,我这边后端用的是百度语音识别(百度文档里面写的,必须后端进行交互,前端无法直接交互,因为前端无法访问百度语音识别的域名)headers: {"Content-Type": "application/json",},// 在请求之前对data传参进行格式转换transformRequest: [function (data) {data = JSON.stringify(data);return data;},],params: {},// 这里是传递的参数data: {file: result.split(",")[1],format: "wav",len: atob(result.split(",")[1]).length,},}).then((res) => {let resp = res.data;if (resp.err_msg == "success.") {ttsText.value = resp.result[0];console.log("返回文字内容:", ttsText.value);}}).catch((req) => {console.log(req);});});
}
// 本地播放录音
function recPlay() {//本地播放录音试听,可以直接用URL把blob转换成本地播放地址,用audio进行播放const localUrl = URL.createObjectURL(recBlob);const audio = document.createElement("audio");audio.controls = true;document.body.appendChild(audio);audio.src = localUrl;audio.play(); //这样就能播放了//注意不用了时需要revokeObjectURL,否则霸占内存setTimeout(function () {URL.revokeObjectURL(audio.src);}, 5000);
}// blob 转 base64
function blobToDataURI(blob, callback) {var reader = new FileReader();reader.readAsDataURL(blob);reader.onload = function (e) {callback(e.target.result);};
}
  1. 使用
onMounted(async () => {// 开启麦克风权限recOpen();
});
  1. 示例
    在这里插入图片描述

备注: 如果本地开发的时候,浏览器提示录音open失败:浏览器禁止不安全页面录音。可通过开启https解决问题

本文参考文章(做了部分修改):https://blog.csdn.net/IAIPython/article/details/134611674

这篇关于Recorder 实现语音录制并上传到后端(兼容PC和移动端)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/727937

相关文章

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

golang版本升级如何实现

《golang版本升级如何实现》:本文主要介绍golang版本升级如何实现问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录golanwww.chinasem.cng版本升级linux上golang版本升级删除golang旧版本安装golang最新版本总结gola

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

Mysql实现范围分区表(新增、删除、重组、查看)

《Mysql实现范围分区表(新增、删除、重组、查看)》MySQL分区表的四种类型(范围、哈希、列表、键值),主要介绍了范围分区的创建、查询、添加、删除及重组织操作,具有一定的参考价值,感兴趣的可以了解... 目录一、mysql分区表分类二、范围分区(Range Partitioning1、新建分区表:2、分

MySQL 定时新增分区的实现示例

《MySQL定时新增分区的实现示例》本文主要介绍了通过存储过程和定时任务实现MySQL分区的自动创建,解决大数据量下手动维护的繁琐问题,具有一定的参考价值,感兴趣的可以了解一下... mysql创建好分区之后,有时候会需要自动创建分区。比如,一些表数据量非常大,有些数据是热点数据,按照日期分区MululbU