HTML+JS實現(xiàn)在線朗讀器

更新時間：2022年02月15日 16:31:51 作者：吳迪98

這篇文章主要介紹了利用HTML和JavaScript制作一個朗讀器，可以跟著一起念著讀，文中的示例代碼講解詳細，感興趣的小伙伴可以學習一下

前言

因為筆者最近在學習英語，所以才想找一個朗讀器跟著一起念著讀，結(jié)果沒找到在線朗讀器，沒辦法。。。只有自己動手做一個了，老話說的好：自己動手，豐衣足食~

先給大家看下最終效果【沒管樣式哈~，只是保證有個結(jié)構(gòu)和功能正常，樣式可以自己畫一畫！】

廢話不多說，代碼開整！

一、設置語言和朗讀人員

我們需要獲取到支持哪些語言和人員：

const synth = window.speechSynthesis;
// 注意點：這里是獲取不到的，因為所有支持的語言是異步載入到這個數(shù)組里的，所以我們需要加一個延遲
console.log(synth.getVoices());
setTimeout(() => {
    // 這樣就可以拿到了
    console.log(synth.getVoices());
}, 50)

數(shù)組的每一項內(nèi)容是不同的人和不同的語言構(gòu)成的唯一鍵。

我們可以獲取這個數(shù)據(jù)放到我們的下拉框中，供我們選擇使用:

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'); // 音高輸入框
// 當音高輸入框的內(nèi)容大于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'); // 音速輸入框

// 因為有倆個以上的限制了，所以提一個公共方法
// 限制值的公共函數(shù)
function limitVal({ ele, min, max }) {
? ? if (ele.value > max) {
? ? ? ? ele.value = max;
? ? } else if (ele.value < min) {
? ? ? ? ele.value = min;
? ? }
}
// 當音速輸入框的內(nèi)容大于10或小于0的時候進行處理
rateInput.onblur = () => {
? ? limitVal({ ele: rateInput, min: 0, max: 10 });
};

四、設置聲音大小

我們還可以設置聲音大?。?/p>

HTML代碼：

<label for="volume">
    你可以設置聲音大小【范圍在0 - 1之間】：
    <input type="number" value="0.5" name="volume" id="volume" />
</label>

JS代碼：

const volumeInput = document.querySelector('#volume'); // 聲音大小輸入框

// 當音速輸入框的內(nèi)容大于10或小于0的時候進行處理
volumeInput.onblur = () => {
? ? limitVal({ ele: volumeInput, min: 0, max: 1 });
};

五、添加暫停和恢復播放功能

我們新加倆個按鈕：

HTML代碼：

<button onclick="pause()">暫停</button>
<button onclick="continueSpeak()">繼續(xù)</button>

JS代碼：

function pause() { // 暫停
    synth.pause();
}
function continueSpeak() { // 繼續(xù)播放
    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()">繼續(xù)</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'); // 朗讀內(nèi)容區(qū)域

        // 將可選的語言填入到選擇框中
        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);

        // 限制值的公共函數(shù)
        function limitVal({ ele, min, max }) {
            if (ele.value > max) {
                ele.value = max;
            } else if (ele.value < min) {
                ele.value = min;
            }
        }

        // 當音高輸入框的內(nèi)容大于2或小于0的時候進行處理
        pitchInput.onblur = () => {
            limitVal({ ele: pitchInput, min: 0, max: 2 });
        };
        // 當音速輸入框的內(nèi)容大于10或小于0的時候進行處理
        rateInput.onblur = () => {
            limitVal({ ele: rateInput, min: 0, max: 10 });
        };
        // 當聲音輸入框的內(nèi)容大于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() { // 繼續(xù)播放
            synth.resume();
        }
    </script>
</body>
</html>

到此這篇關于HTML+JS實現(xiàn)在線朗讀器的文章就介紹到這了,更多相關HTML JS朗讀器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

HTML+JavaScript模擬實現(xiàn)簡單的時鐘效果
在這篇文章中，主要將向大家展示如何使用?HTML、CSS?和?JavaScript代碼制作模擬時鐘，文中的示例代碼講解詳細，感興趣的可以了解一下
2022-08-08
使用RN Animated做一個“添加購物車”動畫的方法
這篇文章主要介紹了使用RN Animated做一個“添加購物車”動畫的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
JS學習筆記之原型鏈和利用原型實現(xiàn)繼承詳解
這篇文章主要介紹了JS學習筆記之原型鏈和利用原型實現(xiàn)繼承,結(jié)合實例形式詳細分析了javascript原型鏈以及利用原型實現(xiàn)繼承的相關操作技巧與注意事項,需要的朋友可以參考下
2019-05-05
如何用JS將base64圖片壓縮至指定大小
在開發(fā)中通常在上傳圖片時,由于各種限制,需要將上傳的圖片壓縮到某一大小范圍內(nèi)才能上傳,這篇文章主要介紹了如何用JS將base64圖片壓縮至指定大小的相關資料,需要的朋友可以參考下
2025-04-04
JS事件綁定的常用方式實例總結(jié)
這篇文章主要介紹了JS事件綁定的常用方式,結(jié)合實例形式總結(jié)分析了javascript三種常見的事件綁定原理與操作技巧,需要的朋友可以參考下
2019-03-03
Javascript中arguments用法實例分析
這篇文章主要介紹了Javascript中arguments用法,實例分析了javascript利用arguments實現(xiàn)模擬重載功能,需要的朋友可以參考下
2015-06-06
在javascript中執(zhí)行任意html代碼的方法示例解讀
關于javascript的eval（）函數(shù)無法執(zhí)行html代碼的問題，下面為大家介紹下一種在javascript中執(zhí)行任意html代碼的方法，感興趣的朋友不要錯過
2013-12-12
Javascript操作URL函數(shù)修改版
一個非常不錯的Javascript操作URL函數(shù)可以新增，修改，刪除 URL參數(shù)
2013-11-11
JavaScript中字符串分割函數(shù)split用法實例
這篇文章主要介紹了JavaScript中字符串分割函數(shù)split用法,實例分析了javascript中split函數(shù)操作字符串的技巧,非常具有實用價值,需要的朋友可以參考下
2015-04-04
JS 將偽數(shù)組轉(zhuǎn)換成數(shù)組的實現(xiàn)示例
這篇文章主要介紹了JS 將偽數(shù)組轉(zhuǎn)換成數(shù)組，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-07-07