网站建设及相关流程,北京网站备案域名,二维码设计软件,海外营销策略前言 平时在做项目的过程中#xff0c;有遇到场景是客户要求播放语音的场景#xff0c;比如:无障碍朗读,整篇文章实现朗读,文字转语音,文字转语音播放等等。 在不使用第三方API接口的情况下,这里需要js来实现文字转语音播放的功能。能想到的也就是利用html5的个API#xff1… 前言 平时在做项目的过程中有遇到场景是客户要求播放语音的场景比如:无障碍朗读,整篇文章实现朗读,文字转语音,文字转语音播放等等。 在不使用第三方API接口的情况下,这里需要js来实现文字转语音播放的功能。能想到的也就是利用html5的个APISpeechSynthesis。 SpeechSynthesis用于将指定文字合成为对应的语音.也包含一些配置项,指定如何去阅读(语言,音量,音调)等等 SpeechSynthesis实例对象属性 lang 获取并设置话语的语言pitch 获取并设置话语的音调(值越大越尖锐,越低越低沉)rate 获取并设置说话的速度(值越大语速越快,越小语速越慢)text 获取并设置说话时的文本voice 获取并设置说话的声音volume 获取并设置说话的音量 SpeechSynthesis方法 speak() 将对应的实例添加到语音队列中cancel() 删除队列中所有的语音.如果正在播放,则直接停止pause()暂停语音resume() 恢复暂停的语音getVoices 获取支持的语言数组. 注意:必须添加在voiceschanged事件中才能生效 实例对象中的方法 onstart – 语音合成开始时候的回调。onpause – 语音合成暂停时候的回调。onresume – 语音合成重新开始时候的回调。onend – 语音合成结束时候的回调 简单实现 如果想让浏览器读出“书以启智,技于谋生,活出斜杠”的声音可以下面的js代码 let utterThis new SpeechSynthesisUtterance(书以启智,技于谋生,活出斜杠);
speechSynthesis.speak(utterThis); 实现这个语音朗读,需要用构造器函数SpeechSynthesisUtterance方法,实例对象下,调用speak方法,即可实现语音的播报 除了使用speak方法我们还可以实例对象属性text因此上面的代码也可以写成 let utterThis new SpeechSynthesisUtterance();
utterThis.text 书以启智,技于谋生,活出斜杠;
utterThis.lang en-US;//汉语
utterThis.rate 0.7;//语速
speechSynthesis.speak(utterThis); 具体实例代码 templatediv classspeech-wrapdivspan classdemonstration音量/spanel-slider inputhandleVoinceInput v-modelvoinceValue vertical height200px/el-slider/divdivel-input classinseret-input clearable placeholder请输入内容 v-modelinput/el-inputel-select changehandleSelectChange v-modelselectVal slotprepend placeholder请选择语言el-option labelzh-CN valuezh-CN/el-optionel-option labelen-US valueen-US/el-option/el-selectel-button slotappend clickhandleTransYuYin转语音/el-buttonel-button clickhandleStopYuYin暂停/el-buttonel-button clickhandleHuiFuYuYin恢复/el-button/div /div/templatescriptexport default {name: speechSynthesisUtterance,data() {return {input: 书以启智,技于谋生,活出斜杠,voinceValue: 30,selectVal: zh-CN,}},methods: {handleTransYuYin() {if(this.input) {let msg new SpeechSynthesisUtterance(this.input);msg.volume this.voinceValue;msg.rate this.voinceValue;msg.pitch this.voinceValue;this.throttle(window.speechSynthesis.speak(msg),2000);}else {this.$message.error(输入框内容不能为空);}},handleVoinceInput(val) {this.voinceValue val;},handleSelectChange(val) {this.selectVal val;},handleStopYuYin() {window.speechSynthesis.pause();},handleHuiFuYuYin() {window.speechSynthesis.resume();},throttle(fn,delay) {let last 0return function() {const now new Date()if(now - last delay) {fn.apply(this,arguments)last now}}} }}/scriptstyle scoped.speech-wrap {display:flex;justify-content:start;align-items: center;}.speech-wrap .inseret-input {width: 400px;}/style window.speechSynthesis来创建语音,xxx.volume 获取并设置说话的音量,xxx.rate 获取并设置说话的速度(值越大语速越快,越小语速越慢),xxx.pitch 获取并设置话语的音调(值越大越尖锐,越低越低沉) window.speechSynthesis.speak(msg) 播放语音,msg 是一个SpeechSynthesisUtterance对象,msg.text 设置要播放的话, msg.lang 设置语言,msg.volume 设置音量,msg.rate 设置语速,msg.pitch 设置音调 上面使用了throttle函数来限制播放的频率,防止播放过快,导致浏览器卡顿 如果不使用接口的方式,在项目中加入文本转语音,可以用这种方式实现,但是要注意兼容性问题,这个API是不兼容IE浏览器的 关于山东33岁小伙自绑双脚跳河自尽 2023-10-19 聊一下湖北黄石当街锤人事件 2023-10-18 聊下读完《如何成为一名运营大牛》这本书后感 2023-10-12 聊一下读完“优势成长”这本书后感 2023-10-08 函数的防抖与节流 2023-10-07 vuejs中使用axios时如何实现滑动滚动条来动态加载列表数据 2023-10-06 能绘画,能问答
