语音识别和文字转语音

本文最后更新于：6 个月前

语音识别和文字转语音的使用，SpeechRecognition和speechSynthesis的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="say">开始说话</button>
    <div id="text"></div>
    <input type="text"></input>
    <div style="display: flex;flex-direction: column;justify-content: center;">
        <div style="display: flex;"><label for="rate">Rate:</label>
            <div class="rate" style="width: 20px;">1</div>
            <input type="range" min="0.5" max="2" value="1" step="0.1" name="rate-x"
                id="rate-x">
        </div>
        <div style="display: flex;"><label for="pitch">Pitch:</label>
            <div class="pitch" style="width: 20px;">1</div>
            <input type="range" min="0" max="2" value="1" step="0.1" id="pitch-x">
        </div>
        <button id="speak" style="width: 100px;">文字转语音</button>
    </div>
</body>
<script>
    const sayDom = document.getElementById('say');
    const textDom = document.getElementById('text');
    const input = document.querySelector('input');
    const speakDom = document.getElementById('speak');
    const rateDom = document.getElementById('rate-x');
    const pitchDom = document.getElementById('pitch-x');
    const rateValue = document.querySelector('.rate');
    const pitchValue = document.querySelector('.pitch');
    console.log(rateValue)
    let recognition = window.SpeechRecognition ? new window.SpeechRecogition() : new window.webkitSpeechRecognition();
    // let speechRecognitionList = new SpeechGrammarList();
    // speechRecognitionList.addFromString(grammar, 1);
    // recognition.grammars = speechRecognitionList;
    recognition.continuous = false;
    recognition.lang = 'zh-CN';
    recognition.interimResults = true;
    recognition.maxAlternatives = 1;
    sayDom.addEventListener('click', () => {
        recognition.start();
    })
    recognition.onresult = function (event) {

        let text = event.results[0][0].transcript;
        console.log(text)
        textDom.textContent = '你说了: ' + text + '.';
    }

    recognition.onspeechend = function () {
        console.log('停止说话')
        recognition.stop();
    }

    recognition.onnomatch = function (event) {
        diagnostic.textContent = "无法识别";
    }

    recognition.onerror = function (event) {
        diagnostic.textContent = '识别错误' + event.error;
    }

    const speech = window.speechSynthesis;
    speakDom.addEventListener('click', () => {
        speak();
    })
    function speak() {
        console.log('语音类型', speech.getVoices());
        if (speech.speaking) {
            console.error('speechSynthesis.speaking');
            return;
        }
        if (input.value !== '') {
            var utterThis = new window.SpeechSynthesisUtterance(input.value);
            utterThis.onend = function (event) {
                console.log('开始合成');
            }
            utterThis.onerror = function (event) {
                console.error('合成失败');
            }
            var selectedOption = 'Google 普通话（中国大陆）';
            const voices = speech.getVoices();
            console.log(selectedOption)
            for (i = 0; i < voices.length; i++) {
                if (voices[i].name === selectedOption) {
                    utterThis.voice = voices[i];
                    break;
                }
            }
            utterThis.pitch = pitchDom.value;
            utterThis.rate = rateDom.value;
            speech.speak(utterThis);
        }
    }

    pitchDom.onchange = function () {
        pitchValue.textContent = pitchDom.value;
    }

    rateDom.onchange = function () {
        rateValue.textContent = rateDom.value;
    }
</script>

</html>
手写

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！