当前位置:首页 » 《随便一记》 » 正文

uniapp 开发H5页面,实现语音识别功能--前端,不包含后端转换

19 人参与  2024年05月27日 08:41  分类 : 《随便一记》  评论

点击全文阅读


一、背景

微信小程序开发,内嵌h5页面,不能调用微信内部的插件

二、实现方式

通过安装 js-audio-recorder 插件实现既定需求

三、具体步骤

1、安装插件

npm i js-audio-recorder

2、引入

在需要使用的页面中引入:import Recorder from 'js-audio-recorder';

3、具体配置

1、定义recorderdata() {return {recorder: null};},2、页面加载时,初始化onLoad() {this.recorder = new Recorder();},3、具体方法methods:{4、鼠标点击方法startRecording() {this.recorder = new Recorder();Recorder.getPermission().then(() => {console.log('开始录音');this.titleShow = true;this.recorder.start(); // 开始录音},(error) => {uni.showToast({title: '请先允许该网页使用麦克风',icon:"error"});console.log(`${error.name} : ${error.message}`);});},5、鼠标松开的方法touchEnd() {this.yyShow = false;this.titleShow = false;const blob = this.recorder.getWAVBlob(); //调这个方法会自动调用stopconst newbolb = new Blob([blob], { type: 'audio/wav' });this.blobToBase64(newbolb).then((base64) => {7、调用后端接口this.$UniRequest.Post({url: this.$AppConfig.audio2text,para: {audioBase64: base64},success: (res) => {if (res.audiocont == 'null') {uni.showToast({title: '未识别到您的语音,请重试',icon: 'error'});this.customerText = '';} else {this.customerText = res.audiocont;}},fail: (err) => {uni.showModal({title: '提示',content: err,showCancel: false});}});}).catch((err) => {console.error(err);});},6、音频转base64blobToBase64(blob) {return new Promise((resolve, reject) => {const reader = new FileReader();reader.readAsDataURL(blob);reader.onload = () => {const base64 = reader.result.split(',')[1];resolve(base64);};reader.onerror = () => {reject(new Error('blobToBase64 error'));};});}}


点击全文阅读


本文链接:http://zhangshiyu.com/post/114047.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1