纯js在线文字播放

在线演示 http://njjzw.top/wzbf.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字在线播放</title>
</head>

<body>
<div align="center">
    <h1>纯js在线文字播放</h1>
    <table>
        <tr>
            <th>播放语速</th>
            <td>
                <button onclick="change('rate',0.5)">+</button>
            </td>
            <td>
                <button onclick="change('rate',-0.5)">-</button>
            </td>
            <td>当前速度<input id="rate" type="text" value="0.5"></td>
        </tr>
        <tr>
            <th>音调高低</th>
            <td>
                <button onclick="change('pitch',0.5)">+</button>
            </td>
            <td>
                <button onclick="change('pitch',-0.5)">-</button>
            </td>
            <td>当前速度<input id="pitch" type="text" value="1"></td>
        </tr>
        <tr>
            <th>音量大小</th>
            <td>
                <button onclick="change('volume',1)">+</button>
            </td>
            <td>
                <button onclick="change('volume',-1)">-</button>
            </td>
            <td>当前音量<input id="volume" type="text" value="10"></td>
        </tr>
        <tr>
            <th>语言类型</th>
            <td>
                <select id="lang">
                    <!--                    <option value="zh-CN">中文</option>-->
                </select>
            </td>
        </tr>
        <tr>
            <th>操作</th>
            <td>
                <button onclick="audioPlayByStr()">播放</button>
                <button onclick='pauseRadio()' id="pasued">暂停</button>
                <button onclick='resumeRadio()' id="resumed">重新播报</button>
                <button onclick='stopRadio()' id="stoped">停止</button>
            </td>
        </tr>

    </table>

    <textarea id="textValue" placeholder="请在这里输入要播放的文字" style="width: 80%;min-height:300px;"></textarea>
    <br>
</div>
</body>

<script type="text/javascript" src="js/wzbf.js"></script>
</html>

 

(function () {
    const config = {
        lang: "zh-CN",
        onboundary: null,
        onend: null,
        onerror: null,
        onmark: null,
        onpause: null,
        onresume: null,
        onstart: null,
        pitch: 1,
        rate: 0.5,
        text: "",
        voice: null,
        volume: 10
    };
    const voicesDropdown = document.getElementById("lang");
    stopRadio();
    const synth = window.speechSynthesis;

    synth.addEventListener('voiceschanged', getSupportVoices);
    let voices = [];

    function getSupportVoices() {
        voices = synth.getVoices();
        voices.forEach(e => {
            const option = document.createElement('option')
            option.value = e.lang
            option.text = e.name
            voicesDropdown.appendChild(option)
        })
    }

    function getValueById(id) {
        return parseFloat(document.getElementById(id).value);
    }

    function audioPlayByStr() {
        const str_tip = document.getElementById("textValue").value;
        if (str_tip == "") {
            alert("请输入要播放的文字");
        }
        const msg = new SpeechSynthesisUtterance();
        // msg.volume = '1'; // 声音的音量，区间范围是0到1，默认是1。
        // msg.rate = 1;// 设置播放语速，范围：0.1 - 10之间    正常为1倍播放
        // msg.pitch = '0'; // 表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1。
        // msg.lang = 'zh-cn'; // 使用的语言，字符串， 例如："zh-cn"
        msg.rate = config.rate; //播放语速
        msg.pitch = config.pitch; //音调高低
        msg.text = str_tip;
        msg.volume = config.volume;//播放音量
        msg.lang = config.lang;//语言类型
        speechSynthesis.speak(msg);//播放
        console.log(msg)
        msg.onstart = function () {
            console.log("开始播放会调用我")
        };
        msg.onend = function () {
            console.log("播放完成才会调用我")
        };
        msg.onpause = function () {
            console.log("播放暂停才会调用我")
        };
        msg.onresume = function () {
            console.log("播放重新开始才会调用我")
        };
        msg.onerror = function (error) {
            console.log("播放出现错误才会调用我" + error)
        };
    }

    function change(id, value) {
        document.getElementById(id).value = getValueById(id) + value;
        config[id] = getValueById(id);
        console.log(config);
    }

    function pauseRadio() {
        window.speechSynthesis.pause();

    }

    function resumeRadio() {
        window.speechSynthesis.resume();
    }

    function stopRadio() {
        window.speechSynthesis.cancel();
    }

})();

 

 
posted @ 2023-02-03 14:42  已老  阅读(97)  评论(0)  编辑  收藏  举报