HTML+JS实现在线朗读器


Posted in Javascript onFebruary 15, 2022

前言

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

先给大家看下最终效果【没管样式哈~,只是保证有个结构和功能正常,样式可以自己画一画!】

HTML+JS实现在线朗读器

废话不多说,代码开整!

一、设置语言和朗读人员

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

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

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

HTML+JS实现在线朗读器

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

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>

到此这篇关于HTML+JS实现在线朗读器的文章就介绍到这了,更多相关HTML JS朗读器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
js生成随机数的方法实例
Oct 16 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
微信小程序ibeacon三点定位详解
Oct 31 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
通过vue写一个瀑布流插件代码实例
Sep 07 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 #Javascript
canvas实现贪食蛇的实践
Vue自定义铃声提示音组件的实现
Jan 22 #Vue.js
JavaScript实例 ODO List分析
Jan 22 #Javascript
JavaScript ES6的函数拓展
Jan 18 #Javascript
Vue提供的三种调试方式你知道吗
Jan 18 #Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 #Vue.js
You might like
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
javascript window.opener的用法分析
2010/04/07 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
Python转码问题的解决方法
2008/10/07 Python
python实现挑选出来100以内的质数
2015/03/24 Python
在Python中使用dict和set方法的教程
2015/04/27 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
python db类用法说明
2020/07/07 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
html5定位并在百度地图上显示的示例
2014/04/27 HTML / CSS
计算机学生求职信范文
2014/01/30 职场文书
写给父母的感谢信
2015/01/22 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
Python实现单例模式的5种方法
2021/06/15 Python
Python基础之变量的相关知识总结
2021/06/23 Python
mysql如何配置白名单访问
2021/06/30 MySQL
java实现对Hadoop的操作
2021/07/01 Java/Android
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android