• 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>

  • 相关阅读:
    docker系列6:docker安装redis
    设计模式 08 代理模式
    CDH大数据平台 ModuleNotFoundError: No module named ‘_sqlite3‘
    大数据开发,Hadoop Spark太重?你试试esProc SPL
    【正点原子STM32连载】 第三十一章 ADC实验 摘自【正点原子】MiniPro STM32H750 开发指南_V1.1
    RDBMS 的历史回顾
    美创科技与南京大数据安全技术有限公司达成战略合作
    超精准!AI 结合邮件内容与附件的意图理解与分类!⛵
    nodejs 和 npm 版本对应关系
    软件安全学习课程实践3:软件漏洞利用实验
  • 原文地址:https://blog.csdn.net/qq_21861771/article/details/132708922