H5 语音合成播报功能

我就是我 2022-06-05 12:17 363阅读 0赞

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

**实现效果图：**

![语音实现效果贴图][SouthEast]

#### **语法介绍** ####

**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][1]

![浏览器兼容性贴图1][1 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地址][gitHub]

[SpeechSynthesisUtterance]: https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis
[TWO]: https://www.smashingmagazine.com/2017/02/experimenting-with-speechsynthesis/
[SouthEast]: /images/20220605/4be77d35158941cba8b5e5fa860d6650.png
[1]: /images/20220605/e31bcf7858d44fd993dbf23838468fd5.png
[1 1]: /images/20220605/10757198af014a67b39b28a9558d5619.png
[gitHub]: https://github.com/Rkatsiteli/H5-archive/tree/master/H5%E8%AF%AD%E9%9F%B3%E6%92%AD%E6%8A%A5