H5 语音合成播报功能

最新推荐文章于 2024-06-14 11:41:44 发布

Rkatsiteli

最新推荐文章于 2024-06-14 11:41:44 发布

阅读量1.7w

点赞数 4

分类专栏： FRONT-END + WEB 文章标签： html5

本文链接：https://blog.csdn.net/qq_16559905/article/details/78648610

版权

FRONT-END + WEB 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

采用的 SpeechSynthesisUtterance实现语音播报功能，参考资料： ONE、TWO

实现效果图：

语音实现效果贴图

语法介绍

1、speechSynthesis.getVoices()

getVoices()的方法SpeechSynthesis接口返回的列表SpeechSynthesisVoice对象代表当前设备上所有可用的声音。

2、speechSynthesis.cancel()

cancel()的方法SpeechSynthesis接口从话语队列中删除所有的话语。

3、speechSynthesis.pause()

pause() 把SpeechSynthesis对象处于暂停状态。

4、SpeechSynthesis.speak()

增加了一个语音话语队列; 它将口语当其他话语排队之前一直说。

5、SpeechSynthesis.resume()

把SpeechSynthesis对象non-paused状态:简历如果它已经停了。

浏览器兼容性

浏览器兼容性贴图1

代码附上：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>H5语音播报功能</title>
		<style>
			article {margin: 0 auto;max-width: 800px;text-align: center;}
			textarea {max-width: 600px;width:100%;text-align: left;}
			button{border-radius: 3px;border: 1px solid #dddddd;height: 30px;width: 80px;cursor: pointer;}
		</style>
	</head>

	<body>
		<article>
			<h3 align="center">语音播报功能：</h3>
			<p>
				<textarea rows="15" class="_play">搜狗[1]  是搜狐公司的旗下子公司，于2004年8月3日推出，目的是增强搜狐网的搜索技能，主要经营搜狐公司的搜索业务。在搜索业务的同时，也推出搜狗输入法、搜狗高速浏览器。</textarea>
			</p>
			<p>
				<label>选择播报语言：</label>
				<select id="voiceSelect" onchange="play()"></select>
			</p>
			<button class="_search" onclick="play()">开始</button>
			<button onclick="resume()">继续</button>
			<button onclick="pause()">暂停</button>
			<button onclick="cancel()">清除队列</button>
		</article>
	</body>
	<script>
		if(!('speechSynthesis' in window)) {
			throw alert("对不起，您的浏览器不支持")
		}

		var _play = document.querySelector("._play"),
			to_speak = window.speechSynthesis,
			dataName, voiceSelect = document.querySelector("#voiceSelect"),
			voices = [];

		function play() {
			cancel();
			to_speak = new SpeechSynthesisUtterance(_play.value);

			//to_speak.rate = 1.4;// 设置播放语速，范围：0.1 - 10之间

			var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
			for(i = 0; i < voices.length; i++) {
				if(voices[i].name === selectedOption) {
					to_speak.voice = voices[i];
				}
			}

			window.speechSynthesis.speak(to_speak);

		}

		//暂停
		function pause() {
			window.speechSynthesis.pause();
		}
		//继续播放
		function resume() {
			window.speechSynthesis.resume(); //继续
		}
		//清除所有语音播报创建的队列
		function cancel() {
			window.speechSynthesis.cancel();
		}
		//创建选择语言的select标签
		function populateVoiceList() {
			voices = speechSynthesis.getVoices();
			for(i = 0; i < voices.length; i++) {
				var option = document.createElement('option');
				option.textContent = voices[i].name + ' (' + voices[i].lang + ')';

				if(voices[i].default) {
					option.textContent += ' -- DEFAULT';
				}
				option.setAttribute('data-lang', voices[i].lang);
				option.setAttribute('data-name', voices[i].name);
				voiceSelect.appendChild(option);
			}
		}

		setTimeout(function() {
			populateVoiceList();
		}, 0)
	</script>

</html>

gitHub地址

Rkatsiteli

关注

4
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
36
评论
H5 语音合成播报功能

采用的 SpeechSynthesisUtterance实现语音播报功能，参考资料： ONE、TWO实现效果图：语法介绍1、speechSynthesis.getVoices()getVoices()的方法SpeechSynthesis接口返回的列表SpeechSynthesisVoice对象代表当前设备上所有可用的声音。2、speechSynthesis.cancel()cancel()的方法Sp
复制链接

扫一扫