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

  • 相关阅读:
    JS中的filter、map、reduce
    Android学习笔记 17. RecyclerView
    python学习笔记-04
    【android12-linux-5.1】【ST芯片】【RK3588】【LSM6DSR】HAL移植
    PHP反序列化字符串逃逸
    qt使用mysql数据库(自学笔记)
    HTML中的基础标签(适合于新手)
    记录vue配置跨域不起作用以及一些理解
    CoLAKE: 如何实现非结构性语言和结构性知识表征的同步训练
    大数据项目之电商数仓、电商业务简介、电商业务流程、电商常识、业务数据介绍、电商业务表、后台管理系统
  • 原文地址:https://blog.csdn.net/qq_21861771/article/details/132708922