WebASR
/
index.html

<html>
<meta charset="UTF-8">

<head>
    <script src="./utils/numjs.min.js"></script>
    <!-- <script src="./utils/eruda/eruda.js"></script>
    <script src="./utils/eruda/eruda-fps.js"></script>
    <script> eruda.init(); eruda.add(erudaFps);</script> -->
</head>

<body>
    <div name="AudioSource Area" style="text-align:center;">
        <input type="file" id="audio_input" style="display: none;" accept=".wav, .mp3, .flac, .aac, .m4a, .opus, .ogg"
            capture="microphone" multiple />
        <span id="audio_input_btn" title="点击选择音频文件">
            <svg style="margin:10 10;" t="1606033148297" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="1100" width="2cm" height="2cm">
                <path
                    d="M668.3 641.05c0 26.1-25.69 47.27-57.39 47.27s-57.4-21.17-57.4-47.27c0-26.12 25.7-47.28 57.4-47.28s57.39 21.17 57.39 47.28zM420.57 707.59c0 26.1-25.7 47.27-57.39 47.27-31.7 0-57.4-21.17-57.4-47.27 0-26.12 25.69-47.28 57.4-47.28 31.69 0 57.39 21.16 57.39 47.28z"
                    fill="#FFE66F" p-id="1101"></path>
                <path
                    d="M885.45 238.26H531.92c-8.71 0-16.97-2.29-24.76-6.42l-139.39-79.78c-15.13-8.71-32.09-13.3-49.52-13.3H138.96c-41.27 0-74.74 33.48-74.74 74.74v597.01c0 41.27 33.47 74.74 74.74 74.74h746.49c41.27 0 74.74-33.48 74.74-74.74V313c-0.46-41.27-33.48-74.74-74.74-74.74zM150.42 828.39c-20.18 0-36.23-16.05-36.23-36.23V213.49c0-13.76 11.01-24.76 24.76-24.76h179.28c8.71 0 16.97 2.3 24.76 6.42l139.85 79.78c15.13 8.71 32.1 13.3 49.52 13.3h353.53c13.76 0 24.76 11.01 24.76 24.76v479.17c0 20.17-16.05 36.23-36.23 36.23h-724z m0 0"
                    fill="#5F55AC" p-id="1102"></path>
                <path
                    d="M681.86 436.8v-85.28c0-7.8-6.42-14.67-14.67-14.67-1.37 0-2.75 0-4.12 0.45l-249.45 76.58c-5.96 1.83-10.08 7.33-10.08 13.75v247.62c-11.92-7.34-25.68-11.01-39.89-11.01-38.06 0-68.79 26.14-68.79 57.77 0 32.1 30.73 57.78 68.79 57.78s68.78-26.14 68.78-57.78V524.84l221.01-67.4v141.69c-11.92-7.34-25.68-11.01-39.9-11.01-38.06 0-68.78 26.14-68.78 57.79 0 32.09 30.72 57.77 68.78 57.77s68.78-26.14 68.78-57.77v-205.9c-0.46-0.91-0.46-1.84-0.46-3.21zM363.18 751.36c-21.55 0-39.89-13.3-39.89-28.89s18.34-28.89 39.89-28.89 39.89 13.3 39.89 28.89-18.35 28.89-39.89 28.89z m68.78-256.33v-56.86l221.01-67.4v56.86l-221.01 67.4z m181.12 180.21c-21.55 0-39.89-13.3-39.89-28.89s18.34-28.89 39.89-28.89 39.89 13.3 39.89 28.89-18.34 28.89-39.89 28.89z m0 0"
                    fill="#5F55AC" p-id="1103"></path>
            </svg>
        </span>
        <span id="record_btn" title="点击开始录音">
            <svg style="margin:10 10;" t="1606111069554" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="2913" width="2cm" height="2cm">
                <path id='outer' d="M3.169 511.604a508.752 508.752 0 1 0 1017.504 0 508.752 508.752 0 1 0-1017.504 0z"
                    fill="#d81e06" p-id="2914" data-spm-anchor-id="a313x.7781069.0.i3" class="selected"></path>
                <path id='center'
                    d="M512.103 625.937c72.402 0 131.268-58.866 131.268-131.269V367.502c0-72.403-58.866-131.268-131.268-131.268s-131.269 58.865-131.269 131.268v127.166c0 72.403 58.66 131.269 131.269 131.269z"
                    fill="#ffffff" p-id="2915" data-spm-anchor-id="a313x.7781069.0.i4" class=""></path>
                <path
                    d="M707.775 466.979c-9.025 0-16.409 7.384-16.409 16.409 0 47.584-19.28 92.708-54.353 126.756-34.048 33.022-78.351 51.687-125.116 52.712-46.764-1.025-91.067-19.69-125.115-52.712-35.073-34.048-54.353-79.172-54.353-126.756 0-9.025-7.384-16.409-16.409-16.409s-16.408 7.384-16.408 16.409c0 56.61 22.766 109.937 64.403 150.343 36.1 35.073 82.248 56.405 131.474 60.917v66.865h-85.325c-9.024 0-16.408 7.384-16.408 16.408s7.384 16.409 16.408 16.409h203.467c9.024 0 16.408-7.384 16.408-16.409s-7.384-16.408-16.408-16.408h-85.325v-66.865c49.226-4.718 95.375-25.844 131.474-60.917 41.431-40.406 64.403-93.734 64.403-150.343 0-9.025-7.384-16.409-16.408-16.409z"
                    fill="#ffffff" p-id="2916" data-spm-anchor-id="a313x.7781069.0.i6" class=""></path>
            </svg>
        </span>
    </div>
    <div id='audios' style="text-align:center;margin:10 auto;"></div>
    <div name="Drawer Area" style="text-align:center;margin:10 auto;width:80%;display: contents;">
        <div style="margin:1 auto;">
            <canvas id='waveDrawer' width=1000 height=10
                style="width: 90vw;text-align:center;border: 1px solid black;border-radius: 4px;">
            </canvas>
        </div>
        <div style="margin:1 auto;">
            <canvas id='stftDrawer' width=1000 height=10
                style="width: 90vw;text-align:center;border: 1px solid black;border-radius: 4px;">
            </canvas>
        </div>
        <div style="margin:1 auto;">
            <canvas id='pinyinDrawer' width=1000 height=10
                style="width: 90vw;text-align:center;border: 1px solid black;border-radius: 4px;">
            </canvas>
        </div>
    </div>
    <div name="PinYin Area">
        <div style="margin:10 auto;text-align:center;width:50%;border: 1px solid black;border-radius: 4px;">
            <span id="pinyin" style="text-align:center; "></span>
        </div>
        <div style="margin:10 auto;text-align:center;display: flex;">
            <span id="oripinyin" style="margin: auto;padding: 2; border: 1px dotted black;border-radius: 3px;"></span>
        </div>
    </div>

    <div name=" Control Area" style="text-align:center;">
        <span id='switch_btn' style="margin: auto;" title="点击启动音频流">
            <svg style="vertical-align:middle;margin-right: 10;" t="1606035634383" class="icon" viewBox="0 0 1024 1024"
                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6463" width="2cm" height="2cm">
                <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#F8F8F8" p-id="6464">
                </path>
                <path id="cricle_triangle"
                    d="M651.48928 584.76544l-158.57664 97.5872a69.18144 69.18144 0 0 1-105.472-58.92096v-195.1744a69.18144 69.18144 0 0 1 105.472-58.94144l158.57664 97.5872a69.18144 69.18144 0 0 1 0 117.8624z"
                    fill="#4089FF" p-id="6465"></path>
            </svg>
        </span>
        <span id='open_model_btn' style="margin: auto;" title="模型加载中...">
            <svg style="vertical-align:middle; margin-left: 10;" t="1606034073286" class="icon" viewBox="0 0 1024 1024"
                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10319" width="2cm" height="2cm">
                <path id='center'
                    d="M512 719.872a15.36 15.36 0 0 1-15.36-15.36V364.032a15.36 15.36 0 0 1 30.72 0v340.48a15.36 15.36 0 0 1-15.36 15.36zM410.2144 641.8432a15.36 15.36 0 0 1-15.36-15.36v-184.32a15.36 15.36 0 1 1 30.72 0v184.32a15.36 15.36 0 0 1-15.36 15.36zM314.9824 576.8192a15.36 15.36 0 0 1-15.36-15.36V506.88a15.36 15.36 0 1 1 30.72 0v54.4256a15.36 15.36 0 0 1-15.36 15.5136zM706.56 576.8192a15.36 15.36 0 0 1-15.36-15.36V506.88a15.36 15.36 0 0 1 30.72 0v54.4256a15.36 15.36 0 0 1-15.36 15.5136zM613.4272 641.8432a15.36 15.36 0 0 1-15.36-15.36v-184.32a15.36 15.36 0 1 1 30.72 0v184.32a15.36 15.36 0 0 1-15.36 15.36z"
                    fill="#3f81c1" p-id="10320"></path>
                <path
                    d="M377.6 269.568h-123.392a15.36 15.36 0 0 1 0-30.72h123.392a15.36 15.36 0 0 1 0 30.72zM769.792 269.568h-123.392a15.36 15.36 0 0 1 0-30.72h123.392a15.36 15.36 0 0 1 0 30.72z"
                    fill="#3f81c1" p-id="10321"></path>
                <path
                    d="M769.792 392.96a15.36 15.36 0 0 1-15.36-15.36v-123.392a15.36 15.36 0 0 1 30.72 0v123.392a15.36 15.36 0 0 1-15.36 15.36zM769.792 785.152a15.36 15.36 0 0 1-15.36-15.36v-123.392a15.36 15.36 0 0 1 30.72 0v123.392a15.36 15.36 0 0 1-15.36 15.36z"
                    fill="#3f81c1" p-id="10322"></path>
                <path
                    d="M769.792 785.152h-123.392a15.36 15.36 0 0 1 0-30.72h123.392a15.36 15.36 0 0 1 0 30.72zM377.6 785.152h-123.392a15.36 15.36 0 0 1 0-30.72h123.392a15.36 15.36 0 0 1 0 30.72z"
                    fill="#3f81c1" p-id="10323"></path>
                <path
                    d="M254.208 785.152a15.36 15.36 0 0 1-15.36-15.36v-123.392a15.36 15.36 0 0 1 30.72 0v123.392a15.36 15.36 0 0 1-15.36 15.36z M254.208 392.96a15.36 15.36 0 0 1-15.36-15.36v-123.392a15.36 15.36 0 0 1 30.72 0v123.392a15.36 15.36 0 0 1-15.36 15.36z"
                    fill="#3f81c1" p-id="10324"></path>
            </svg>
        </span>
    </div>

    <script type="module" src="./main.js"></script>
</body>

</html>