How to use HTML+JS to realize online Reader

This article will explain in detail how to use HTML+JS to achieve online reader. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

I. set up the language and read aloud

We need to get access to which languages and people are supported:

Note: const synth = window.speechSynthesis;// Note: it is not available here, because all supported languages are loaded into this array asynchronously, so we need to add a delay console.log (synth.getVoices ()); setTimeout () = > {/ / so we can get console.log (synth.getVoices ());}, 50)

Each item of the array is a unique key for different people and languages.

We can get this data and put it in our drop-down box for us to choose to use:

HTML Code:

You can choose the language:

JS Code:

/ / enter optional languages into the selection box setTimeout (() = > {const voiceSelect = document.querySelector ('select'); const selectChild = synth.getVoices (). Reduce ((res, ite) = > {return res + = `${ite.lang}-${ite.name}`},''); voiceSelect [XSS _ clean] = selectChild;}, 50); second, set pitch [not volume]

We can also set the pitch:

HTML Code:

You can set the pitch [range from 0 to 2]:

JS Code:

Const pitchInput = document.querySelector ('# pitch'); / / pitch input box / / when the content of the pitch input box is greater than 2 or less than 0, pitchInput.onblur = () = > {if (pitchInput.value > 2) {pitchInput.value = 2;} else if (pitchInput.value)

< 0) { pitchInput.value = 0; }};三、设置音速 我们还可以设置音速： HTML代码： 你可以设置朗读速度【范围在0 - 10之间】： JS代码： const rateInput = document.querySelector('#rate'); // 音速输入框// 因为有俩个以上的限制了，所以提一个公共方法// 限制值的公共函数function limitVal({ ele, min, max }) { if (ele.value >

Max) {ele.value = max;} else if (ele.value

< min) { ele.value = min; }}// 当音速输入框的内容大于10或小于0的时候进行处理rateInput.onblur = () =>

{limitVal ({ele: rateInput, min: 0, max: 10});}; 4. Set the sound volume

We can also set the volume of the sound:

HTML Code:

You can set the sound volume [range from 0 to 1]:

JS Code:

Const volumeInput = document.querySelector ('# volume'); / / Sound volume input box / / when the content of the sound speed input box is greater than 10 or less than 0, volumeInput.onblur = () = > {limitVal ({ele: volumeInput, min: 0, max: 1});}; add pause and resume playback function

Let's add two new buttons:

HTML Code:

Go ahead

JS Code:

Function pause () {/ / pause synth.pause ();} function continueSpeak () {/ / continue to play synth.resume ();} VI. Complete code Wu Di dedicated online reader * {margin: 0 padding: 0 } Wu Di dedicated online reader you can choose the language and the reader: you can set the pitch [range 0-2]: you can set the reading speed [range 0-2] Between 10]: you can set the sound volume [range from 0 to 1]: Ichimm Wu Di~What are you doing now? suspend