微信小程序-使用微信同声传译插件实现语音识别

最新推荐文章于 2025-06-14 15:33:54 发布

原创

最新推荐文章于 2025-06-14 15:33:54 发布 · 3.5k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #语音识别

本文介绍了如何在微信小程序中利用微信同声传译插件实现语音识别功能。通过插件的语音输入，识别结果会显示在输入框，并可将识别内容发送至后台进行搜索操作。详细步骤包括在小程序管理后台添加插件，配置app.json，编写wxml和js代码。

摘要

微信同声传译插件是微信自研的语音输入，文本翻译等功能的插件封装，用于提供给第三方小程序调用。
这里只使用此插件的语音输入功能实现语音识别，识别结果显示在输入框，并将识别结果传入后台进行查找，实现搜索功能。

效果图

在这里插入图片描述

添加同声传译插件

小程序管理后台-设置-第三方服务
在这里插入图片描述

目前最新版本为0.3.4
AppID：wx069ba97219f66d99
在这里插入图片描述

app.json

{
   
   
  ...
  "plugins": {
   
   
    ...
    "WechatSI": {
   
   
      "version": "0.3.4",
      "provider": "wx069ba97219f66d99"
        }
  }
}

wxml

<!-- 搜索框 -->        
<view class="searchBox">        
	<input type="text" name="id" value="{
   
   {
   
   inputValue}}" />
</view>
 <!-- 语音识别长按键 -->
<view class="{
   
   {
   
   voiceBtn}}" bindtouchstart="touchStart" bindtouchend="touchEnd">                    
	<image class="{
   
   {
   
   voiceStyle}}" src="/images/voice.png"></image>          
	<text>长按说话</text>        
</view>
<!-- 显示搜索到的垃圾 -->      
<view>
        <view wx:for="{
   
   {
   
   garSearchList}}" wx:key="item">
	<view id="{
   
   {
   
   item.gar_id}}" class="{
   
   {
   
   searchGar}}">{
   
   {
   
   item.gar_name

最低0.47元/天解锁文章