基于阿里云微信小程序语音识别

页面效果
在这里插入图片描述
其中采用阿里云语音识别：阿里云一句话语音识别

语音识别页面


<template><view><view class="chat_list"><view v-for="v in chatList" :class="v.type == 'right' ? 'type_right' : 'type_left'"><chat :text="v.result" :type="v.type"></chat></view></view><view :class="longPress == '1' ? 'record-layer' : 'record-layer1'"><view :class="longPress == '1' ? 'record-box' : 'record-box1'"><view class="record-btn-layer flex_row"><button v-show="longPress == '1'" class="record-btn-cir" @click="isKeyWord = !isKeyWord"><image v-if="!isKeyWord" :src="keyword" style=" margin-top: -8rpx;" /><image v-else :src="record" style=" margin-top: -8rpx;" /></button><button v-show="!isKeyWord" class="record-btn":class="longPress == '1' ? 'record-btn-1' : 'record-btn-2'":style="VoiceTitle != '松开手指,取消发送' && longPress != '1' ? 'background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);' : 'background-color: rgba(0, 0, 0, .5);color:white'"@longpress="longpressBtn" @touchend="touchendBtn()" @touchmove="handleTouchMove"><image :src="record" /><text>{{ VoiceText }}</text></button><u--input v-if="longPress == '1' && isKeyWord" shape="circle" customStyle="u_input" clearableplaceholder="请输入内容..." @confirm="confirmMsg"></u--input></view><!-- 语音音阶动画 --><view :class="VoiceTitle != '松开手指,取消发送' ? 'prompt-layer prompt-layer-1' : 'prompt-layer1 prompt-layer-1'"v-if="longPress == '2'"><view class="prompt-loader"><view class="em" v-for="(item, index) in 15" :key="index"></view></view><text class="span">{{ VoiceTitle }}</text></view></view></view></view>
</template><script>
const recorderManager = uni.getRecorderManager()
const SpeechRecognition = require("../../utils/sr")
const getToken = require("../../utils/token").getToken
import keyword from '../public/images/keyword.png'
import record from '../public/images/record.png'
import chat from './com/chat.vue'
export default {components: { chat },data() {return {record,keyword,longPress: '1', // 1显示 按住 说话 2显示 说话中delShow: false, // 删除提示框显示隐藏time: 0, //录音时长duration: 60000, //录音最大值ms 60000/1分钟tempFilePath: '', //音频路径startPoint: {}, //记录长按录音开始点信息,用于后面计算滑动距离。sendLock: true, //发送锁，当为true时上锁，false时解锁发送VoiceTitle: '松手结束录音',VoiceText: '按住 说话',token: "",srStart: false,srResult: {},sr: null,isKeyWord: false,chatList: []}},async onLoad() {recorderManager.onFrameRecorded((res) => {if (this.sr && this.srStart) {if (res.frameBuffer) {console.log("send " + res.frameBuffer.byteLength)this.sr.sendAudio(res.frameBuffer)}}})recorderManager.onStop(async (res) => {if (this.sendLock) {//上锁不发送} else {//解锁发送，发送网络请求if (res.duration < 1000) {wx.showToast({title: "录音时间太短",icon: "none",duration: 1000});await this.sr.close()this.srStart = false}else {// this.tempFilePath = res.tempFilePathawait this.sr.close()this.srStart = falsethis.srResult.payload.type = 'right'this.chatList.push(this.srResult.payload)console.log('this.chatList.', this.chatList);}}})try {let token = await getToken('your akid','your akkey')this.token = token} catch (e) {console.log("error on get token:", JSON.stringify(e))}},onUnload: function () {this.srStart = falserecorderManager.stop()if (this.sr) {this.sr.shutdown()}},methods: {initSt() {const sr = new SpeechRecognition({url: 'wss://nls-gateway-cn-shanghai.aliyuncs.com/ws/v1',appkey: 'your app key',token: this.token})console.warn("sr 初始化成功")sr.on("started", (msg) => {console.log("Client recv started", JSON.parse(msg))})sr.on("changed", (msg) => {console.log("Client recv changed:", JSON.parse(msg))this.srResult = JSON.parse(msg)})sr.on("completed", (msg) => {console.log("Client recv completed:", JSON.parse(msg))this.srResult = JSON.parse(msg)})sr.on("failed", (msg) => {console.log("Client recv failed:", JSON.parse(msg))})sr.on("closed", () => {console.error("sr 连接已关闭")})this.sr = sr},// 长按录音事件async longpressBtn(e) {recorderManager.start({duration: 600000,numberOfChannels: 1,sampleRate: 16000,format: "PCM",frameSize: 4})this.initSt()this.startPoint = e.touches[0];//记录长按时开始点信息，后面用于计算上划取消时手指滑动的距离。this.longPress = '2';this.VoiceText = '说话中...';if (!this.sr || this.srStart) {return}try {await this.sr.start(this.sr.defaultStartParams())this.srStart = true} catch (e) {console.log("start failed:" + e)return}// 监听音频开始事件this.sendLock = false;//长按时是不上锁的。},// 长按松开录音事件touchendBtn() {this.longPress = '1';this.VoiceText = '按住 说话';this.VoiceTitle = '松手结束录音'recorderManager.stop();},// 删除录音handleTouchMove(e) {//touchmove时触发var moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY; //移动距离if (Math.abs(moveLenght) > 70) {this.VoiceTitle = "松开手指,取消发送";this.VoiceText = '松开手指,取消发送';this.delBtn()this.sendLock = true;//触发了上滑取消发送，上锁} else {this.VoiceTitle = "松手结束录音";this.VoiceText = '松手结束录音';this.sendLock = false;//上划距离不足，依然可以发送，不上锁}},delBtn() {this.delShow = false;this.time = 0// this.tempFilePath = '';// this.VoiceTitle = '松手结束录音'},}
}
</script><style lang="scss">
/* 语音录制开始--------------------------------------------------------------------- */
.record-layer {width: 91vw;box-sizing: border-box;height: 15vw;position: fixed;margin-left: 4vw;z-index: 10;bottom: 2vh;
}.record-layer1 {width: 100vw;box-sizing: border-box;height: 100vh;position: fixed;background-color: rgba(0, 0, 0, .6);z-index: 10;bottom: 0vh;
}.record-box {width: 100%;position: relative;
}.record-box1 {width: 100%;position: relative;bottom: -83vh;height: 17vh;
}.record-btn-layer {// width: 100%;
}.record-btn-layer button::after {border: none;transition: all 0.1s;
}.record-btn-layer button {font-size: 14px;line-height: 40px;width: 100%;height: 40px;text-align: center;transition: all 0.1s;
}.record-btn-layer button image {width: 16px;height: 16px;margin-right: 4px;vertical-align: middle;transition: all 0.3s;
}.record-btn-layer .record-btn-2 {border-radius: 168rpx 168rpx 0 0;height: 17vh;line-height: 17vh;transition: all 0.3s;
}/* 提示小弹窗 */
.prompt-layer {border-radius: 15px;background: #95EB6C;padding: 8px 16px;box-sizing: border-box;position: absolute;left: 50%;height: 11vh;transform: translateX(-50%);transition: all 0.3s;
}.prompt-layer::after {content: '';display: block;border: 12px solid rgba(0, 0, 0, 0);border-radius: 10rpx;border-top-color: #95EB6C;position: absolute;bottom: -46rpx;left: 50%;transform: translateX(-50%);transition: all 0.3s;
}//取消动画
.prompt-layer1 {border-radius: 15px;background: #FB5353;padding: 8px 16px;box-sizing: border-box;position: absolute;left: 50%;height: 11vh;transform: translateX(-50%);transition: all 0.3s;
}.prompt-layer1::after {content: '';display: block;border: 12px solid rgba(0, 0, 0, 0);border-radius: 10rpx;border-top-color: #FB5353;position: absolute;bottom: -46rpx;left: 50%;transform: translateX(-50%);transition: all 0.3s;
}.prompt-layer-1 {font-size: 12px;width: 150px;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;top: -400rpx;
}.prompt-layer-1 .p {color: #000000;
}.prompt-layer-1 .span {color: rgba(0, 0, 0, .6);
}.prompt-loader .em {}/* 语音音阶------------- */
.prompt-loader {width: 96px;height: 20px;display: flex;align-items: center;justify-content: space-between;margin-bottom: 6px;
}.prompt-loader .em {display: block;background: #333333;width: 1px;height: 10%;margin-right: 2.5px;float: left;
}.prompt-loader .em:last-child {margin-right: 0px;
}.prompt-loader .em:nth-child(1) {animation: load 2.5s 1.4s infinite linear;
}.prompt-loader .em:nth-child(2) {animation: load 2.5s 1.2s infinite linear;
}.prompt-loader .em:nth-child(3) {animation: load 2.5s 1s infinite linear;
}.prompt-loader .em:nth-child(4) {animation: load 2.5s 0.8s infinite linear;
}.prompt-loader .em:nth-child(5) {animation: load 2.5s 0.6s infinite linear;
}.prompt-loader .em:nth-child(6) {animation: load 2.5s 0.4s infinite linear;
}.prompt-loader .em:nth-child(7) {animation: load 2.5s 0.2s infinite linear;
}.prompt-loader .em:nth-child(8) {animation: load 2.5s 0s infinite linear;
}.prompt-loader .em:nth-child(9) {animation: load 2.5s 0.2s infinite linear;
}.prompt-loader .em:nth-child(10) {animation: load 2.5s 0.4s infinite linear;
}.prompt-loader .em:nth-child(11) {animation: load 2.5s 0.6s infinite linear;
}.prompt-loader .em:nth-child(12) {animation: load 2.5s 0.8s infinite linear;
}.prompt-loader .em:nth-child(13) {animation: load 2.5s 1s infinite linear;
}.prompt-loader .em:nth-child(14) {animation: load 2.5s 1.2s infinite linear;
}.prompt-loader .em:nth-child(15) {animation: load 2.5s 1.4s infinite linear;
}@keyframes load {0% {height: 10%;}50% {height: 100%;}100% {height: 10%;}
}/* 语音音阶-------------------- */
.prompt-layer-2 {top: -40px;
}.prompt-layer-2 .text {color: rgba(0, 0, 0, 1);font-size: 12px;
}/* 语音录制结束---------------------------------------------------------------- */
.flex_row {display: flex;flex-direction: row;gap: 10rpx
}.record-btn-cir {flex-basis: 100rpx;border-width: 0.5px !important;border-color: #dadbde !important;border-style: solid;
}.u_input {border-width: 0.5px !important;border-color: #dadbde !important;border-style: solid;
}.record-btn-layer .record-btn-1 {background: #fff !important;// background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);color: #000000 !important;border-width: 0.5px !important;border-color: #dadbde !important;border-style: solid;border-radius: 8px;
}.chat_list {padding-top: 30rpx;max-height: 86vh;overflow-y: scroll;
}.type_right {margin: 30rpx 0 30rpx 50%;
}.type_left {margin: 30rpx 0 30rpx 30rpx;
}
</style>

聊天组件

<template><view class="box"><view class="qpk">{{ text }}</view><view :class="type == 'right' ? 'triangle_right' : 'triangle_left'"></view></view>
</template><script>
export default {props: {text: {type: String,default: ""},type: {type: String,default: "right"}},data() {return {};},watch: {},methods: {},
};
</script>
<style lang="scss" scoped>
// 气泡框样式
.box {position: relative;.qpk {width: 300rpx;height: 100%;text-align: left;background: #43e97b !important;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;word-break: break-all;padding: 18rpx 20rpx;font-size: 14px;}.triangle_left {position: absolute;height: 0px;width: 0px;border-width: 8px 18px 8px 0;border-style: solid;border-color: transparent #43e97b transparent transparent;top: 8rpx;left: -26rpx;}.triangle_right {position: absolute;height: 0px;width: 0px;border-width: 8px 0px 8px 18px;border-style: solid;border-color: transparent transparent transparent #43e97b;top: 8rpx;left: 326rpx;}
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/29820.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

React和Vue生命周期

React和Vue生命周期

主要就是命名不同 目录 React 组件挂载 挂载前constructor() 挂载时render() 挂载后componentDidMount()&#xff1a;初始化节点 更新 更新时render()&#xff1a;prop/state改变 更新后componentDidUpdate() 卸载 卸载前componentWillUnmount()&#xff1a;清理 V…
阅读更多...
Microsoft Outlook如何定时发送邮件

Microsoft Outlook如何定时发送邮件

点击New Emai 选择Options→Delay Delivery→Do not deliver before→Close
阅读更多...
MySQL（六）主从复制

MySQL（六）主从复制

MySQL系列文章 MySQL&#xff08;一&#xff09;基本架构、SQL语句操作、试图 MySQL&#xff08;二&#xff09;索引原理以及优化 MySQL&#xff08;三&#xff09;SQL优化、Buffer pool、Change buffer MySQL&#xff08;四&#xff09;事务原理及分析 MySQL&#xff08;五&a…
阅读更多...
HTML+CSS+JavaScript：渲染柱形统计图

HTML+CSS+JavaScript：渲染柱形统计图

一、需求 用户输入四个季度的数据&#xff0c;根据数据生成柱形统计图&#xff0c;浏览器预览效果如下 二、完整代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content&q…
阅读更多...
Jenkins | 获取凭证密码

Jenkins | 获取凭证密码

目录 方法一&#xff1a;查看所有账号及密码 方法二&#xff1a;查看指定账号密码 方法一&#xff1a;查看所有账号及密码 Jenkins > 系统管理 > 脚本命令行 com.cloudbees.plugins.credentials.SystemCredentialsProvider.getInstance().getCredentials().forEach{i…
阅读更多...
VoIP监控工具有什么作用

VoIP监控工具有什么作用

VoIP 监控工具利用思科的 IPSLA 技术生成合成流量并监控客户端体验的呼叫质量。与被动监控VoIP指标相反&#xff0c;IPSLA技术允许IT管理员主动并在潜在问题发生之前检测到它们&#xff0c;这使组织能够轻松遵守严格的SLA指标。 思科 IPSLA 技术在两台设备之间创建流量&#x…
阅读更多...
gd32f103vbt6 串口OTA升级3-linux端的部分

gd32f103vbt6 串口OTA升级3-linux端的部分

一. 简介 本文主要是对linux端升级单片机程序的功能部分做一些介绍&#xff0c;包括一些软件流程。 二.硬件部分 2.1 rk3399cpugd32f103 2.2 连接方式&#xff1a;串口&#xff08;115200&#xff0c;8N1&#xff09;或者iic&#xff08;本文没有介绍iic&#xff09; 三、其…
阅读更多...
linux下一个iic驱动（按键+点灯）-互斥

linux下一个iic驱动（按键+点灯）-互斥

一、前提&#xff1a; 硬件部分&#xff1a; 1. rk3399开发板&#xff0c;其中的某一路iic&#xff0c;这个作为总线的主控制器 2. gd32单片机&#xff0c;其中的某一路iic&#xff0c;从设备。主要是按键上报和灯的亮灭控制。&#xff08;按键大约30个&#xff0c;灯在键的…
阅读更多...
Appium+python自动化（十二）- Android UIAutomator终极定位凶器（超详解）

Appium+python自动化（十二）- Android UIAutomator终极定位凶器（超详解）

简介 乍眼一看&#xff0c;小伙伴们觉得这部分其实在异性兄弟那里就做过介绍和分享了&#xff0c;其实不然&#xff0c;上次介绍和分享的大哥是uiautomatorviewer&#xff0c;是一款定位工具。今天介绍的是一个java库&#xff0c;提供执行自动化测试的各种API。 Android团队在4…
阅读更多...
供应链管理系统有哪些？

供应链管理系统有哪些？

1万字干货分享&#xff0c;国内外 20款 供应链管理软件都给你讲的明明白白。如果你还不知道怎么选择&#xff0c;一定要翻到第三大段&#xff0c;这里我将会通过8年的软件产品选型经验告诉你&#xff0c;怎么样才能快速选到适合自己的软件工具。 &#xff08;为防后续找不到&a…
阅读更多...
2023护网面试题200道（附答案）

2023护网面试题200道（附答案）

最近日入1000的护网行动已经开始摇人了&#xff0c; 不少大学生在后台私信我如何参加护网、面试问些什么、有没有护网内推 作为一个负责任的博主&#xff0c;收到大家反馈的我&#xff0c;连夜发动钞能力&#xff0c;收集整理了一套护网蓝初面试文档 1. 什么是DDoS攻击&#x…
阅读更多...
解决appium-doctor报 bundletool.jar cannot be found

解决appium-doctor报 bundletool.jar cannot be found

一、下载bundletool.jar 下载地址&#xff1a;https://github.com/google/bundletool/releases 二、重命名 重命名这个jar包为bundletool.jar&#xff0c;在android sdk目录下&#xff0c;新建bundle-tool目录&#xff0c;把bundletool.jar包放入其中。 三、配置环境 path后追加…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023