html SpeechSynthesis文字转语音

web 页面使用speechSynthesis实现文字转语音

网页语音 API 的SpeechSynthesis 接口是语音服务的控制接口;它可以用于获取设备上关于可用的合成声音的信息,开始、暂停语音,或除此之外的其他命令。

属性
SpeechSynthesis 也从它的父接口继承属性,EventTarget.

SpeechSynthesis.paused 只读
当SpeechSynthesis 处于暂停状态时, Boolean (en-US) 值返回 true 。

SpeechSynthesis.pending (en-US) 只读
当语音播放队列到目前为止保持没有说完的语音时, Boolean (en-US) 值返回 true 。

SpeechSynthesis.speaking (en-US) 只读
当语音谈话正在进行的时候,即使SpeechSynthesis处于暂停状态, Boolean (en-US) 返回 true 。

事件操作
SpeechSynthesis.onvoiceschanged (en-US)
当由SpeechSynthesis.getVoices()方法返回的SpeechSynthesisVoice (en-US)列表改变时触发。

方法
SpeechSynthesis 也从它的父接口继承方法, EventTarget.

SpeechSynthesis.cancel() (en-US)
移除所有语音谈话队列中的谈话。

SpeechSynthesis.getVoices()
返回当前设备所有可用声音的 SpeechSynthesisVoice (en-US)列表。

SpeechSynthesis.pause() (en-US)
把 SpeechSynthesis 对象置为暂停状态。

SpeechSynthesis.resume() (en-US)
把 SpeechSynthesis 对象置为一个非暂停状态:如果已经暂停了则继续。

SpeechSynthesis.speak() (en-US)
添加一个 utterance 到语音谈话队列;它将会在其他语音谈话播放完之后播放。

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>网页文字转语音</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">

</script>

<style type="text/css">
</style>
</head>
    <body id="form1">
    文字:<input type="text" value="LED灯窃密演示系统是一套通过灯光传输信息的语音窃听演示设备。该窃密设备不需要专线布设,信息通过光波传输,没有无线电辐射,具有隐蔽性好、泛在性强、传输距离远等特点,演示系统监听距离可达 120 米。该设备由两部分组成:LED拾音灯泡和远距离接收解调装置。" id="inpu">
    <button onclick="sayTTS()">发声</button>
	<button onclick="esc();">最小化</button>
	<button onclick="allqm()">F11</button>
	<button onclick="exitFullscreen()">退出全屏</button>
	
    </body>
    <script>
    function sayTTS()
    {
        var content = document.getElementById('inpu');
        console.log(content.value);
        const synth = window.speechSynthesis;
        const msg = new SpeechSynthesisUtterance();
        msg.text = content.value;     // 文字内容
        msg.lang = "zh-CN";  // 使用的语言:中文
        msg.volume = 0.8;      // 声音音量:0-1
        msg.rate = 1.5;        // 语速:0-10
        msg.pitch = 0.8;       // 音高:0-1
        synth.speak(msg);    // 播放
    }
	//关闭
	function esc(){
	  //window.blur(); // 让当前窗口失去焦点
	  //window.open('', '_self', ''); // 打开一个空白页面
	  window.setTimeout(function() {window.close();}, 200); // 延迟200毫秒关闭当前窗口
	}
	// 全屏
	function allqm(){
		var docElm = document.documentElement;  
        //W3C   
        if (docElm.requestFullscreen) {  
            docElm.requestFullscreen();  
        }  
            //FireFox   
        else if (docElm.mozRequestFullScreen) {  
            docElm.mozRequestFullScreen();  
        }  
            //Chrome等   
        else if (docElm.webkitRequestFullScreen) {  
            docElm.webkitRequestFullScreen();  
        }  
            //IE11   
        else if (elem.msRequestFullscreen) {  
            elem.msRequestFullscreen();  
        }  
	}
	// 推出全屏
	function exitFullscreen() {
		var de = document;
		if (de.exitFullscreen) {
			de.exitFullscreen();
		} else if (de.mozCancelFullScreen) {
			de.mozCancelFullScreen();
		} else if (de.webkitCancelFullScreen) {
			de.webkitCancelFullScreen();
		}
	}

    </script>
</html>

浏览器兼容性
html SpeechSynthesis文字转语音_第1张图片

你可能感兴趣的:(html,前端)