文字转语音

chanchaw大约 1 分钟javascript

概述

有下面四种方法可以实现文字转语音：

百度文字转语音开发API，在2021年1月20日百度已经关闭了该功能
H5新增的功能 SpeechSynthesisUtterance 在浏览器本地实现，无须联网，不是请求后端，免费实现
使用微软TTS语音引擎
第三方 speak.js

h5新功能 SpeechSynthesisUtterance 实现

源码

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>语音播报</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div class="voiceinator">
  <h1>听说 5000</h1>
  
  <select name="voice" id="voices">
    <option value="">Select A Voice</option>
  </select>
  
  <label for="rate">Rate:</label>
  <input name="rate" type="range" min="0" max="3" value="1" step="0.1">
  
  <label for="pitch">Pitch:</label>
  <input name="pitch" type="range" min="0" max="2" step="0.1">
  
  <textarea name="text">你好 给你点?</textarea>
  
  <button id="stop">Stop!</button>
  <button id="speak">Speak</button>
</div>


<script type="text/javascript">
		const synth = window.speechSynthesis
		const msg = new SpeechSynthesisUtterance()
		let voices = []
		const voicesDropdown = document.querySelector('[name="voice"]')
		const options = document.querySelectorAll('[type="range"], [name="text"]')
		const speakButton = document.querySelector('#speak')
		const stopButton = document.querySelector('#stop')

		msg.text = '你好 给你点?'
		msg.lang = 'zh-CN'

		synth.addEventListener('voiceschanged',getSupportVoices)
		speakButton.addEventListener('click',throttle(handleSpeak,1000))
		stopButton.addEventListener('click',handleStop)
		options.forEach(e => e.addEventListener('change',handleChange))

		function getSupportVoices() {
			voices = synth.getVoices()
			voices.forEach(e => {
				const option = document.createElement('option')
				option.value = e.lang
				option.text = e.name
				voicesDropdown.appendChild(option)
			 })
		}
		function handleSpeak(e) {
			msg.lang = voicesDropdown.selectedOptions[0].value
			synth.speak(msg)
		}
		function handleStop(e) {
			synth.cancel(msg)
		}
		function handleChange(e) {
			msg[this.name] = this.value
		}
		function throttle(fn,delay) {
			let last = 0
			return function() {
				const now = new Date()
				if(now - last > delay) {
					fn.apply(this,arguments)
					last = now
				}
			}
		}
  </script>
  
</body>
</html>

项目

阿里云盘 -> 安装程序与软件 -> 开发与实施->源码与文件 -> jquery -> H5语音播报

文字转语音

# 概述

# h5新功能 SpeechSynthesisUtterance 实现

# 源码

# 项目

概述

h5新功能 SpeechSynthesisUtterance 实现

源码

项目