自己用html + js 一百行代码做一个朗读器

吴迪98

已于 2024-01-25 12:41:40 修改

阅读量2.1k

点赞数 8

分类专栏：吴小迪专栏之原生JS 文章标签： javascript html 前端 js朗读器前端实现朗读器

于 2022-02-09 12:10:46 首次发布

本文链接：https://blog.csdn.net/weixin_43606158/article/details/122818022

版权

吴小迪专栏之原生JS 专栏收录该内容

94 篇文章 32 订阅

订阅专栏

文章目录

前言

前言

因为笔者最近在学习英语，所以才想找一个朗读器跟着一起念着读，结果没找到在线朗读器，没办法。。。只有自己动手做一个了，老话说的好：自己动手，丰衣足食~

先给大家看下最终效果【没管样式哈~，只是保证有个结构和功能正常，样式可以自己画一画！】
在这里插入图片描述

废话不多说，代码开整！

一、设置语言和朗读人员

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

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

数组的每一项内容是不同的人和不同的语言构成的唯一键。
在这里插入图片描述
我们可以获取这个数据放到我们的下拉框中，供我们选择使用:
HTML代码：

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

JS代码：

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

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

我们还可以设置音高：
HTML代码：

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

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代码：

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

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代码：

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

JS代码：

const volumeInput = document.querySelector('#volume'); // 声音大小输入框

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

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

我们新加俩个按钮：
HTML代码：

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

JS代码：

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

六、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>吴迪专用在线朗读器</title>
    <style>
        * {margin: 0;padding: 0;}
    </style>
</head>
<body>
    <h1>吴迪专用在线朗读器</h1>
    <div>
        <label for="lang">
            你可以选择语言和朗读人员：
            <select name="lang" id="lang"></select>
        </label>
    </div>
    <div>
        <label for="pitch">
            你可以设置音高【范围在0 - 2之间】：
            <input type="number" value="1" name="pitch" id="pitch" />
        </label>
    </div>
    <div>
        <label for="rate">
            你可以设置朗读速度【范围在0 - 10之间】：
            <input type="number" value="1" name="rate" id="rate" />
        </label>
    </div>
    <div>
        <label for="volume">
            你可以设置声音大小【范围在0 - 1之间】：
            <input type="number" value="0.5" name="volume" id="volume" />
        </label>
    </div>
    <textarea name="" id="readText" cols="30" rows="10">I'm Wu Di~What are you doing now?</textarea>
    <button onclick="startRead()">开始朗读</button>
    <button onclick="pause()">暂停</button>
    <button onclick="continueSpeak()">继续</button>
    <script>
        const synth = window.speechSynthesis;
        const voiceSelect = document.querySelector('#lang'); // 语言选择框
        const pitchInput = document.querySelector('#pitch'); // 音高输入框
        const rateInput = document.querySelector('#rate'); // 音速输入框
        const volumeInput = document.querySelector('#volume'); // 声音大小输入框
        const text = document.getElementById('readText'); // 朗读内容区域

        // 将可选的语言填入到选择框中
        setTimeout(() => {
            const selectChild = synth.getVoices().reduce((res, ite) => {
                return res += `<option value="${ite.lang}" data-name="${ite.name}">${ite.lang} - ${ite.name}</option>`
            }, '');
            voiceSelect.innerHTML = selectChild;
        }, 50);

        // 限制值的公共函数
        function limitVal({ ele, min, max }) {
            if (ele.value > max) {
                ele.value = max;
            } else if (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 });
        };
        const utterThis = new window.SpeechSynthesisUtterance(text.value);
        // 开始朗读
        function startRead() {
            const selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
            const voices = synth.getVoices();
            for(let i = 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);
        }
        function pause() { // 暂停
            synth.pause();
        }
        function continueSpeak() { // 继续播放
            synth.resume();
        }
    </script>
</body>
</html>

以上就是全部内容了！欢迎大家在评论区讨论哦~

吴迪98

关注

8
点赞
踩
12

收藏

觉得还不错? 一键收藏
4
评论
自己用html + js 一百行代码做一个朗读器

感谢内容提供者：金牛区吴迪软件开发工作室文章目录前言一、设置语言和朗读人员二、设置音高【不是声音大小】三、设置音速四、设置声音大小五、添加暂停和恢复播放功能六、完整代码前言因为笔者最近在学习英语，所以才想找一个朗读器跟着一起念着读，结果没找到在线朗读器，没办法。。。只有自己动手做一个了，老话说的好：自己动手，丰衣足食~先给大家看下最终效果【没管样式哈~，只是保证有个结构和功能正常，样式可以自己画一画！】废话不多说，代码开整！一、设置语言和朗读人员我们需要获取到支持哪些语言和人员：con.
复制链接

扫一扫