当前位置:编程学习 > > 正文

微信小程序语音录入(微信小程序使用同声传译实现语音识别功能)

时间:2022-01-23 02:31:26类别:编程学习

微信小程序语音录入

微信小程序使用同声传译实现语音识别功能

  我使用同声传译语音识别功能是为了实现微信小程序首页的语音搜索功能,如果你也是那么恭喜你,你可以ctrl+c、ctrl+v再改一改,如果你不是那么你也不要着急的走可以看完我的文章会对你有所帮助!

  首先是在微信公众平台(也就是小程序的后台),在左侧菜单栏中的设置-->第三方设置下的插件管理-->添加-->搜索同声传译-->点击添加

微信小程序语音录入(微信小程序使用同声传译实现语音识别功能)

  接下来就是在代码中进行添加一些设置。

  如果你是使用微信开发者工具进行开发小程序的话,需要在app.json文件中添加一下代码。

  • // app.json
    {
        ...
        "plugins": {
            ...
            "WechatSI": {
                "version": "0.3.4", // 这是同声传译的版本(也可以在微信公众平台添加的同声传译查看最新版本)
                "provider": "wx069ba97219f66d99" // 这是同声传译的ID
            }
        }
    }
    
  •   如果你是使用 Hbuildex 进行开发小程序的话,需要在 manifest.json 文件的源码视图中进行添加修改。

      在源码视图中找到 mp-weixin,然后按照以下代码进行添加修改

  • // manifest.json
    /* 小程序特有相关 */
    "mp-weixin": {
        "appid": "xxxxxxxxxx", // 这是你小程序的AppId
        ...
        "plugins": {
            "WechatSI": {
                "version": "0.3.4", // 这是同声传译的版本(也可以在微信公众平台添加的同声传译查看最新版本)
                "provider": "wx069ba97219f66d99" // 这是同声传译的ID
            }
        }
    }
    
  •   做完以上步骤之后,就可以根据官方文档进行开发了

      下面就是我的功能实现代码了

  • // index.vue 在这里我的页面布局只写了语音按钮(简化了)
    <template>
        <li @click="yuyin" class="yuyin-icon">
            <img :src="baseUrlImg+'/yuyin.jpg" alt="微信小程序语音录入(微信小程序使用同声传译实现语音识别功能)" border="0" />
    
  • 到此这篇关于微信小程序使用同声传译实现语音识别功能的文章就介绍到这了,更多相关小程序语音识别内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!

    上一篇下一篇

    猜您喜欢

    热门推荐