实现语音接口的调用

科技讯飞开放平台

需要要获取id等3个参数,请到迅飞开放平台:https://www.xfyun.cn/services/voicedictation

进行语音接口的调用,我在网上找到了别人的讯飞id接口,自己的还是没有实现成功。
放一部分的代码实现一下吧。

<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2023/4/24
  Time: 9:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum=1.0, user-scalable=no shrink-to-fit=no" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>智能政策信息检索系统</title>
  <link rel="stylesheet" href="./css/base.css" />
  <script async src="https://hm.baidu.com/hm.js?85fad12bb9a6dab448f4eff0a19299a5"></script>
</head>

<body>
<h1 class="h1">欢迎来到智能政策信息检索系统</h1>
<hr>
<section class="voice-box">
  <input type="search" name="voice" id="voice-txt" />
  <button id="start-btn">开始识别</button>
</section>

<section class="fixed-box" id="fixed-box">
  <div class="fixed-main">
    <button class="fixed-close" id="close-btn"></button>
    <div id="fixed-txt">Hello! 请说出你想说话。。。!</div>
    <div class="fixed-icon">
      <img src="lib/LOGO.png" alt="" />
    </div>
  </div>
</section>

<script src="./js/crypto-js.min.js"></script>
<script src="./js/voice.js"></script>

<script>
  window.onload = function () {
    const voiceTxt = document.querySelector('#voice-txt');
    const startBtn = document.querySelector('#start-btn');
    const fixedBox = document.querySelector('#fixed-box');
    const fixedTxt = document.querySelector('#fixed-txt');
    const closeBtn = document.querySelector('#close-btn');
    let times = null;

    // 实例化迅飞语音听写(流式版)WebAPI
    const voice = new Voice({

      // 服务接口认证信息 注:apiKey 和 apiSecret 的长度都差不多,请要填错哦,!
      appId: '##########',
      apiSecret: '##########',
      apiKey: '##########',
      // 注:要获取以上3个参数,请到迅飞开放平台:https://www.xfyun.cn/services/voicedictation 

      onWillStatusChange: function (oldStatus, newStatus) {
        //可以在这里进行页面中一些交互逻辑处理:注:倒计时(语音听写只有60s),录音的动画,按钮交互等!
        fixedBox.style.display = 'block';
      },
      onTextChange: function (text) {
        //监听识别结果的变化
        voiceTxt.value = text;
        fixedTxt.innerText = text;

        // 3秒钟内没有说话,就自动关闭
        if (text) {
          clearTimeout(times);
          times = setTimeout(() => {
            this.stop(); // voice.stop();
            fixedBox.style.display = 'none';
          }, 3000);
        };
      }
    });

    // 开始识别
    startBtn['onclick'] = function () {
      voice.start();
    };

    // 关闭识别
    closeBtn['onclick'] = function () {
      voice.stop();
      fixedBox.style.display = 'none';
    };
  };
</script>
</body>

</html>

posted @ 2023-04-24 16:03  YE-  阅读(74)  评论(0编辑  收藏  举报