js 文字转语音 api SpeechSynthesisUtterance

SpeechSynthesisUtterance基本介绍

SpeechSynthesisUtterance是HTML5中新增的API,用于将指定文字合成为对应的语音.也包含一些配置项,指定如何去阅读(语言,音量,音调)等

官方文档地址（https://developer.mozilla.org/zh-CN/docs/Web/API/SpeechSynthesisUtterance）

SpeechSynthesisUtterance基本属性

SpeechSynthesisUtterance.lang 获取并设置话语的语言
SpeechSynthesisUtterance.pitch 获取并设置话语的音调(值越大越尖锐,越低越低沉)
SpeechSynthesisUtterance.rate 获取并设置说话的速度(值越大语速越快,越小语速越慢)
SpeechSynthesisUtterance.text 获取并设置说话时的文本
SpeechSynthesisUtterance.voice 获取并设置说话的声音
SpeechSynthesisUtterance.volume 获取并设置说话的音量
SpeechSynthesisUtterance.text基本方法
speak() 将对应的实例添加到语音队列中
cancel() 删除队列中所有的语音.如果正在播放,则直接停止
pause() 暂停语音
resume() 恢复暂停的语音
getVoices 获取支持的语言数组. 注意:必须添加在voiceschanged事件中才能生效

使用demo

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div><label for="voices">语言:</label><select name="voice" id="voices"><option value="">请选择</option><!-- <option value="Google_SC">Google 普通话（中国大陆）</option><option value="Kangkang_SC">Microsoft Kangkang - Chinese (Simplified, PRC)</option> --></select></div><div><label for="rate">语速:</label><input id="rate" name="rate" type="range" min="0" max="3" value="1" step="0.1"></div><div><label for="pitch">音调:</label><input id="pitch" name="pitch" type="range" min="0" max="2" step="0.1"></div><div><textarea id="text" name="text"></textarea></div><div><button onclick="startAudio()">点击播放语音</button></div><div><button onclick="stopAudio()">点击结束语音</button></div><div><button onclick="pauseAudio()">点击暂停语音</button></div><div><button onclick="resumeAudio()">恢复暂停的语音</button></div></body>
<script>let utterance = new SpeechSynthesisUtterance() // 创建 语音对象// 获取元素对象let dom_voices = document.querySelector('#voices')const options = document.querySelectorAll('[type="range"], [name="text"]')options.forEach(e => e.addEventListener('change', handleChange))// voiceschanged 事件speechSynthesis.addEventListener('voiceschanged', () => {let voices = speechSynthesis.getVoices();// 根据系统语音创建选项voices.forEach(e => {const option = document.createElement('option')option.value = e.langoption.text = e.namedom_voices.appendChild(option)})})// 发生改变时触发function handleChange(e) {// console.log(this.name, this.value);utterance[this.name] = this.value}function startAudio() {utterance.lang = dom_voices.selectedOptions[0].value // 设置语言speechSynthesis.speak(utterance);}// 点击结束语音function stopAudio() {speechSynthesis.cancel(utterance)}function pauseAudio() {speechSynthesis.pause(utterance)}function resumeAudio() {speechSynthesis.resume(utterance);}
</script></html>

js 文字转语音 api SpeechSynthesisUtterance相关推荐

【存货系列】JS文字转语音方案设计及实现
文章目录 JS文字转语音方案设计及实现写在前面的话设计思路总体逻辑设计核心接口设计代码实现可配置对象初始化函数 IE浏览器实现 Chrome/Safari浏览器实现使用方式引入js文 ...
【Qbot】6.讯飞文字转语音Api使用/VITS派蒙复读机实现
该项目计划长期进行维护更新,欢迎star:https://github.com/zstar1003/Qbot 前言看完流浪地球2之后,萌生了一个想法:我想给机器人完整的一生.作为一个完整的机器人,声 ...
JS文字转语音技术实现
前言最近在做排队叫号系统,涉及到文字转语音播报,因此总结了几种前端文字转语音发声的方法. 一.Web Speech API h5新提供的一个原生语音识别技术的API,可以将文本转成语音并播放. 作为 ...
微信小程序调用百度文字转语音API
文字转语音,这里接入的是百度的https://ai.baidu.com/docs#/TTS-API/top里面有详细的介绍怎么去申请.不多说什么直接效果已解决ios播放没有语音的bug,已经亲测魅族 ...
html+js文字合成语音代码支持在线试听播放和转换成mp3格式下载到本地单文件便携版在线AI文字转换音频速度超快
<!doctype html><html lang="en"><head><meta charset="UTF-8"& ...
百度文字转语音Api，文字长度限制问题
百度合成语音接口,文字内容长度限制,纯汉字不得超过2048个(不包含任何其他字符,否则报错) 百度语音合成接口使用,就不再累赘,去参考这个博主的文章 https://blog.csdn.net/bel ...
文字转语音的api接口
话不多说,直接干货一.百度接口实现免费文字转语音 http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=4&text=你好啊 ...
Python调用有道语音API实现文字转音频
有道文字转语音API: https://ai.youdao.com/DOCSIRMA/html/语音合成TTS/API文档/语音合成服务/语音合成服务-API文档.html 获取应用ID和应用密钥: ...
vue+文字转换为语音播放，播放指定内容，附带js版本，SpeechSynthesisUtterance
首先: 调动方法:参数为指定文字: //语音播报yybbFun(data){this.commonjs.handleSpeak(data);}, 公共方法地址: https://mp.csdn.net ...

js 文字转语音 api SpeechSynthesisUtterance

SpeechSynthesisUtterance基本介绍

SpeechSynthesisUtterance基本属性

使用demo

js 文字转语音 api SpeechSynthesisUtterance相关推荐

最新文章

热门文章