chrome Web Speech API 简单的语音识别实现 win10 开启立体声混音

最新推荐文章于 2024-07-24 16:53:23 发布

lgf133214

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量1.4k

点赞数

文章标签：语音识别 html5 js html

本文链接：https://blog.csdn.net/li18434/article/details/105605270

版权

最近有个想法，想把网页里的英语音频转成文字，来实现简单参考的功能，有很多想法，最后实现了下面的页面。

前提：`win10` 系统，开启`立体声混音`，`chrome浏览器`，`需要上Google`

win10开启立体声混音：

右键音量图标，打开声音设置
拖动至最下方，点击声音控制面板
点击录制，右键立体声混音，设为默认通信设备，设为默认设备都点上，确定
回到设置界面，选择立体声混音
之后声卡的输出就可以被当成输入了，如果要实现从声卡输入，上一步设置立体声混音是必须的，之后即使静音也可以读取声卡音频。

下面是html代码，直接拿走代码自己修改或者访问github.io地址（不嫌弃的话）

就当玩一玩吧，没啥用后来发现┭┮﹏┭┮

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>WebSpeechApi语音识别</title>
</head>
<body>
<div class="tips">
    <p>
        <strong>按0开始识别，请确保电脑混音已打开,并且设为默认设备</strong>
        <br>麦克风只能识别人声，不能识别扬声器发出的声音即为未开启。可以先到<a href='https://translate.google.cn/'>谷歌翻译</a>找一个长句子读
        ，试验功能正确性<br>
        基于chrome的Web Speech API，在页面需要语音输入功能时可以去使用一下。资料较少，暂时没有找到断句等其他功能，待发现
    </p>
    <p id="info"></p>
</div>
<div class="temp">
    临时文本：
    <hr>
    <p id="temp"></p>
</div>
<div class="container">
    最终文本：
    <hr>
    <p id="main">
    </p>
</div>
</body>
<script>
    let recognition = new window.webkitSpeechRecognition;
    let final_transcript = '';
    recognition.continuous = true;
    recognition.interimResults = true;

    let temp = document.getElementById("temp");
    let main = document.getElementById("main");
    let info = document.getElementById("info");
    recognition.onstart = function () {
        info.innerText = "开始识别。。。";
        console.log('======================' + 'start' + '======================');
    };
    recognition.onresult = function (event) {
        let interim_transcript = '';

        for (var i = event.resultIndex; i < event.results.length; ++i) {
            if (event.results[i].isFinal) {
                final_transcript += event.results[i][0].transcript;
                main.innerText = final_transcript;
            } else {
                interim_transcript += event.results[i][0].transcript;
                temp.innerText = interim_transcript;
            }
        }
    };
    recognition.onerror = function () {
        info.innerText = "error";
        temp.innerText = '';
        console.log(final_transcript);
        console.log('======================' + "error" + '======================');
    };
    recognition.onend = function () {
        info.innerText = "识别结束";
        temp.innerText = '';
        console.log(final_transcript);
        console.log('======================' + "end" + '======================');
    };

    recognition.lang = "en-US";

    document.onkeydown = function (ev) {
        if (ev.key === '0') {
            recognition.start();
            return false;
        }
    };


</script>
</html>

效果图，很简陋：
在这里插入图片描述

lgf133214

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
chrome Web Speech API 简单的语音识别实现 win10 开启立体声混音

最近有个想法，想把网页里的英语音频转成文字，来实现作弊参考的功能，有很多想法，最后实现了下面的页面。前提：win10 系统，开启立体声混音，chrome浏览器win10开启立体声混音：右键音量图标，打开声音设置拖动至最下方，点击声音控制面板点击录制，右键立体声混音，设为默认通信设备，设为默认设备都点上，确定回到设置界面，选择立体声混音之后声卡的输出就可以被当成输入了，如果...
复制链接

扫一扫