当前位置: 首页 > news >正文

微信小程序接口实现语音转文字

一、效果展示

我们有一个按钮,点击“开始录音”按钮,此时按钮变成“停止录音”并开始计时,点击停止录音后,界面上即可展示返回的文字
在这里插入图片描述

二、代码实现

完整代码实现见github

1.小程序端代码

// index.js
const recorderManager = wx.getRecorderManager();Page({data: {recordState: false,  // 录音状态recordTime: 0,       // 录音时长voices: [],          // 语音消息列表},// 开始录音startRecord() {const options = {duration: 60000, // 最长录音时间,单位mssampleRate: 16000,numberOfChannels: 1,encodeBitRate: 48000,format: 'mp3',};recorderManager.start(options);this.setData({ recordState: true, recordTime: 0 });this.startTimer();recorderManager.onStart(() => {console.log('recorder start');});recorderManager.onError((res) => {console.error('recorder error:', res);});},// 停止录音stopRecord() {recorderManager.stop();this.setData({ recordState: false });this.clearTimer();recorderManager.onStop((res) => {console.log('recorder stop', res);this.uploadVoice(res.tempFilePath);});},// 上传语音文件并转换为文本uploadVoice(filePath) {wx.showLoading({ title: '识别中...' });wx.uploadFile({url: 'http://localhost:3000/upload', // 替换为你的服务器地址filePath: filePath,name: 'file',success: (res) => {wx.hideLoading();const data = JSON.parse(res.data);if (data.text) {this.setData({voices: [...this.data.voices, { type: 'text', content: data.text }]});}},fail: (error) => {wx.hideLoading();console.error('Upload failed', error);wx.showToast({title: '上传失败',icon: 'none'});}});},// 开始计时器startTimer() {this.timer = setInterval(() => {this.setData({ recordTime: this.data.recordTime + 1 });}, 1000);},// 清除计时器clearTimer() {if (this.timer) {clearInterval(this.timer);this.timer = null;}},// 组件生命周期函数onUnload() {this.clearTimer();}
});

2.服务端代码

const path = require('path');
const fs = require('fs');
const express = require('express');
const axios = require('axios');
const multer = require('multer');
const FormData = require('form-data');require('dotenv').config();
const { APP_ID, APP_SECRET, PORT } = process.env// 确保 uploads 目录存在
const uploadsDir = path.join(__dirname, 'uploads');
if (!fs.existsSync(uploadsDir)) {fs.mkdirSync(uploadsDir);
}const app = express();// 替换为你的 AppID 和 AppSecret
const appId = APP_ID;
const appSecret = APP_SECRET;// 配置 multer 来处理文件上传
const storage = multer.diskStorage({destination: function (req, file, cb) {cb(null, 'uploads/')},filename: function (req, file, cb) {cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))}
});const upload = multer({ storage: storage });// 获取 ACCESS_TOKEN 的函数
async function getAccessToken() {const url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret}`;try {const response = await axios.get(url);console.log('Access token response:', response.data);if (response.data.access_token) {return response.data.access_token;} else {throw new Error('Failed to get access token');}} catch (error) {console.error('Error getting access token:', error);return null;}
}// 调用微信语音识别接口
async function recognizeSpeech(accessToken, filePath) {try {console.log('Reading file:', filePath);// const fileContent = fs.readFileSync(filePath);// const base64Audio = fileContent.toString('base64');const form = new FormData();form.append('media', fs.createReadStream(filePath));const voice_id = Date.now().toString();const url = `https://api.weixin.qq.com/cgi-bin/media/voice/addvoicetorecofortext?access_token=${accessToken}&format=mp3&voice_id=${voice_id}&lang=zh_CN`console.log('Calling WeChat API...', url);const response = await axios.post(url,form,{headers: form.getHeaders(),});console.log('WeChat API response:', response.data);if (response.data.errcode) {throw new Error(`WeChat API error: ${response.data.errmsg}`);}const queryRecoresultUrl = `https://api.weixin.qq.com/cgi-bin/media/voice/queryrecoresultfortext?access_token=${accessToken}&voice_id=${voice_id}&lang=zh_CN`const res = await axios.post(queryRecoresultUrl,{},{headers: { 'Content-Type': 'application/json' }});console.log('xxxxx', res.data)return res.data.result;} catch (error) {console.error('Error recognizing speech:', error);throw error;}
}// 处理语音文件上传和识别
app.post('/upload', upload.single('file'), async (req, res) => {if (!req.file) {return res.status(400).send('No file uploaded.');}console.log('File uploaded:', req.file);try {let accessToken;let recognitionResult;let retries = 1;while (retries > 0) {try {accessToken = await getAccessToken();console.log('Got access token:', accessToken);recognitionResult = await recognizeSpeech(accessToken, `uploads/0.mp3`);console.log('Recognition result:', recognitionResult);break;} catch (error) {console.error(`Attempt failed, retries left: ${retries - 1}`, error);retries--;if (retries === 0) throw error;await new Promise(resolve => setTimeout(resolve, 1000)); // 等待1秒后重试}}// 删除临时文件fs.unlinkSync(req.file.path);res.json({ text: recognitionResult });} catch (error) {console.error('Error:', error);res.status(500).send('Server error: ' + error.message);}
});// 启动服务器
app.listen(PORT, () => {console.log(`Server is running on http://localhost:${PORT}`);
});

三、返回示例

在这里插入图片描述

四、遗留问题

可能由于个人水平问题,有以后遗留问题,如果大家解决方案或问题,欢迎随时交流

  1. 此代码在服务端写死了一个待转换的mp3文件,因为开发环境本底录音无法试听
  2. 录音不知道什么原因,可能会有一半不会被翻译,暂时没有找到解决方案
  3. 多次上传同一个录音后,会返回空的转换结果

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 牛客周赛 Round 54 (c++题解)
  • 使用Echarts来实现数据可视化
  • python-查找元素3(赛氪OJ)
  • minio文件上传
  • 书籍去掉字符串中连续出现k个0的子串
  • Linux防火墙2
  • JS+H5美观的带搜索的博客文章列表(可搜索多个参数)
  • 数据可视化(王者英雄数据分析)
  • 系统架构师(每日一练14)
  • 【LeetCode】108. 将有序数组转换为二叉搜索树
  • mysql数据库迁移
  • Face2V人脸向量开发包
  • 使用python爬取今日头条热搜
  • 使用EntityFramework8的学习和开发过程中一些经验
  • Webpack、Vite区别知多少?
  • __proto__ 和 prototype的关系
  • CSS3 变换
  • css系列之关于字体的事
  • flutter的key在widget list的作用以及必要性
  • java多线程
  • LeetCode刷题——29. Divide Two Integers(Part 1靠自己)
  • QQ浏览器x5内核的兼容性问题
  • SpringCloud集成分布式事务LCN (一)
  • vue的全局变量和全局拦截请求器
  • 技术攻略】php设计模式(一):简介及创建型模式
  • 扑朔迷离的属性和特性【彻底弄清】
  • 如何设计一个微型分布式架构?
  • linux 淘宝开源监控工具tsar
  • 直播平台建设千万不要忘记流媒体服务器的存在 ...
  • ​【原创】基于SSM的酒店预约管理系统(酒店管理系统毕业设计)
  • ​软考-高级-信息系统项目管理师教程 第四版【第19章-配置与变更管理-思维导图】​
  • ​云纳万物 · 数皆有言|2021 七牛云战略发布会启幕,邀您赴约
  • (2021|NIPS,扩散,无条件分数估计,条件分数估计)无分类器引导扩散
  • (31)对象的克隆
  • (aiohttp-asyncio-FFmpeg-Docker-SRS)实现异步摄像头转码服务器
  • (vue)el-cascader级联选择器按勾选的顺序传值,摆脱层级约束
  • (vue)el-checkbox 实现展示区分 label 和 value(展示值与选中获取值需不同)
  • (第27天)Oracle 数据泵转换分区表
  • (附源码)spring boot球鞋文化交流论坛 毕业设计 141436
  • (六)DockerCompose安装与配置
  • (深度全面解析)ChatGPT的重大更新给创业者带来了哪些红利机会
  • (十二)Flink Table API
  • (四)js前端开发中设计模式之工厂方法模式
  • .bat批处理(八):各种形式的变量%0、%i、%%i、var、%var%、!var!的含义和区别
  • .bat批处理(七):PC端从手机内复制文件到本地
  • .locked1、locked勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复
  • .mkp勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复
  • .Net Core中的内存缓存实现——Redis及MemoryCache(2个可选)方案的实现
  • .net framework4与其client profile版本的区别
  • .NET/C# 异常处理:写一个空的 try 块代码,而把重要代码写到 finally 中(Constrained Execution Regions)
  • .NET6使用MiniExcel根据数据源横向导出头部标题及数据
  • .Net面试题4
  • .pyc文件还原.py文件_Python什么情况下会生成pyc文件?
  • .vollhavhelp-V-XXXXXXXX勒索病毒的最新威胁:如何恢复您的数据?
  • ??eclipse的安装配置问题!??