如何使用HTML+JS实现在线朗读器

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

一、设置语言和朗读人员

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

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

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

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

HTML代码：

    你可以选择语言：    

JS代码：

// 将可选的语言填入到选择框中setTimeout(() => {    const voiceSelect = document.querySelector('select');    const selectChild = synth.getVoices().reduce((res, ite) => {        return res += `${ite.lang} - ${ite.name}`    }, '');    voiceSelect[xss_clean] = selectChild;}, 50);

二、设置音高【不是声音大小】

我们还可以设置音高：

HTML代码：

            你可以设置音高【范围在0 - 2之间】：            

JS代码：

const pitchInput = document.querySelector('#pitch'); // 音高输入框// 当音高输入框的内容大于2或小于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 });};

四、设置声音大小

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

HTML代码：

    你可以设置声音大小【范围在0 - 1之间】：    

JS代码：

const volumeInput = document.querySelector('#volume'); // 声音大小输入框// 当音速输入框的内容大于10或小于0的时候进行处理volumeInput.onblur = () => {    limitVal({ ele: volumeInput, min: 0, max: 1 });};

五、添加暂停和恢复播放功能

我们新加俩个按钮：

HTML代码：

暂停继续

JS代码：

function pause() { // 暂停    synth.pause();}function continueSpeak() { // 继续播放    synth.resume();}

六、完整代码

                
吴迪专用在线朗读器
    
                    你可以选择语言和朗读人员：                        
    
                    你可以设置音高【范围在0 - 2之间】：                        
    
                    你可以设置朗读速度【范围在0 - 10之间】：                        
    
                    你可以设置声音大小【范围在0 - 1之间】：                        
    I'm Wu Di~What are you doing now?    开始朗读    暂停    继续    

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