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插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
详解javascript高级定时器
Dec 31 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
JavaScript this关键字指向常用情况解析
Sep 02 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
php的curl实现get和post的代码
2008/08/23 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
PHP7修改的函数
2021/03/09 PHP
JavaScript的public、private和privileged模式
2009/12/28 Javascript
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
Python处理字符串之isspace()方法的使用
2015/05/19 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
python批量修改ssh密码的实现
2019/08/08 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
学校门卫岗位职责
2014/03/16 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
党建目标管理责任书
2014/07/25 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
小学数学教师研修日志
2015/11/13 职场文书