这篇文章将为大家详细讲解有关如何使用HTML+JS实现在线朗读器，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

一、设置语言和朗读人员

我们需要获取到支持哪些语言和人员：

constsynth=window.speechSynthesis;//注意点：这里是获取不到的，因为所有支持的语言是异步载入到这个数组里的，所以我们需要加一个延迟console.log(synth.getVoices());setTimeout(()=>{//这样就可以拿到了console.log(synth.getVoices());},50)

数组的每一项内容是不同的人和不同的语言构成的唯一键。

我们可以获取这个数据放到我们的下拉框中，供我们选择使用:

HTML代码：

<labelfor="lang">你可以选择语言：<selectname="lang"id="lang"></select></label>

JS代码：

//将可选的语言填入到选择框中setTimeout(()=>{constvoiceSelect=document.querySelector('select');constselectChild=synth.getVoices().reduce((res,ite)=>{returnres+=`<optionvalue="${ite.lang}"data-name="${ite.name}">${ite.lang}-${ite.name}</option>`},'');voiceSelect.innerHTML=selectChild;},50);二、设置音高【不是声音大小】

我们还可以设置音高：

HTML代码：

<div><labelfor="pitch">你可以设置音高【范围在0-2之间】：<inputtype="number"name="pitch"id="pitch"/></label></div>

JS代码：

constpitchInput=document.querySelector('#pitch');//音高输入框//当音高输入框的内容大于2或小于0的时候进行处理pitchInput.onblur=()=>{if(pitchInput.value>2){pitchInput.value=2;}elseif(pitchInput.value<0){pitchInput.value=0;}};三、设置音速

我们还可以设置音速：

HTML代码：

<labelfor="rate">你可以设置朗读速度【范围在0-10之间】：<inputtype="number"name="rate"id="rate"/></label>

JS代码：

constrateInput=document.querySelector('#rate');//音速输入框//因为有俩个以上的限制了，所以提一个公共方法//限制值的公共函数functionlimitVal({ele,min,max}){if(ele.value>max){ele.value=max;}elseif(ele.value<min){ele.value=min;}}//当音速输入框的内容大于10或小于0的时候进行处理rateInput.onblur=()=>{limitVal({ele:rateInput,min:0,max:10});};四、设置声音大小

我们还可以设置声音大小：

HTML代码：

<labelfor="volume">你可以设置声音大小【范围在0-1之间】：<inputtype="number"value="0.5"name="volume"id="volume"/></label>

JS代码：

constvolumeInput=document.querySelector('#volume');//声音大小输入框//当音速输入框的内容大于10或小于0的时候进行处理volumeInput.onblur=()=>{limitVal({ele:volumeInput,min:0,max:1});};五、添加暂停和恢复播放功能

我们新加俩个按钮：

HTML代码：

<buttononclick="pause()">暂停</button><buttononclick="continueSpeak()">继续</button>

JS代码：

functionpause(){//暂停synth.pause();}functioncontinueSpeak(){//继续播放synth.resume();}六、完整代码

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>吴迪专用在线朗读器</title><style>*{margin:0;padding:0;}</style></head><body><h2>吴迪专用在线朗读器</h2><div><labelfor="lang">你可以选择语言和朗读人员：<selectname="lang"id="lang"></select></label></div><div><labelfor="pitch">你可以设置音高【范围在0-2之间】：<inputtype="number"value="1"name="pitch"id="pitch"/></label></div><div><labelfor="rate">你可以设置朗读速度【范围在0-10之间】：<inputtype="number"value="1"name="rate"id="rate"/></label></div><div><labelfor="volume">你可以设置声音大小【范围在0-1之间】：<inputtype="number"value="0.5"name="volume"id="volume"/></label></div><textareaname=""id="readText"cols="30"rows="10">I'mWuDi~Whatareyoudoingnow?</textarea><buttononclick="startRead()">开始朗读</button><buttononclick="pause()">暂停</button><buttononclick="continueSpeak()">继续</button><script>constsynth=window.speechSynthesis;constvoiceSelect=document.querySelector('#lang');//语言选择框constpitchInput=document.querySelector('#pitch');//音高输入框constrateInput=document.querySelector('#rate');//音速输入框constvolumeInput=document.querySelector('#volume');//声音大小输入框consttext=document.getElementById('readText');//朗读内容区域//将可选的语言填入到选择框中setTimeout(()=>{constselectChild=synth.getVoices().reduce((res,ite)=>{returnres+=`<optionvalue="${ite.lang}"data-name="${ite.name}">${ite.lang}-${ite.name}</option>`},'');voiceSelect.innerHTML=selectChild;},50);//限制值的公共函数functionlimitVal({ele,min,max}){if(ele.value>max){ele.value=max;}elseif(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});};constutterThis=newwindow.SpeechSynthesisUtterance(text.value);//开始朗读functionstartRead(){constselectedOption=voiceSelect.selectedOptions[0].getAttribute('data-name');constvoices=synth.getVoices();for(leti=0;i<voices.length;i++){if(voices[i].name===selectedOption){utterThis.voice=voices[i];}}utterThis.pitch=pitchInput.value;//设置音高utterThis.rate=rateInput.value;//设置音速utterThis.volume=volumeInput.value;//设置声音大小synth.speak(utterThis);}functionpause(){//暂停synth.pause();}functioncontinueSpeak(){//继续播放synth.resume();}</script></body></html>

关于“如何使用HTML+JS实现在线朗读器”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。