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 相关文章推荐
js 获取服务器控件值的代码
Mar 05 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 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
php Smarty 字符比较代码
2011/02/27 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
vue 使用鼠标滚动加载数据的例子
2019/10/31 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
python循环监控远程端口的方法
2015/03/14 Python
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
Python实现句子翻译功能
2017/11/14 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
Python3匿名函数用法示例
2018/07/25 Python
浅述python中深浅拷贝原理
2018/09/18 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
Python docx库用法示例分析
2019/02/16 Python
Django 再谈一谈json序列化
2020/03/16 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
python实现KNN近邻算法
2020/12/30 Python
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
简短大学毕业感言
2014/01/18 职场文书
四年大学自我鉴定
2014/02/17 职场文书
《忆江南》教学反思
2014/04/07 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android