文字合成为语言 Speech Synthesis API

最新推荐文章于 2024-04-17 16:54:00 发布

码页面

最新推荐文章于 2024-04-17 16:54:00 发布

阅读量1.1k

点赞数 1

分类专栏： javascript html

本文链接：https://blog.csdn.net/ministech/article/details/102815138

版权

javascript 同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

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>

码页面

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
文字合成为语言 Speech Synthesis API

Speech Synthesis APISpeech Synthesis API非常容易实现。事实上，只需两行代码即可让您的网络应用与用户交流。var utterance = new SpeechSynthesisUtterance('Hello Treehouse');window.speechSynthesis.speak(utterance);speechSynthesis 接口...
复制链接

扫一扫