福州市闽侯县建设局网站,html网站开发,18元套餐,万户高端网站建设一、前言
前一段时间在项目中需要用到播报文字语音。找到了 HTML 5 有这样的功能。
现在有时间进行总结下。
二、SpeechSynthesis
SpeechSynthesis 接口是语音服务的控制接口。它可以用于获取设备上关于可用的合成声音的信息#xff0c;
开始、暂停语音#xff0c;或者别…一、前言
前一段时间在项目中需要用到播报文字语音。找到了 HTML 5 有这样的功能。
现在有时间进行总结下。
二、SpeechSynthesis
SpeechSynthesis 接口是语音服务的控制接口。它可以用于获取设备上关于可用的合成声音的信息
开始、暂停语音或者别的命令。MDN
SpeechSynthesis 是 window 上面的属性可以直接调用。
属性
下面的都是只读属性
paused是否处于暂停状态返回 Boolean 值
pending语音播报队列中是否有需要说的语音返回 Boolean 值
speaking是否正在进行语音播报包括暂停状态返回 Boolean 值
事件
onvoiceschanged当 getVoices 返回的 voices 列表改变时触发
方法
cancel移除所有语音播报队列中的语音
getVoices返回当前设备可用的声音列表
pause暂停语音播报
resume把对象设置为非暂停状态如果是暂停就继续
speak添加一个 utterance 到语音播报队列会在其他语音播报后播报
三、SpeecheSynthesisUtterance
SpeecheSynthesisUtterance 是语音请求的一个类。需要实例化才可以使用。
它包含语音要阅读的内容以及如何阅读例如语言、音调、音量等
属性
lang读取或设置当前要阅读的语音
pitch读取或设置阅读的音调
rate读取或设置阅读的语速
text读取或设置阅读的内容
voice读取或设置阅读的声音不同的浏览器有不同内置的人声
volume读取或设置阅读的音量
事件
boundary当阅读到单词或句子的边界时触发
end当阅读结束时触发
error当阅读报错时触发
mark当阅读到 SSML 标记时触发
pause当阅读暂停时触发
resume当阅读设置为非暂停时触发
start开始阅读时触发
上面的事件都是用 addEventListenter 绑定事件同时也可以用对应的 onEventname 绑定事件
四、示例
上面两个 API 可以满足基本的语音播报需要了下面就是一个示例
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title语音合成/titlestyle/* input{width: 500px;height: 200px;} *//style
/headbodydivh3a hrefhttps://blog.csdn.net/yb305/article/details/111219007 target_blank语音合成使用 文字语音播报/a/h3h3a hrefhttps://www.jianshu.com/p/92dec635f6c5 target_blankHTML5语音合成Speech Synthesis API简介/a/h3textarea rows5 cols100 idinput placeholder请输入内容/textareadivplabel语言/labelselect idlangeoption valuezh-cn selected中文/optionoption valueen-US英文/option/select/pplabel音量/labelinput typerange min0 max1 step0.1 idvolume //pplabel音速/labelinput typerange min0 max10 step0.1 idrate //pplabel音色/labelinput typerange min0 max2 step0.1 idpitch //p/divdivbutton typebutton idsubmit播报/buttonbutton typebutton idsuspend暂停/buttonbutton typebutton idrecovery恢复/buttonbutton typebutton idstop停止/button/div/divscript// 1.获取input框输入的内容function getValue() {//定义全局对象const obj {text: ,lange: zh-cn,volume: 1,rate: 1,pitch: 1,};//点击“播报”按钮const Dom document.getElementById(submit);Dom.onclick function () {const value document.getElementById(input).value;if (!value) return;console.log(点击获取内容1, value);obj.text value;speeck(obj);};//按下回车键按钮window.onkeyup function (e) {// console.log(e,e);const value document.getElementById(input).value;if (e.keyCode ! 13 || !value) return;console.log(回车获取内容2, value);obj.text value;speeck(obj);};//暂停播报const suspend document.getElementById(suspend);suspend.onclick function () {window.plays.pause(); //暂停};//恢复播报const recovery document.getElementById(recovery);recovery.onclick function () {window.plays.resume(); //恢复};//停止播报const stop document.getElementById(stop);stop.onclick function () {window.plays.cancel(); //停止};//选择语言const lange document.getElementById(lange);lange.onchange function (v) {console.log(选择语言, v);console.log(选择语言-2, v.target.value);obj.lange v.target.value;speeck(obj);};//选择音量const volume document.getElementById(volume);volume.onchange function (v) {console.log(选择音量, v.target.value);obj.volume v.target.value;speeck(obj);};//选择音速const rate document.getElementById(rate);rate.onchange function (v) {console.log(选择音速, v.target.value);obj.rate v.target.value;speeck(obj);};//选择音色const pitch document.getElementById(pitch);pitch.onclick function (v) {console.log(选择音色, v.target.value);obj.pitch v.target.value;speeck(obj);};}//调用执行getValue();//2.语音播报function speeck(data) {console.log(播报时, data);//SpeechSynthesisUtterance对象主要用来构建语音合成实例window.voice new window.SpeechSynthesisUtterance();// 对象合成方法Object.assign(window.voice, data)//speechSynthesis对象主要作用是触发行为例如读停还原window.plays window.speechSynthesis;window.plays.speak(window.voice);}/script
/body/html
