不为人知的HTML5视频语音生成作用

听1下就会发现，播发出来的响声其实不是预先录制好的声频材料，而是根据文本鉴别后生成的视频语音

请先戴上耳机，随后将下面的编码拷贝到chrome操纵台中体验～

let msg = new SpeechSynthesisUtterance("欢迎你阅读文章我的blog");
window.speechSynthesis.speak(msg);

看，前端开发完成视频语音生成其实不难

今日的主角 Speech Synthesis API

根据上面的事例大家能够猜想到上面启用的两个方式的作用

SpeechSyntehesisUtteranc
window.speechSynthesis.speak

自然了，视频语音生成不仅包括这两个API，but大家先从这两点下手

SpeechSyntehesisUtteranc

参照：developer.mozilla.org/en-US/docs/… SpeechSyntehesisUtteranc 目标包括了视频语音服务要载入的內容和1些主要参数，例如語言，音高和声音

SpeechSyntehesisUtteranc()
SpeechSynthesisUtterance.lang
SpeechSynthesisUtterance.pitch
SpeechSynthesisUtterance.rate
SpeechSynthesisUtterance.voice
SpeechSynthesisUtterance.volume

留意：以上特性全是 可读写能力 的！ 能够把下面这段编码copy下来尝试1下，注解中会有表明

let msg = new SpeechSynthesisUtterance();
msg.text = "how are you" // 要生成的文字
msg.lang = "en-US" // 美式英语发音（默认设置全自动挑选）
msg.rate = 2  // 2倍速（默认设置为 1，范畴 0.1～10）
msg.pitch = 2 // 高声调（数据越大越锐利，默认设置为 1，范畴 0～2 ）
msg.volume = 0.5 // 声音 0.5 倍（默认设置为1，范畴 0～1）
window.speechSynthesis.speak(msg);

另外这个目标还能够回应1系列恶性事件，将会会用到的：

• start
• end
• boundary
• pause
• resume

依靠这些恶性事件大家能够进行1些简易的作用，例如英文语句的单词数量统计分析：

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 的关键功效是对视频语音开展1系列的操纵，例如刚开始或中止

它有3个写保护特性，说明了视频语音的情况：

SpeechSynthesis.paused
SpeechSynthesis.pending

另外也有1系列方式用来实际操作视频语音：

•SpeechSynthesis.speak() 刚开始读视频语音，另外开启 start 恶性事件
•SpeechSynthesis.pause() 中止，另外开启 pause 恶性事件
•SpeechSynthesis.resume() 再次，另外开启 resume 恶性事件
•SpeechSynthesis.cancel() 撤销阅读文章，另外开启 end 恶性事件

根据这些实际操作方式，大家能够进1步提高大家的文本阅读文章器：

返回最开始的起始点

让大家返回最开始的起始点，大家能够根据上面的內容猜想1下一些网站中，文章内容的全自动阅读文章是如何完成的

假如这个网站前端开发选用了 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="https://www.baidu.com/img/bd_logo1.png" alt="">
    9
</div>

立即根据 innerText 载入在其中的文字，随后结构视频语音生成目标，也能依照期待次序阅读文章（照片会被忽视）

自然假如大家要想忽视1些独特的构造，例如报表，大家能够花1些活力在分析上，把大家不要想的数据信息或 DOM 元素筛掉

无论如何，大家都能寻找适合的处理计划方案～

闲话

这个特点，是1个还在草案中的特点，沒有被普遍适用

再度强调，这个 API 临时还不可以运用到生产制造自然环境中

现阶段较为通用性的做法是在后端开发结构将文字生成成视频语音文档的 API（或许是第3方 API），随后在前端开发做为新闻媒体播发

以前在我迷茫的情况下，我去阅读文章1些大牛的文章内容，读到1些老前辈对前端开发开发设计的思索。在其中有1点令我印象刻骨铭心：

前端开发是最接近客户的，1切要从客户的的角度考虑到，无阻碍应用也是1个很关键的课题。尽管做这样的作用带来的盈利远远小于别的业务流程，可是以便让商品更好的服务客户，多努力1些劳动者也是值得的，这也是前端开发开发设计的1种精神实质
 

总结

以上所述是网编给大伙儿详细介绍的不为人知的HTML5视频语音生成作用，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑欢迎给我留言，网编会立即回应大伙儿的！