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 相关文章推荐
javascript中的new使用
Mar 20 Javascript
jquery ajax abort()的使用方法
Oct 28 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
vue-cli3配置与跨域处理方法
Aug 17 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模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
jquery 学习之二 属性相关
2010/11/23 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
利用Python抓取行政区划码的方法
2016/11/28 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
python能否java成为主流语言吗
2020/06/22 Python
python3 kubernetes api的使用示例
2021/01/12 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
医院后勤自我鉴定
2013/10/13 职场文书
期末总结的个人自我评价
2013/11/02 职场文书
社团成立邀请函
2014/01/08 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书