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 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
Javascript基础教程之if条件语句
Jan 18 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
JavaScript中callee和caller的区别与用法实例分析
Jun 28 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
Dec 29 Javascript
js实现缓动动画
Nov 25 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之第九天
2006/10/09 PHP
php 之 没有mysql支持时的替代方案
2006/10/09 PHP
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
Python中super()函数简介及用法分享
2016/07/11 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
python 有效的括号的实现代码示例
2019/11/11 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
企业为何需要商业计划书
2013/12/26 职场文书
监察建议书范文
2014/03/12 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
Nginx 过滤静态资源文件的访问日志的实现
2021/03/31 Servers
java项目构建Gradle的使用教程
2022/03/24 Java/Android