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.innerHTML = 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实现在线朗读器的文章就介绍到这了,更多相关HTML JS朗读器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！