搜索

+

80

-

如何在浏览器中进行语音识别和文字转换语音声音？

音视频 html5 javascript

如何在浏览器中进行语音识别和文字转换语音声音？

网友回复

+

0

-

chrome的webkitSpeechRecognition可以实现，只是需要连接google服务器，示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">

    <title>Speech color changer</title>

    <style>
        body, html {
            margin: 0;
        }

        html {
            height: 100%;
        }

        body {
            height: inherit;
            overflow: hidden;
            max-width: 800px;
            margin: 0 auto;
        }

        h1, p {
            font-family: sans-serif;
            text-align: center;
            padding: 20px;
        }

        div {
            height: 100px;
            overflow: auto;
            position: absolute;
            bottom: 0px;
            right: 0;
            left: 0;
            background-color: rgba(255,255,255,0.2);
        }

        ul {
            margin: 0;
        }

        .hints span {
            text-shadow: -1px 1px 0px rgb(254 254 254 / 90%);
            margin: 10px;
            display: block;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <h1>用英文说出以下颜色</h1>
    <p>需要您的网络能够访问google提供的服务</p>

    <p class="hints"></p>
    <div>
        <p class="output">
            <em>指令识别中.....</em>
        </p>
    </div>

    <script>
    //
      

        var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
        var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList
        var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent

        var colors = ['aqua', 'azure', 'beige', 'bisque', 'black', 'blue', 'brown', 'chocolate', 'coral', 'crimson', 'cyan', 'fuchsia', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green', 'indigo', 'ivory', 'khaki', 'lavender', 'lime', 'linen', 'magenta', 'maroon', 'moccasin', 'navy', 'olive', 'orange', 'orchid', 'peru', 'pink', 'plum', 'purple', 'red', 'salmon', 'sienna', 'silver', 'snow', 'tan', 'teal', 'thistle', 'tomato', 'turquoise', 'violet', 'white', 'yellow'];
        var grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colors.join(' | ') + ' ;'

        var recognition = new SpeechRecognition();
        var speechRecognitionList = new SpeechGrammarList();
        speechRecognitionList.addFromString(grammar, 1);
        recognition.grammars = speechRecognitionList;
        recognition.continuous = true;
        recognition.lang = 'en-US';
        recognition.interimResults = false;
        recognition.maxAlternatives = 1;

        var diagnostic = document.querySelector('.output');
        var bg = document.querySelector('html');
        var hints = document.querySelector('.hints');

        var colorHTML = '';
        colors.forEach(function(v, i, a) {
            console.log(v, i);
            colorHTML += '<span style="background-color:' + v + ';"> ' + v + ' </span>';
        });
        hints.innerHTML = '说出一个颜色' + colorHTML + '.';

        setTimeout(function() {
            recognition.start();
            console.log('系统识别中，请说出点击的颜色.');

        }, 1000);
        //document.body.onclick = function() {

        // }

        recognition.onresult = function(event) {
            // The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
            // The SpeechRecognitionResultList object contains SpeechRecognitionResult objects.
            // It has a getter so it can be accessed like an array
            // The first [0] returns the SpeechRecognitionResult at the last position.
            // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects that contain individual results.
            // These also have getters so they can be accessed like arrays.
            // The second [0] returns the SpeechRecognitionAlternative at position 0.
            // We then return the transcript property of the SpeechRecognitionAlternative object
            console.log(event);
            var color = event.results[event.results.length-1][0].transcript;
            diagnostic.textContent = '识别结果 ' + color + '.';
            bg.style.backgroundColor = color;
            console.log('信心值: ' + event.results[0][0].confidence);
        }

        recognition.onspeechend = function() {
            recognition.stop();
            recognition.start();
        }

        recognition.onnomatch = function(event) {
            diagnostic.textContent = "不能识别该颜色.";
        }

        recognition.onerror = function(event) {
            diagnostic.textContent = '识别错误: ' + event.error;
        }
    </script>
</body>
</html>

+

0

-

至于文字转语音也可以通过SpeechSynthesisUtterance实现，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">


    <script type="text/javascript">
        var ssu = new SpeechSynthesisUtterance('加油南京');
       // ssu.volume = 100  // 声音的音量

        //ssu.rate = 1 // 语速，数值，默认值是1，范围是0.1到10

        //ssu.pitch = 1.5 // 表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1
        speechSynthesis.speak(ssu);
        

        // lang：使用的语言，字符串（比如："zh-cn"）

        //volume：音量，值在0-1之间（默认是1）

        //rate：语速的倍数，值在0.1-10之间（默认1倍）

        //pitch：音高，值在0-2之间，（默认是1）

        //voiceURI：指定希望使用的声音，字符串

        //既然有属性肯定有方法，该对象还提供了一些事件的回调

        ssu.onstart = (e)=> {
            console.log("开始。。。");
            console.log(e);
        }
        ssu.onend = (e)=> {
            console.log("结束。。。");
            console.log(e);
        }

    </script>
    <style>
    </style>
</head>
<body>

</body>
</html>

我知道答案，我要回答

我有问题

私活外包

最新提问