首页 > 其他分享 >实现语音接口的调用

实现语音接口的调用

时间:2023-04-24 16:15:45浏览次数:53  
标签:function 调用 const querySelector 接口 语音 voice document fixedBox

科技讯飞开放平台

需要要获取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>

标签:function,调用,const,querySelector,接口,语音,voice,document,fixedBox
From: https://www.cnblogs.com/yzx-sir/p/17349846.html

相关文章

  • 储物柜语音方案设计,NV040C的应用
    智能储物柜又称之为自动存包柜、电子寄存柜、电子储物柜等,在我们日常生活中可以帮助购物者或娱乐休闲的人们保证财产的安全。智能储物柜已广泛应用于超市、百货店、学校、图书馆、娱乐场所、工厂、机关、医院、电影城、游泳馆、海滨浴场、地铁站、火车站、机场等一切公共场所。而......
  • 2023年4月24日-远程调用时通时不通
    问题:外部服务在调用我们服务的时候,偶发报超时。解决思路:首先跟日志,发现偶尔会出线连接超时。代码问题直接排除掉,怀疑是双方服务器问题。确认双方服务器问题。经排查,是我们服务器导致,我们服务器有两个实例,其中一个服务器好用,另外有一个服务器不好用。联系网络部门,问题解决。......
  • 使用curl请求接口
    1、基本用法curl-X[request][options][URL] -X选项指定了在与远程服务器通信时将使用哪种HTTP请求方法。   常用的请求方法[request]:GER,POST,DELETE,PUT,PATCH 2、常用参数-v参数输出通信的整个过程,用于调试。-b参数用来向服务器发送Cookie。 ......
  • 淘宝app端商品采集接口分享 商品详情图抓取 高并发请求
    接口名称:item_get_app请求方式:POST、GET返回数据格式:json请求示例:#coding:utf-8"""Compatibleforpython2.xandpython3.xrequirement:pipinstallrequests"""from__future__importprint_functionimportrequests#请求示例url默认请求参数已经做URL编......
  • 视频分享 点赞 收藏,分享数接口开发研究
    Q44804487已于2022-10-0920:13:43修改386收藏1文章标签:androidjava开发语言版权最近应客户需求研究了下某音分享的接口对该接口做了个测试这里测试了个风控点就是单个作品请求到一个上限后成功率低数据增长比较缓慢这个上限目前测试是5000-20000(5K的多一点,正常来说一个......
  • 抖音视频播放量 视频搜索接口算法 XG XK 算法 设备注册
    Q44804487于2022-08-2221:31:48发布1067收藏11文章标签:音视频ios版权最近应客户要求研究了下抖音搜索视频和播放视频的接口现在已做完放出部分接口给大家参考下注:全套需要配合抖音设备使用视频搜索接口   defsearch_video_ios(query,page,sort_type,publish_time......
  • 抖音直播间人气接口算法 抖音协议
    Q44804487于2022-04-0210:15:54发布6525收藏26文章标签:python版权因为业务需要最近研究了下抖音直播间接口发现只要一直给一个接口发送心跳包就能保持这个用户的在线状态有些团队用这个实现直播间刷虚假人气上代码片段有感兴趣的可以一起交流学习    defbullet_chat......
  • PR语音转字幕转换插件Speech to Text for Premiere Pro
    在SpeechtoTextforPremierePro(PR语音转字幕转换插件中您可以使用以下各种格式转换:中文(PL/PRC)、英文、日语、韩语、意大利语、葡萄牙语、波兰语、法语、意大利语、荷兰语、英语、西班牙语等。如果您对中文、日语、韩语、葡萄牙语、法语、荷兰语等语言感兴趣,可以在这里找到......
  • 跨境电商虾皮shoppe和lazada商品详情API接口
    虾皮跨境电商接口“虾皮跨境电商接口”,又称虾皮“eTaobao”,是阿里巴巴旗下国际站虾皮网,联合淘宝官方API、以及虾皮自有技术进行开发的一款跨境电商接口服务。其核心目的是提供便捷的淘宝API调用,将淘宝平台上的宝贝信息(包括商品的分类,价格,图片等)及淘宝API,被完美的适应跨境电商接......
  • java调用GDAL,接口运行一次出现A fatal error has been detected by the Java Runtime
    参考文章:https://www.jianshu.com/p/4bffe29e3a02问题描述:通过调用GDAL写的SpringBoot接口,第一次访问成功,第二次报错,显示报错的位置为gdal库。尝试了很多方法https://www.cnblogs.com/jokingremarks/p/15132599.html#!comments仍然不成功,感觉应该是第二次运行接口时,进行垃圾回......