Speech Synthesis API

Speech Synthesis API非常容易实现。事实上，只需两行代码即可让您的网络应用与用户交流。

var utterance = new SpeechSynthesisUtterance('Hello Treehouse');
window.speechSynthesis.speak(utterance);

speechSynthesis 接口

  • speak(SpeechSynthesisUtterance)- 这个方法应该传递一个实例SpeechSynthesisUtterance。然后它会将此添加到需要说出的话语队列中。
  • cancel() - 此方法将从队列中删除所有话语。如果当前正在说话，那么它将被停止。
  • pause() - 此方法将立即暂停正在讲话的任何话语。
  • resume() - 此方法将使浏览器恢复说出先前暂停的话语。
  • getVoices() - 此方法返回浏览器支持的所有语音的列

监听SpeechSynthesisUtterance事件

  • onstart- start当话语开始被说出时，事件被触发。
  • onend- end一旦说出话语，就会触发事件。
  • onerror- error如果发生阻止说出话语的错误，则触发该事件。
  • onpause- pause如果话语在说话时暂停，则会触发事件
  • onresume- resume如果暂停说话后重播，则会触发该事件。
  • onboundary- boundary只要在说出话语时达到单词或句子边界，就会触发事件。
  • onmark- mark在语音合成标记语言（SSML）文件中到达“标记”标记时触发事件。我们在这篇文章中没有涉及SSML。只要知道可以使用基于XML的SSML文档将语音数据传递给话语。这样做的主要优点是，在构建具有大量需要合成的文本的应用程序时，可以更轻松地管理语音内容。
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>文字转语音测试</title>
	
	</head>
	<body>
        <div class="voiceinator">
                    
        <textarea id="msgText" name="text">清晨的阳光照耀在脸上，暖洋洋的。杜幽嘴里面嘟囔着什么，良久之后，迷迷糊糊的眯起眼睛。</textarea>
        
        <button id="speak">播放</button>
        <button id="pause">暂停</button>
        <button id="resume">重新播放</button>
        <button id="stop">停止</button>
        </div>
    </body>
    <script type="text/javascript"> 
		const synth = window.speechSynthesis
        const msg = new SpeechSynthesisUtterance()
        
        const speakButton = document.querySelector('#speak')
        const stopButton = document.querySelector('#stop')
        const pauseButton = document.querySelector('#pause')
        const resumeButton = document.querySelector('#resume')

        msg.text = document.getElementById("msgText").value

        speakButton.addEventListener('click',handleSpeak)
        stopButton.addEventListener('click',handleStop)
        pauseButton.addEventListener('click',handlePause)
        resumeButton.addEventListener('click',handleResume)

        // 播放
        function handleSpeak(e) {
            synth.speak(msg)
        }
        // 停止
        function handleStop(e) {
            synth.cancel(msg)
        }
        // 暂停
        function handlePause(){
            synth.pause(msg)
        }
        // 继续播放
        function handleResume(){
            synth.resume(msg)
        }
        // 当话语开始被说出时，事件被触发。
        msg.onstart = function(event) {
            console.log('The msg onstart')
        };
        // 一旦说出话语，就会触发事件。
        msg.onend = function(event) {
            console.log('The msg onend.')
        };
        // 如果发生阻止说出话语的错误，则触发该事件。
        msg.onerror = function(event) {
            console.log('The msg onerror.')
        };
        // 如果话语在说话时暂停，则会触发事件。
        msg.onpause = function(event) {
            console.log('The msg onpause.')
        };
        // 如果暂停说话后重新播放，则会触发该事件。
        msg.onresume = function(event) {
            console.log('The msg onresume.')
        };
        // 只要在说出话语时达到单词或句子边界，就会触发事件。
        msg.onboundary = function(event) {
            console.log('The msg onboundary.')
        };
        // 在语音合成标记语言（SSML）文件中到达“标记”标记时触发事件
        msg.onmark = function(event) {
            console.log('The msg onmark.')
        };
    </script>
</html>