如何在小程序中实现语音识别功能

[GuanyuChen]

前提

由于小程序暂未提供语音识别相关API的支持，所以如果想在小程序中实现语音识别功能，需要通过某些方式进行中转。本文选择微信JS SDK进行相关功能的实现。

实现思路

第一步：小程序支持webview。所以我们可以在小程序中打开一个webview来引入微信JS SDK来实现相关功能

第二步：如文档所示，微信JS SDK提供了相关音频接口，包括开始录音、停止录音、监听录音自动停止等接口。我们可以通过这些接口来实现用户语音的录制。

wx.startRecord(); // 开始录音接口

wx.stopRecord({ // 停止录音接口
    success: function (res) {
        var localId = res.localId;
    }
});

wx.onVoiceRecordEnd({ // 监听录音自动停止接口
    // 录音时间超过一分钟没有停止的时候会执行 complete 回调
    complete: function (res) {
        var localId = res.localId;
    }
});

在完成用户语音的录制之后，微信会返回一个localId作为本次录音的标识。我们需要将这个localId记录下来并传回微信JS SDK提供的智能识别音频接口。

wx.translateVoice({
   localId: '', // 需要识别的音频的本地Id，由录音相关接口获得
    isShowProgressTips: 1, // 默认为1，显示进度提示
    success: function (res) {
        alert(res.translateResult); // 语音识别的结果
    }
});

第三步：webview与小程序通信

小程序的web-view组件支持bindmessage属性，网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。

<!-- html -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) // true })

这样我们就实现了小程序与webview间的通信。

更多详细内容请点击小程序web-view接口文档