今天介绍JS中的语音合成

突然发现Html5中有自带API功能，它在Html5中和Web Speech相关的API实际上有两类，一类是“语音识别(Speech Recognition)”，另外一个就是“语音合成(Speech Synthesis)”，这两个名词实际上指的分别是“语音转文字”，和“文字变语音”。

今天讲的是语音合成(Speech Synthesis)

想要浏览器开口说话，只需要：
let speechInstance = new SpeechSynthesisUtterance('大家好，我是老司机');
speechSynthesis.speak(speechInstance);

SpeechSynthesisUtterance的参数

text – 要合成的文字内容，字符串
lang – 使用的语言，字符串，例如："zh-cn"
voiceURI – 指定希望使用的声音和服务，字符串
volume – 声音的音量，区间范围是0到1，默认是1
rate – 语速，数值，默认值是1，范围是0.1到10，表示语速的倍数，例如2表示正常语速的两倍
pitch – 表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1
onstart – 语音合成开始时候的回调
onpause – 语音合成暂停时候的回调
onresume – 语音合成重新开始时候的回调
onend – 语音合成结束时候的回调

SpeechSynthesisUtterance的动作

speak() – 只能接收SpeechSynthesisUtterance作为唯一的参数，作用是读合成的话语
stop() – 立即终止合成过程
pause() – 暂停合成过程
resume() – 重新开始合成过程
cancel() – 立即终止合成过程。（无论当前是否读完，都停止；可配合 speak 无缝切换下一个读语句）
getVoices() – 此方法不接受任何参数，用来返回浏览器支持的语音包列表，是个数组

具体方法

看下面说明，只是参考，具体自行研究

添加按钮

复制下面代码中请自行补齐闭合的

<div class="lsj_handle">
<section class="lsj_read" id="read" title="朗读文章">
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M513.6 909.6c-7.2 0-13.6-2.4-19.2-7.2 0 0-40.8-36.8-87.2-76-78.4-64.8-103.2-77.6-108.8-79.2H92.8c-12.8 0-23.2-10.4-23.2-24V300.8c0-12.8 10.4-24 23.2-24H278.4c6.4-2.4 32.8-13.6 120.8-80 51.2-38.4 97.6-76 97.6-76 4.8-4 11.2-6.4 17.6-6.4 4 0 8.8 0.8 12.8 3.2 9.6 4.8 16 15.2 16 26.4v736c0 11.2-6.4 22.4-16.8 27.2-4.8 1.6-8.8 2.4-12.8 2.4zM300 699.2c16.8 0 42.4 7.2 147.2 93.6 14.4 12 29.6 24.8 45.6 38.4l4.8 4V184.8l-4.8 3.2c-20 15.2-39.2 30.4-57.6 44C320 318.4 294.4 324.8 277.6 324.8H134.4c-17.6 0-19.2 11.2-19.2 23.2V672c0 20.8 5.6 26.4 24.8 26.4h158.4l1.6 0.8z m457.6 142.4c-12.8 0-23.2-10.4-23.2-24 0-10.4 7.2-17.6 14.4-21.6 99.2-59.2 160-168 160-284.8 0-116.8-61.6-225.6-160-284.8-8.8-4.8-13.6-12.8-13.6-21.6 0-12.8 10.4-24 23.2-24 4.8 0 8.8 1.6 14.4 4.8 112.8 67.2 182.4 192 182.4 324.8 0 133.6-70.4 257.6-183.2 324.8-5.6 4.8-9.6 6.4-14.4 6.4z m-79.2-134.4c-12.8 0-23.2-10.4-23.2-24 0-8.8 4-16 11.2-20.8 54.4-30.4 88-88 88-150.4 0-61.6-32.8-118.4-84.8-149.6-7.2-4-11.2-12-11.2-20.8 0-12.8 10.4-24 23.2-24 4 0 10.4 2.4 13.6 4 65.6 39.2 107.2 112 107.2 189.6 0 79.2-42.4 152.8-110.4 192-1.6 0-8 4-13.6 4z" fill="" p-id="7983">path>
svg>
<span class="lsj_play">朗读span>
section>
<div>

添加css

.lsj_handle{display:flex;align-items:center}
.lsj_play:hover{cursor:pointer}
.lsj_read{position:relative;cursor:pointer;display:flex;align-items:center;color:#fff;background:#535f6b;border:none;height:32px;padding:0 15px;border-radius:3px;margin-left:10px;font-size:12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:opacity .35s}
.lsj_read svg{width:15px;height:15px;fill:#fff;margin-right:5px}

添加js

设置获取内容一个id，我的是reads
$('#read').on('click', function () {
var read_content = $("#reads").text();
var speechInstance = new SpeechSynthesisUtterance();
if('speechSynthesis' in window){
if ($(this).find('span').html() === '朗读') {
speechInstance.text = read_content;
speechInstance.lang = "zh-CN";
speechSynthesis.speak(speechInstance);
speechSynthesis.resume();
$(this).find('span').html('停止朗读');
} else {
speechSynthesis.pause();
$(this).find('span').html('朗读');
}
} else {
alert("你的设备不支持 :-(");
}
});
window.onunload = function(e){
speechSynthesis.cancel(); // 页面离开或者刷新重新开始
}

最后

我的PC端用这个，基本都支持
移动端是用「给博客文章添加个语音朗读」
具体实现根据你们自己实际来修改

附送不是内页的

其中135是id，看你自己的
关键词read(135)和id="player_135"

<div class="lsj_handle">
<section class="lsj_read" onclick="read(135)" title="朗读文章" id="player_135">
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M513.6 909.6c-7.2 0-13.6-2.4-19.2-7.2 0 0-40.8-36.8-87.2-76-78.4-64.8-103.2-77.6-108.8-79.2H92.8c-12.8 0-23.2-10.4-23.2-24V300.8c0-12.8 10.4-24 23.2-24H278.4c6.4-2.4 32.8-13.6 120.8-80 51.2-38.4 97.6-76 97.6-76 4.8-4 11.2-6.4 17.6-6.4 4 0 8.8 0.8 12.8 3.2 9.6 4.8 16 15.2 16 26.4v736c0 11.2-6.4 22.4-16.8 27.2-4.8 1.6-8.8 2.4-12.8 2.4zM300 699.2c16.8 0 42.4 7.2 147.2 93.6 14.4 12 29.6 24.8 45.6 38.4l4.8 4V184.8l-4.8 3.2c-20 15.2-39.2 30.4-57.6 44C320 318.4 294.4 324.8 277.6 324.8H134.4c-17.6 0-19.2 11.2-19.2 23.2V672c0 20.8 5.6 26.4 24.8 26.4h158.4l1.6 0.8z m457.6 142.4c-12.8 0-23.2-10.4-23.2-24 0-10.4 7.2-17.6 14.4-21.6 99.2-59.2 160-168 160-284.8 0-116.8-61.6-225.6-160-284.8-8.8-4.8-13.6-12.8-13.6-21.6 0-12.8 10.4-24 23.2-24 4.8 0 8.8 1.6 14.4 4.8 112.8 67.2 182.4 192 182.4 324.8 0 133.6-70.4 257.6-183.2 324.8-5.6 4.8-9.6 6.4-14.4 6.4z m-79.2-134.4c-12.8 0-23.2-10.4-23.2-24 0-8.8 4-16 11.2-20.8 54.4-30.4 88-88 88-150.4 0-61.6-32.8-118.4-84.8-149.6-7.2-4-11.2-12-11.2-20.8 0-12.8 10.4-24 23.2-24 4 0 10.4 2.4 13.6 4 65.6 39.2 107.2 112 107.2 189.6 0 79.2-42.4 152.8-110.4 192-1.6 0-8 4-13.6 4z" fill="" p-id="7983"></path>
</svg>
<span class="lsj_play">朗读</span>
</section>
</div>

要语音的合成的内容

id 根上面相对应

<div class="post" id="135">
内容
div>

最后js

function read(id){
var read_content = $("#"+id).text();
var speechInstance = new SpeechSynthesisUtterance();
if('speechSynthesis' in window){
if ($("#player_"+id).find('span').html() === '朗读') {
speechInstance.text = read_content;
speechInstance.lang = "zh-CN";
speechSynthesis.cancel();
speechSynthesis.speak(speechInstance);
speechSynthesis.resume();
$("#player_"+id).find('span').html('停止朗读');
} else {
speechSynthesis.pause();
$("#player_"+id).find('span').html('朗读');
}
} else {
alert("你的设备不支持 :-(");
}
};

既然来了就吐个槽吧

102X网网友 2年前(2023-01-14) •「Windows」
顶顶更健康
回复点赞 0
阿和网友 3年前(2022-09-05) •「Android」
太牛了！不知道asp站能不能搞得起来
回复点赞 0
老司机管理员 3年前(2022-09-05) •「Windows」
@阿和：可以的！~
回复点赞 0
叶开楗铁粉 3年前(2022-09-04) •「Windows」
不折腾不折腾了累了累了！！
回复点赞 0
老司机管理员 3年前(2022-09-05) •「Windows」
@叶开楗：该休息就休息！~折腾永无止境
回复点赞 0
叶开楗铁粉 3年前(2022-09-05) •「Windows」
@老司机：想试试 VUE HH
回复点赞 0
老司机管理员 3年前(2022-09-05) •「Windows」
@叶开楗：那就用vue3吧
回复点赞 0
林羽凡开发大佬 3年前(2022-09-04) •「Windows」
大佬呀，原来语音朗读技术在这里。
回复点赞 0
老司机管理员 3年前(2022-09-04) •「Windows」
@林羽凡：大佬不敢当，都是老技术了
回复点赞 0
林羽凡开发大佬 3年前(2022-09-04) •「Windows」
@老司机：不带这么谦虚的，你这个啥啥时间前的，判断貌似不太对呀，7月份的，显示一个月前。
回复点赞 0
老司机管理员 3年前(2022-09-05) •「Windows」
@林羽凡：没注意到，这都被你发现了！~找bug能手
回复点赞 0
叶开楗铁粉 3年前(2022-09-04) •「Windows」
@林羽凡：抓到大佬一枚。
回复点赞 0