鲜为人知的HTML5语音合乐成能
|
听一下就会发明，播放出来的声音并不是预先录制好的音频资料，而是通过笔墨辨认后合成的语音 请先戴上耳机，然后将下面的代码复制到chrome节制台中体验～ let msg = new SpeechSynthesisUtterance("接待你阅读我的博客"); window.speechSynthesis.speak(msg); 看，前端实现语音合成并不难 本日的主角 Speech Synthesis API 通过上面的例子我们可以揣摩到上面挪用的两个要领的成果 SpeechSyntehesisUtteranc window.speechSynthesis.speak 虽然了，语音合成不只仅包括这两个API，but我们先从这两点入手 SpeechSyntehesisUtteranc 参考：developer.mozilla.org/en-US/docs/… SpeechSyntehesisUtteranc 工具包括了语音处事要读取的内容和一些参数，好比说话，音高和音量 SpeechSyntehesisUtteranc() SpeechSynthesisUtterance.lang SpeechSynthesisUtterance.pitch SpeechSynthesisUtterance.rate SpeechSynthesisUtterance.voice SpeechSynthesisUtterance.volume 留意：以上属性都是 可读写 的！ 可以把下面这段代码copy下来实行一下，注释中会有声名 let msg = new SpeechSynthesisUtterance(); msg.text = "how are you" // 要合成的文本 msg.lang = "en-US" // 美式英语发音（默认自动选择） msg.rate = 2 // 二倍速（默以为 1，范畴 0.1～10） msg.pitch = 2 // 高音调（数字越大越厉害，默以为 1，范畴 0～2 ） msg.volume = 0.5 // 音量 0.5 倍（默以为1，范畴 0～1） window.speechSynthesis.speak(msg); 同时这个工具还可以相应一系列变乱，也许会用到的： start end boundary pause resume 借助这些变乱我们可以完成一些简朴的成果，好比英文句子的单词数目统计：
let count = 0; // 词语数目 let msg = new SpeechSynthesisUtterance(); let synth = window.speechSynthesis; msg.addEventListener('start',()=>{ // 开始阅读 console.log(`文本内容： ${msg.text}`); console.log("start"); }); msg.addEventListener('end',()=>{ // 阅读竣事 console.log("end"); console.log(`文本单词（词语）数目：${count}`); count = 0; }); msg.addEventListener('boundary',()=>{ // 统计单词 count++; }); 颠末实行，因为中文没有效空格将每个词语分隔，以是会举办自动的辨认，好比 接待读者 会被辨认为 接待 和 读者 两个词语 SpeechSynthesis 参考： developer.mozilla.org/en-US/docs/… 说完了 SpeechSyntehesisUtteranc 我们再来看看 SpeechSynthesis SpeechSynthesis 的首要浸染是对语音举办一系列的节制，好比开始可能停息 它有三个只读属性，表白了语音的状态： SpeechSynthesis.paused SpeechSynthesis.pending 同时尚有一系列要领用来操纵语音： •SpeechSynthesis.speak() 开始读语音，同时触发 start 变乱 基于这些操纵要领，我们可以进一步加强我们的笔墨阅读器：
回到最初的出发点 让我们回到最初的出发点，我们可以基于上面的内容揣摩一下有些网站中，文章的自动阅读是怎么实现的 假如这个网站前端回收了 MVVM 框架（以 Vue 为例），那么文章内容是大概存储在 data 中，可以用来结构我们必要的语音合成 虽然，也有也许文章是通过 ajax 哀求获得的，理会哀求的数据，结构语音合成工具 假如文章是直接在 html 中写死的，这个时辰就必要对 DOM 举办理会，颠末测试，即即是下面这样的紊乱的布局 <div id="test"> <p>1</p> <p>2</p> <ul> <li>3</li> <li>4</li> </ul> <table> <tr> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> </tr> </table> <img src=http://www.jb51.net/html5/"https:/www.baidu.com/img/bd_logo1.png" alt=""> 9 </div> 直接通过 innerText 读取个中的文本，然后结构语音合成工具，也能凭证祈望次序阅读（图片会被忽略） 虽然假如我们想要忽略一些非凡的布局，好比表格，我们可以花一些精神在理会上，把我们不想要的数据可能 DOM 元素筛掉 不管奈何，我们都能找到吻合的办理方案～ 闲话 这个特征，是一个还在草案中的特征，没有被普及支持 再次夸大，这个 API 暂且还不能应用到出产情形中 今朝较量通用的做法是在后端结构将文本合成成语音文件的 API（大概是第三方 API），然后在前端作为媒体播放 曾经在我苍茫的时辰，我去阅读一些大牛的文章，读到一些先进对前端开拓的思索。个中有一点令我印象深刻： 前端是最贴近用户的，统统要从用户的的角度思量，无障碍行使也是一个很重要的课题。固然做这样的成果带来的收益远远小于其他营业，可是为了让产物更好的处事用户，多支付一些劳动也是值得的，这也是前端开拓的一种精力 总结 以上所述是小编给各人先容的鲜为人知的HTML5语音合乐成能，但愿对各人有所辅佐，假如各人有任何疑问接待给我留言，小编会实时回覆各人的！ （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
