如何使用HTML+JS实现在线朗读器
这篇文章将为大家详细讲解有关如何使用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实现在线朗读器”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。