码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • uni-app语音转文字功能demo(同声传译)


    目录

    首先去微信开发者官网申请一下同声传译的插件  微信公众平台

    在文件中开始引用:


    首先去微信开发者官网申请一下同声传译的插件  
    微信公众平台

    后续使用的时候可以看详情里面的信息进行使用

    在文件中开始引用:

    注意!!在这个源码视图中开始引入插件!! 在小程序相关插件中引入 版本要是0.3.5的 因为版本过高或者过低都会报错!

    1. "mp-weixin" : {
    2. "appid" : "自己小程序的id",
    3. "setting" : {
    4. "urlCheck" : false
    5. },
    6. "plugins" : {
    7. "WechatSI" : {
    8. "version" : "0.3.5",
    9. "provider" : "wx069ba97219f66d99"
    10. }
    11. },

    接下来直接上源码 可以根据自己的需求进行修改代码:

    代码全部直接放在下方,可以直接拿走用,好用记得点赞收藏!

    1. <template>
    2. <view>
    3. <view class="voicepad">
    4. {{voiceState}}
    5. </view>
    6. <button class="cu-btn bg-green voicebtn " @touchstart="touchStart" @touchend="touchEnd">
    7. <image src="../../static/logo.png" mode="widthFix" style="width: 50rpx;"></image>
    8. </button>
    9. <view class="center" style="background-color: #555555; color: #FFF;" v-show="isShow">
    10. 正在录音...
    11. </view>
    12. </view>
    13. </template>
    14. <script>
    15. var plugin = requirePlugin("WechatSI")
    16. let manager = plugin.getRecordRecognitionManager();
    17. export default {
    18. data() {
    19. return {
    20. voiceState: "你可以这样说...",
    21. isShow: false
    22. }
    23. },
    24. onShow() {
    25. },
    26. onLoad() {
    27. this.initRecord();
    28. },
    29. methods: {
    30. touchStart() {
    31. this.isShow = true
    32. manager.start({
    33. //指定录音的时长,单位ms,最大为60000
    34. duration: 60000,
    35. //识别的语言,目前支持zh_CN en_US zh_HK
    36. lang: "zh_CN"
    37. });
    38. },
    39. touchEnd() {
    40. uni.showToast({
    41. title: '录音完成',
    42. icon: "none"
    43. })
    44. this.isShow = false
    45. manager.stop();
    46. },
    47. /**
    48. * 初始化语音识别回调
    49. * 绑定语音播放开始事件
    50. */
    51. initRecord() {
    52. manager.onStart = (res) => {
    53. console.log('start', res.msg);
    54. this.voiceState = res.msg;
    55. };
    56. //有新的识别内容返回,则会调用此事件
    57. manager.onRecognize = (res) => {
    58. this.voiceState = res.result;
    59. console.log('onRecognize');
    60. }
    61. // 识别结束事件
    62. manager.onStop = (res) => {
    63. this.voiceState = res.result;
    64. console.log('onStop', res.result);
    65. }
    66. // 识别错误事件
    67. manager.onError = (res) => {
    68. this.voiceState = res.msg;
    69. console.log('onError');
    70. }
    71. },
    72. }
    73. }
    74. </script>
    75. <style>
    76. .voicebtn {
    77. height: 130upx;
    78. display: block;
    79. width: 130upx;
    80. line-height: 130upx;
    81. border-radius: 65upx;
    82. font-size: 50upx;
    83. position: absolute;
    84. top: 1060upx;
    85. left: 310upx;
    86. }
    87. .voicepad {
    88. height: 250upx;
    89. width: 680upx;
    90. background: #fff;
    91. margin: 30upx auto;
    92. border-radius: 8upx;
    93. padding: 20upx;
    94. font-size: 35upx;
    95. }
    96. .center {
    97. text-align: center;
    98. align-items: center;
    99. width: 200rpx;
    100. position: absolute;
    101. top: 50%;
    102. left: 50%;
    103. transform: translate(-50%, -50%);
    104. padding: 20rpx;
    105. border-radius: 20rpx;
    106. /* height: 50rpx; */
    107. opacity: 0.8;
    108. }
    109. </style>

  • 相关阅读:
    DevOps|研发效能治理:进化史、规模化与治理复杂性
    海藻酸钠-peg-环糊精|alginate-peg-Cyclodextrin
    上电浪涌电流
    代码随想录算法训练营第四十四天 | 动态规划 part 6 | 完全背包、518. 零钱兑换 II、377. 组合总和 Ⅳ
    移动应用开发之路 01 Android Studio 项目文件介绍、创建虚拟机、完成第一个程序Hello World
    Mysql —— 多行/聚合/分组函数
    【Vue五分钟】 Vue Cli脚手架安装配置
    Asp-Net-Core开发笔记:实现动态审计日志功能
    多服务器云探针源码(服务器云监控)/多服务器多节点_云监控程序python源码
    【以图会意】操作系统的加载流程
  • 原文地址:https://blog.csdn.net/qq_21861771/article/details/132708922
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号