JavaScript将文字播放为语音 --- 关于HTML5语音Web Speech API

懒驴 2021年11月09日 404次浏览

在HTML中可直接将文字以语音的形式在网页中播放。

HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthesis)”,这两个名词听上去很高大上,实际上指的分别是“语音转文字”,和“文字变语音”。

而本文要介绍的就是这里的“语音合成-文字变语音”。为什么称为“合成”呢?比方说你Siri发音“你好,世界!” 实际上是把“你”、“好”、“世”、“界”这4个字的读音给合并在一起,因此,称为“语音合成”。

“语音识别”和“语音合成”看上去像是正反两方面,应该带有镜面气质,实际上,至少从兼容性来看,两者并无法直接对等。“语音识别(Speech Recognition)”目前的就Chrome浏览器和Opera浏览器默认支持,但是,“语音合成(Speech Synthesis)”的兼容性要好上太多了Chrome,FF,Edge,Safari等等都是支持的。

主要实现代码如下:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8" />
	<title>语言播放</title>
	</head>
	<body>
		<button onclick="vioceSpeak()">点击播放</button>
	</body>
	<script>
	function vioceSpeak(){
		var str="HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,
		+"另外一个就是“语音合成(Speech Synthesis)”,
		+"这两个名词听上去很高大上,实际上指的分别是“语音转文字”,和“文字变语音”。";
		var utterThis = new window.SpeechSynthesisUtterance(str);
		window.speechSynthesis.speak(utterThis);
	}
	</script>
</html>