vue+文字转换为语音播放，播放指定内容，附带js版本，SpeechSynthesisUtterance

首先：调动方法：参数为指定文字：//语音播报yybbFun(data){this.commonjs.handleSpeak(data);},公共方法地址：https://mp.csdn.net/postedit/94406138方法指南：1、2、这里主要用的是SpeechSynthesisUtteran...

浩星

5836人浏览 · 2019-07-01 20:16:05

浩星 · 2019-07-01 20:16:05 发布

首先：

调动方法：参数为指定文字：

        //语音播报
      yybbFun(data){
        this.commonjs.handleSpeak(data);
      },

公共方法地址：

https://mp.csdn.net/postedit/94406138

方法指南：

1、

2、

这里主要用的是SpeechSynthesisUtterance的方法

----------------------------------------------------------------------------js方法

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<button id="abc">点击</button>
	 <button id="stop">Stop!</button>
	 <button id="speak">Speak</button>
</body>
</html>
<script type="text/javascript">
	// window.onload=function(){
	// 	const synth = window.speechSynthesis
	// 	let msg = new SpeechSynthesisUtterance("你好");
	//       console.log(msg)
	//      //msg.rate = 4 播放语速
	//      //msg.pitch = 10 音调高低
	//      //msg.text = "播放文本"
	//      //msg.volume = 0.5 播放音量
	//       synth.speak(msg);
	// }
	const synth = window.speechSynthesis
	const msg = new SpeechSynthesisUtterance()
	const speakButton = document.getElementById('speak')
	const stopButton = document.getElementById('stop')
	speakButton.addEventListener('click',throttle(handleSpeak,1000))
	stopButton.addEventListener('click',handleStop)

	msg.text = '跟我走吧，天亮就出发'
	msg.lang = 'zh-CN'
	function handleSpeak(e) {
		synth.speak(msg)
	}
	function handleStop(e) {
		synth.cancel(msg)
	}
	function throttle(fn,delay) {
		let last = 0
		return function() {
	  		const now = new Date()
	  		if(now - last > delay) {
	    		fn.apply(this,arguments)
	    		last = now
	  		}
		}
	}


	document.getElementById('abc').onclick=throttle(handleSpeak,1000);
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^