微信小程序使用讯飞接口语音识别

之前看过网上其他几位利用讯飞的接口来做微信小法式的。在自己现实随着他人的博客做的时辰，却又会碰到一些题目。所以在此对利用讯飞接口做一个总结。这里我是用WebAPI来做。
1. 申请科大讯飞的接口

科大讯飞的官方网站
进入官网以后，登陆账号（假如没有，可以注册利用）。



在这里插入图片描写

登陆以后，点击右上角的控制台。进入控制中心，建立新利用



填写好信息以后即可建立一个新的利用。之落后入这个利用，而且会在左上角看到三个信息： APPID APISecret * APIKey
这三个信息是我们的法式挪用讯飞的接口时用来考证身份的。这点经过它们的称号便可以猜出来。
2. 建立微信小法式

微信小法式的开辟工具的安装和开辟账号的申请我就不用多说了；对于微信小法式的一些文件的诠释在官方文档中也有讲授。这里对于微信小法式开辟的一些根本的内容不在多说。
（1）展现页面

新建立一个微信小法式后，先来写前端展现的页面：
app.wxss文件
page {
  height: 100%;
  background-color: #ffffff;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}index.wxml文件
<view class="container">
    <view class="showContent">
        <view>{{searchKey}}</view>
    </view>

    <view class="content">
        <button class="btn" bindtouchstart='start' bindtouchend="stop">点击按钮措辞</button>
    </view>
</view>在这里的 bindtouchstart 是当按下这个按钮不松开会履行指定的方式，不异 bindtouchend 则是松开后履行指定的方式。
index.wxss文件
.showContent {
    flex: 3 0 auto;
    text-align: center;

    padding: 100rpx;
    font-size: 40rpx;
    color: black;
}

.content {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;

    margin-bottom: 60rpx;
    width: 100%;
}

.content .btn {
    border-radius: 40rpx;
    width: 80%;
    letter-spacing: 20rpx;
}由于只是简单的模板，所以界面不是出格都雅。



在这里插入图片描写

（2）处置鉴权字符串

WebAPI在官方文档中有很多的内容诠释。这里也不会多的说明。
利用讯飞的API请求的话需要停止接口鉴权。由于小我对Java比力熟悉，所以利用Java来处置天生鉴权请求的字符串。
利用Spring Boot来做后端

建立一个Spring Boot的利用后，利用凡是的MVC形式来处置。
Controller
import com.example.template.service.UrlService;
import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequiredArgsConstructor
@RequestMapping(path = "/url")
public class UrlController {

    private final UrlService urlService;

    @GetMapping
    public String getUrl() {
        return urlService.getUrl();
    }
}这里service的代码中需要增加okhttp的依靠
<dependency>
    <groupId>com.squareup.okhttp3</groupId>
    <artifactId>okhttp</artifactId>
    <version>4.9.1</version>
</dependency>Service
import okhttp3.HttpUrl;
import org.springframework.stereotype.Service;

import javax.crypto.Mac;
import javax.crypto.spec.SecretKeySpec;
import java.net.URL;
import java.nio.charset.Charset;
import java.text.SimpleDateFormat;
import java.util.Base64;
import java.util.Date;
import java.util.Locale;
import java.util.TimeZone;

@Service
public class UrlService {
    private static final String hostUrl = "https://iat-api.xfyun.cn/v2/iat";
    private static final String apiSecret = ""; //在控制台-我的利用-语音听写（流式版）获得
    private static final String apiKey = ""; //在控制台-我的利用-语音听写（流式版）获得

    public String getUrl() {
        try {
            String authUrl = getAuthUrl(hostUrl, apiKey, apiSecret);
            return authUrl.replace("http://", "ws://").replace("https://", "wss://");
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    // 这个 getAuthUrl() 方式是官网上给出来的，可以在官方文档中找到。
    private String getAuthUrl(String hostUrl, String apiKey, String apiSecret) throws Exception {
        URL url = new URL(hostUrl);
        SimpleDateFormat format = new SimpleDateFormat("EEE, dd MMM yyyy HH:mm:ss z", Locale.US);
        format.setTimeZone(TimeZone.getTimeZone("GMT"));
        String date = format.format(new Date());
        StringBuilder builder = new StringBuilder("host: ").append(url.getHost()).append("\n").//
                append("date: ").append(date).append("\n").//
                append("GET ").append(url.getPath()).append(" HTTP/1.1");
        Charset charset = Charset.forName("UTF-8");
        Mac mac = Mac.getInstance("hmacsha256");
        SecretKeySpec spec = new SecretKeySpec(apiSecret.getBytes(charset), "hmacsha256");
        mac.init(spec);
        byte[] hexDigits = mac.doFinal(builder.toString().getBytes(charset));
        String sha = Base64.getEncoder().encodeToString(hexDigits);

        String authorization = String.format("api_key=\"%s\", algorithm=\"%s\", headers=\"%s\", signature=\"%s\"", apiKey, "hmac-sha256", "host date request-line", sha);
        HttpUrl httpUrl = HttpUrl.parse("https://" + url.getHost() + url.getPath()).newBuilder().//
                addQueryParameter("authorization", Base64.getEncoder().encodeToString(authorization.getBytes(charset))).//
                addQueryParameter("date", date).//
                addQueryParameter("host", url.getHost()).//
                build();
        return httpUrl.toString();
    }
}在小法式的js文件中发送请求获得鉴权链接

首先在利用小法式向当地的办事器发送请求的时辰要先对微信小法式开辟工具停止设置的点窜。



在这里插入图片描写

假如不停止该设置，则没法请求到当地的办事器停止字符串的处置。
在这里我写了一个零丁的函数来停止请求并获得处置后的成果。
getUrl() {
    wx.request({
      url: 'http://localhost:8080/url',
      method: 'GET',
      header: {
        'content-type': 'application/json' // 默许值
      },
      success(result) {
        apiUrl = result.data;
        console.log(apiUrl);
      }
    })
  },
这里的apiUrl是界说的一个全局变量。微信的处置请求方式为wx.request。这个方式还有其他的一些参数可以设备。但现在用这做个请求获得返回的成果就够用了。
在js文件中获得录音

在停止录音前我们需要肯定讯飞可以接收的语音的格式。经过和微信文档的对照，在这里可以利用pcm的格式。
这里现在js文件中界说录音文件的参数
const options = {
  duration: 60000, // 指定录音的经常，单元ms
  sampleRate: 8000, // 采样率
  numberOfChannels: 1, // 录音通道数
  encodeBitRate: 48000, // 编码码率
  format: 'PCM', // 音频格式
  frameSize: 5, // 指定帧巨细，单元KB
}
这里我们先写一个只是录音的功用。
在微信小法式的官方文档中，录音这个功用可以利用RecorderManager()来整体治理。所以我们首先在全局界说一个recorderManager。
const recorderManager = wx.getRecorderManager();
接着我们需要写两个方式，别离是起头录音和竣事录音的方式。
/* 起头录音 */
start: function () {
    recorderManager.start(options); // 起头录音
    recorderManager.onStart(() => { // 起头录音的监听事务
        console.log('起头录音');
    });
}，

/* 竣事录音 */
stop: function() {
    recorderManager.stop(); // 停止录音
    recorderManager.onStop((result) => {
        console.log('录音竣事' + result.tempFilePath); // tempFilePath是录音的文件临时的寄存途径
    });
},
这个时辰便可以先简单的测试一下能否可以一般的录音。（假如是初次的话能够会需要开录音的权限，关于权限的题目以后再说明。现在主如果将讯飞的接口和小法式整合）
挪用讯飞接口

讯飞的WebAPI接口是需要停止Websocket的链接的。所以小法式要建立Websocket链接。
当我们起头录音的时辰就建立链接，所以我们将该功用写在 start 方式中。而且当链接建立成功以后便可以起头录音。
start: function () {
    wxst = wx.connectSocket({ // 开启websocket毗连
        url: apiUrl,
        method: 'GET',
        success: function (res) {
            recorderManager.start(options);//起头录音
        }
    });
},
别的的一些Websocket监听就卸载onLoad中，一些录音的监听写在onShow中。这里是鉴戒了网上的其他大佬。这里是他博客的链接。 微信小法式前台挪用讯飞语音识别接口
这些处置完以后就已经是完成这个功用了。
但这个时辰还有一个坑：在电脑虚拟机测试的时辰，讯飞接口返返来的值一向为空。可是录音是有的。这个处理方式是利用真机调式。用真机调试才会有成果。固然这里的鉴权的url可以先通事背景获获得后间接放在socket请求的url上方便测试。