浏览器文字转语音播放-优快云博客

本文链接：https://blog.youkuaiyun.com/haofangkiller/article/details/144612020
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字转语音示例</title>
</head>

<body>
    <h1>文字转语音播放示例</h1>
    <textarea id="text" rows="5" cols="130" placeholder="在这里输入文字...">设备123  xxx报警时间：</textarea><br>
    <button id="speakButton">播放语音</button>
    <button id="speakPause">暂停</button>
    <button id="speakResume">继续</button><br/>
    <select id="voiceSelect"></select>
    <script type="importmap">
        {
            "imports": {
                
                "addons/": "./jsm/"
            }
        }
    </script>
    <script type="module">
        import { GUI } from 'addons/libs/lil-gui.module.min.js';
        import moment from "addons/libs/moment/dist/moment.js";
        let gui;
        let utterance = {};
        function createGUI(model, animations) {
            
            gui = new GUI();

            //创建一个对象，对象属性的值可以被GUI库创建的交互界面改变
            
            utterance.rate = 1.0; // 语速，1为正常语速
            utterance.pitch = 0.5; // 音调，1为正常音调
            utterance.volume = 0.5; // 音量，0到1之间
            utterance.voiceURI = 'native'; // 特定语音URI，但大多数浏览器不支持直接设置
            // gui增加交互界面，用来改变obj对应属性
            gui.add(utterance, 'rate', 0, 1.0).step(0.01).name('语速').onChange(function(value){
                // 你可以写任何你想跟着obj.x同步变化的代码
                // 比如mesh.position.y = value;
                utterance.rate = value;                
            });
            gui.add(utterance, 'pitch', 0, 1.0).step(0.01).name('音调').onChange(function(value){
                utterance.pitch = value;
            });;
            gui.add(utterance, 'volume', 0, 1.0).step(0.01).name('音量').onChange(function(value){
                utterance.volume = value;
               
            });;
        }
        createGUI();
        const synth = window.speechSynthesis;

        synth.addEventListener("voiceschanged", () => {
        const voices = synth.getVoices();
        let voiceSelect=document.getElementById('voiceSelect');
        for (let i = 0; i < voices.length; i++) {
            const option = document.createElement("option");
            option.textContent = `${voices[i].name} (${voices[i].lang})`;
            option.setAttribute("data-lang", voices[i].lang);
            option.setAttribute("data-name", voices[i].name);
            voiceSelect.appendChild(option);
        }
        });
        document.getElementById('speakPause').addEventListener('click',()=>{window.speechSynthesis.pause();});
        document.getElementById('speakResume').addEventListener('click',()=>{window.speechSynthesis.resume();});
        document.getElementById('speakButton').addEventListener('click', function() {
            window.speechSynthesis.cancel();
            
            let curTime=moment().format("YYYY-MM-DD HH:mm:ss");
            // 获取文本框中的内容            
            const text = document.getElementById('text').value+"  "+curTime;
            document.getElementById('text').value=text;
            // 检查是否有文本输入
            if (text.trim() === '') {
                alert('请输入一些文字');
                return;
            }

            // 创建一个 SpeechSynthesisUtterance 对象
            const utteranceConfig = new SpeechSynthesisUtterance(text);
            // utteranceConfig.rate = 1.0; // 语速，1为正常语速
            // utteranceConfig.pitch = 0.3; // 音调，1为正常音调
            // utteranceConfig.volume = 1; // 音量，0到1之间
            for(let key in utterance){
                utteranceConfig[key]=utterance[key];
            }

            utteranceConfig.voiceURI = 'native'; // 特定语音URI，但大多数浏览器不支持直接设置
            // 可选配置
            utteranceConfig.lang = 'zh-CN'; // 设置语言
            // 播放语音
            try{
                window.speechSynthesis.speak(utteranceConfig);
            }catch(exp){
                console.log(exp);
            }
            
        });
    </script>
</body>

</html>