专栏首页Fdu弟中弟HTML人工合成声音

HTML人工合成声音

问答系统中可以使用的人工合成声音。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="voiceinator">
	  <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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 标注工具:parselmouth(歌声合成语音合成标注)

    AI之禅
  • 标注工具:parselmouth(歌声合成语音合成标注)

    AI之禅
  • 合成动态视频效果及声音合成

    图片大小限制,更多可访问 http://www.stat.ucla.edu/~jxie/STGConvNet/STGConvNet.html

    用户1908973
  • 让你的声音动起来,人声驱动合成逼真的视频人像

    标题:Photorealistic Audio-driven Video Portraits

    好好学SLAM
  • 语音合成-声学概念和变声变调

    AI之禅
  • 语音合成技术,助你把文字变成声音

    文章不是简单的的Ctrl C与V,而是一个字一个标点符号慢慢写出来的。我认为这才是是对读者的负责,本教程由技术爱好者成笑笑(博客:http://www.chen...

    做全栈攻城狮
  • 人工智能学会“听音辨声”

    美国麻省理工学院的科研人员开发出一套人工智能系统,能够分辨出音乐中不同乐器发出的声音,并单独调音。

    人工智能快报
  • 谷歌AI黑科技曝光:合成语音与真人声音难以区分

    【腾讯科技编者按】 据国外媒体报道称,如果按照最新的标准来看,人类似乎已经将自己的“声带”正式献给了人工智能。这可并不是笔者在这儿危言耸听,而是谷歌本月开创性地...

    企鹅号小编
  • 谷歌大脑&DeepMind:NSynth神经音乐合成器,生成超逼真乐器声音

    【新智元导读】谷歌大脑和 DeepMind 合作发布一个名为 NSynth (Neural Synthesizer)的神经声音合成器,使用深度神经网络在单个样本...

    新智元

扫码关注云+社区

领取腾讯云代金券