JS实现简单的网页文本转语音阅读

最新推荐文章于 2024-09-30 11:04:02 发布

原创最新推荐文章于 2024-09-30 11:04:02 发布 · 2.9k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #tts

语音合成专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用JavaScript的SpeechSynthesis和SpeechSynthesisUtterance API来实现网页文本转语音阅读。通过设置 Utterance 的属性如 text、lang、volume 和 rate，可以自定义发音细节。同时，利用speechSynthesis对象的方法speak、cancel、pause和resume控制语音合成的播放状态。提供了一个简单的DEMO并展示了效果。

SpeechSynthesisUtterance主要用来构建语音合成实例，speechSynthesis大概用来触发浏览器语音模块，让浏览器把内容读出来。

SpeechSynthesisUtterance实例有以下属性，可以通过设置一下属性调整发音。

text – 要合成的文字内容，字符串。
lang – 使用的语言，字符串，例如："zh-cn"
voiceURI – 指定希望使用的声音和服务，字符串。
volume – 声音的音量，区间范围是0到1，默认是1。
rate – 语速，数值，默认值是1，范围是0.1到10，表示语速的倍数，例如2表示正常语速的两倍。
pitch – 表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1。

还有一下方法：

onstart – 语音合成开始时候的回调。
onpause – 语音合成暂停时候的回调。
onresume – 语音合成重新开始时候的回调。
onend – 语音合成结束时候的回调。

speechSynthesis对象有以下方法：

speak() – 只能接收SpeechSynthesisUtterance作为唯一的参数，作用是读合成的话语。
cancel() – 立即终止合成过程。
pause() – 暂停合成过程。
resume() – 重新开始合成过程。
getVoices() – 此方法不接受任何参数，用来返回浏览器支持的语音包列表，是个数组

一个简单的demo

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>语音测试</title>
		<script type="text/javascript"> 
		var speaker = new window.SpeechSynthesisUtterance();
		var speakTimer,
		    stopTimer;

		// 开始朗读
		function speakText() {
			var context = document.getElementById('ttsText');
		    clearTimeout(speakTimer);
		    window.speechSynthesis.cancel();
		    speakTimer = setTimeout(function () {
		    	speaker.volume = 0.9
		        speaker.text = context.innerHTML;
		        window.speechSynthesis.speak(speaker);
		    }, 200);
		}

		// 停止朗读
		function stopSpeak() {
		    clearTimeout(stopTimer);
		    clearTimeout(speakTimer);
		    stopTimer = setTimeout(function () {
		        window.speechSynthesis.cancel();
		    }, 20);
		}
		</script>
	</head>
	<body>
		<p id="ttsText">2020年的“五一”，注定是一个不平凡的节日。<br>新冠肺炎疫情突如其来，14亿人守望相助，交出全球战“疫”的“中国答卷”。<br>此时，春回大地，万物复苏。疫情的阴霾逐渐散去，田间地头、工厂车间，复工复产正在不断推进……<br>“五一”国际劳动节到来之际，让我们在这个春天，追寻奋斗者的脚步，聆听奋斗者的声音。</p>
		<div>
			<input type="button" id="start_btn" onclick="speakText()" value="播放">
			<input type="button" id="cancel_btn" onclick="stopSpeak()" value="取消">
		</div>
		
	</body>
</html>

效果截图如下