muguilin-VoiceDictation
/
index.html

<!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>迅飞语音听写（流式版）WebAPI</title>
    <link rel="stylesheet" href="./css/base.css" />
    <script async src="https://hm.baidu.com/hm.js?85fad12bb9a6dab448f4eff0a19299a5"></script>
</head>

<body>
    <h1 class="h1">迅飞语音听写（流式版）WebAPI</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="./img/voice.png" alt="" />
            </div>
        </div>
    </section>

    <script src="./js/crypto-js.min.js"></script>
    <script src="./js/xf-voice-dictation.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 xfVoice = new XfVoiceDictation({

                // 服务接口认证信息 注：APISecret 和 APIKey 的长度都差不多，请要填错哦，！
                APPID: '5ec244d5',
                APISecret: '37912e3e3f205e2a6201ec290452470a',
                APIKey: '78b6c006f1f3df5e24d315e3dff09212',
                // 注：要获取以上3个参数，请到迅飞开放平台：https://www.xfyun.cn/services/voicedictation 【注：这是我的迅飞语音听写（流式版）每天服务量500（也就是调500次），如果你需求里大请购买服务量：https://www.xfyun.cn/services/voicedictation?target=price】

                // webSocket请求地址 非必传参数，默认为：wss://iat-api.xfyun.cn/v2/iat
                // url: '',


                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(); // xfVoice.stop();
                            fixedBox.style.display = 'none';
                        }, 3000);
                    };
                }
            });

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

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

</html>