Edge 语音识别 生成文字 显示在input new webkitSpeechRecognition()

Edge 语音识别 生成文字 显示在input new webkitSpeechRecognition()

代码

<html>

<head>
    <style>
        body {
            background-color: #008000;
        }
        .textClass {
            color: white;
            background-color: #008000;
            font-size: 29px;
            border: 1 solid white;
            width: 400px;
            outline: 0;
            padding: 20px;
        }
    </style>
</head>

<body>
    <textarea class="textClass" id="textRef" rows="8"></textarea>
    <script>
        const reco = new webkitSpeechRecognition()
        console.info('reco', reco)
        reco.continuous = true // 持续识别
        reco.interimResults = true // 中间结果可用
        reco.lang = 'zh-CN' // 普通画
        reco.addEventListener('result', event => {
            // console.info(event.results)
            const resArr = event.results
            console.info('resArr.length', resArr.length)
            // console.info('resArr', resArr, resArr.length)
            // for(let i = 0; i < resArr.length; i++) {
            //     const item = resArr[i][0].transcript
            //     console.info('item', item)
            // }

            const textRef = document.getElementById('textRef')
            if (resArr.length > 0) {
                textRef.value = resArr[resArr.length - 1][0].transcript
            } else {
                textRef.value = ''
            }

            // resArr.map(item => {
            //     console.info('item', item)
            //     // console.info(item.transcript)
            // });
        })
        
        reco.addEventListener('onerror', event => {
            console.info('onerror event', event)
            reco.start()
        })

        reco.start()
    // reco.stop()
    // console.info('reco', reco)
    </script>
</body>

</html>
posted @ 2024-02-03 10:30  彭成刚  阅读(63)  评论(0)  编辑  收藏  举报