因为笔者最近在学习英语，所以才想找一个朗读器跟着一起念着读，结果没找到在线朗读器，没办法。。。只有自己动手做一个了，老话说的好：自己动手，丰衣足食~
先给大家看下最终效果【没管样式哈~，只是保证有个结构和功能正常，样式可以自己画一画！】
废话不多说，代码开整！
我们需要获取到支持哪些语言和人员：
const synth = window.speechsynthesis;// 注意点：这里是获取不到的，因为所有支持的语言是异步载入到这个数组里的，所以我们需要加一个延迟console.log(synth.getvoices());ttimeout(() => { // 这样就可以拿到了 console.log(synth.getvoices());}, 50)数组的每一项内容是不同的人和不同的语言构成的唯一键。
我们可以获取这个数据放到我们的下拉框中，供我们选择使用:
html代码：
<label for="lang"> 你可以选择语言： <lect name="lang" id="lang"></lect></label>
js代码：
// 将可选的语言填入到选择框中ttimeout(() => { const voicelect = document.querylector('lect'); const lectchild = synth.getvoices().reduce((res, ite) => { return res += `<option value="${ite.lang}" data-name="${ite.name}">$广东三a院校{ite.lang} - ${ite.name}</option>` }, ''); voicelect.innerhtml = lectchild;}, 50);我们还可以设置音高：
html代码：
<div> <label for="pitch"> 你可以设置音高【范围在0 - 2之间】： <input type="number" name="pitch" id="pitch" /> </label></div>
js代码：
const pitchinput = document.querylector('#pitch'); // 音高输入框// 当音高输入框的内容大于2或小于0的时候进行处理pitchinput.onblur = () => { if (pitchinput.value > 2) { pitchinput.value = 2; } el if (pitchinput.value < 0) { pitchinput.value = 0; }};我们还可以设置音速：
html代码：
<label for="rate"> 你可以设置朗读速度【范围在0 - 10之间】： <input type="number" name="rate" id="rate" /></label>
js代码：
const rateinput = document.querylector('#rate'); // 音速输入框// 因为有俩个以上的限制了，所以提一个公共方法// 限制值的公共函数function limitval({ ele, min, max }) { if (ele.value > max) { ele.value = max; } el if (ele.value < min) { ele.value = min; }}// 当音速输入框的内容大于10或小于0的时候进行处理rateinput.onblur = () => { limitval({ ele: rateinput, min: 0, max: 10 });};我们还可以设置声音大小：
html代码：
<label for="volume"> 你可以设置声音大小【范围在0 - 1之间】： <input type="number" value="0.5" name="volume" id="volume" /></label>
js代码：
const volumeinput = document.querylector('#volume'); // 声音大小输入框// 当音速输入框的内容大于10或小于0的时候进行处理volumeinput.onblur = () => { limitval({ ele: volumeinput, min: 0, max: 1 });};我们新加俩个按钮：
html代码：
<button onclick="pau()">暂停</button><button onclick="continuespeak()">继续</button>
js代码：
function pau() { // 暂停 synth.pau();}function continuespeak() { // 继续播放 synth.resume();}<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>吴迪专用在线朗读器</title> <style> * {margin: 0;padding: 0;} </style></head><body> <h1>吴迪专用在线朗读器</h1> <div> <label for="lang"> 你可以选择语言和朗读人员： <lect name="lang" id="lang"></lect> </label> </div> <div> <label for="pitch"> 你可以设置音高【范围在0 - 2之间】： <input type="number" value="1" name="pitch" id="pitch" /> </label> </div> <div> <label for="rate"> 你可以设置朗读速度【范围在0 - 10之间】： <input type="number" value="1" name="rate" id="rate" /> </label> </div> <div> <label for="volume"> 你可以设置声音大小【范围在0 - 1之间】： <input type="number" value="0.5" name="volume" id="volume" /> </label> </div> <textarea name="" id="readtext" cols="30" rows="10">i'm wu di~what are you doing now?</textarea> <button onclick="startread()">开始朗读</button> <button onclick="pau()">暂停</button> <button onclick="continuespeak()">继续</button> <script> const synth = window.spe美术考级怎么考echsynthesis; const voicelect = document.querylector('#lang'); // 语言选择框 const pitchinput = document.querylector('#pitch'); // 音高输入框 const rateinput = document.querylector('#rate'); // 音速输入框 const volumeinput = document.querylector('#volume'); // 声音大小输入框 const text = document.getelementbyid('readtext'); // 朗读内容区域 // 将可选的语言填入到选择框中 ttimeout(() => { const lectchild = synth.getvoices().reduce((res, ite) => { return res += `<option value="${ite.lang}" data-name="${ite.name}">${ite.lang} - ${ite安全周总结.name}</option>` }, ''); voicelect.innerhtml = lectchild; }, 50); // 限制值的公共函数 function limitval({ ele, min, max }) { if (ele.value > max) { ele.value = max; } el if (ele.value < min) { ele.value = min; } } // 当音高输入框的内容大于2或小于0的时候进行处理 pitchinput.onblur = () => { limitval({ ele: pitchinput, min: 0, max: 2 }); }; // 当音速输入框的内容大于10或小于0的时候进行处理 rateinput.onblur = () =>交警手势图片大全; { limitval({ ele: rateinput, min: 0, max: 10 }); }; // 当声音输入框的内容大于1或小于0的时候进行处理 volumeinput.onblur = () => { limitval({ ele: volumeinput, min: 0, max: 1 }); }; const utterthis = new window.speechsynthesisutterance(text.value); // 开始朗读 function startread() { const lectedoption = voicelect.lectedoptions[0].getattribute('data-name'); const voices = synth.getvoices(); for(let i = 0; i < voices.length ; i++) { if(voices[i].name === lectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = pitchinput.value; // 设置音高 utterthis.rate = rateinput.value; // 设置音速 utterthis.volume = volumeinput.value; // 设置声音大小 synth.speak(utterthis); } function pau() { // 暂停 synth.pau(); } function continuespeak() { // 继续播放 synth.resume(); } </script></body></html>到此这篇关于html+js实现在线朗读器的文章就介绍到这了,更多相关html js朗读器内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！
本文发布于:2023-04-05 01:03:37，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/9c2373b492b9e05b63b4b320c2e09f39.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：HTML+JS实现在线朗读器.doc
本文 PDF 下载地址：HTML+JS实现在线朗读器.pdf
| 留言与评论（共有 0 条评论） |
