文字转语音edge-tts（网页版）> ai真方便（一行代码不用写 😄），这是调用edge-tts的文字转语音的htm

ai真方便（一行代码不用写 😄），这是调用edge-tts的文字转语音的html网页。配色也是ai弄的，比我强多了

ctrl + c, ctrl + v ,保存为html格式，打开就可用。 ✅

下载功能不好使，所以删掉了。 😂

<!-- 这个功能是ai写的，挺不错，以后就是ai程序员了，哈哈 -->

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微软语音合成-网页版</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #F7F3E6; /* 浅色背景 */
            margin: 0;
            padding: 40px 0; /* 上下填充 */
            color: #333;
            display: flex;
            justify-content: center; /* 居中对齐 */
            align-items: center; /* 居中对齐 */
            height: 100vh; /* 使内容居中 */
            overflow: hidden; /* 隐藏外部滚动条 */
        }

        .container {
            max-width: 800px; /* 增加容器宽度 */
            width: 100%; /* 设置为 100% 以适应不同屏幕 */
            max-height: 100vh; /* 最大高度为视口高度 */
            overflow-y: auto; /* 允许内部滚动条 */
            background-color: #B52A27; /* 故宫红 */
            border-radius: 10px;
            padding: 30px; /* 增加内边距 */
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            color: #F1D18A; /* 故宫黄 */
            font-size: 28px;
            margin-bottom: 20px;
        }

        textarea {
            width: 100%;
            height: 600px; /* 设置为600px */
            margin-bottom: 15px;
            padding: 15px;
            font-size: 16px;
            border: 2px solid #F1D18A; /* 黄色边框 */
            border-radius: 5px;
            resize: none; /* 禁止调整大小 */
            box-sizing: border-box; /* 确保内边距不影响总高度 */
        }

        select {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 2px solid #F1D18A; /* 黄色边框 */
            border-radius: 5px;
            background-color: #F7F3E6; /* 浅色背景 */
            font-size: 16px;
        }

        button {
            background-color: #F1D18A; /* 按钮黄色 */
            color: #B52A27; /* 按钮文本故宫红 */
            padding: 10px 20px;
            margin: 5px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #C5B26D; /* 悬停效果 */
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>微软语音合成-网页版</h1>

        <!-- 文本输入框 -->
        <textarea id="text-input" placeholder="请输入内容"></textarea>

        <!-- 声音选择器 -->
        <label for="voice-select" style="color: #F1D18A;">声音：</label>
        <select id="voice-select"></select>

        <button onclick="speakConversation()">开始播放</button>
    </div>

    <script>
        // 页面加载时，从 localStorage 中获取文本并填入 textarea
        window.onload = function() {
            const savedText = localStorage.getItem('textInput');
            if (savedText) {
                document.getElementById('text-input').value = savedText;
            }
        };

        // 在用户输入时，将文本保存到 localStorage
        document.getElementById('text-input').addEventListener('input', function() {
            localStorage.setItem('textInput', this.value);
        });

        function speakConversation() {
            // 你的语音合成代码逻辑
            const text = document.getElementById('text-input').value;
            // 执行语音合成...
            console.log('开始播放:', text);
        }

        let voices = [];
        const synth = window.speechSynthesis;
        const voiceSelect = document.getElementById('voice-select');
        const textInput = document.getElementById('text-input');

        // 获取并填充可用语音
        function populateVoiceList() {
            voices = synth.getVoices();
            const selectedVoiceIndex = voiceSelect.value; // 保存当前声音选择

            voiceSelect.innerHTML = '';
            voices.forEach((voice, index) => {
                // 只显示中文语音
                if (voice.lang.startsWith('zh')) {
                    const option = document.createElement('option');
                    option.textContent = `${voice.name} (${voice.lang})`;
                    option.value = index;
                    voiceSelect.appendChild(option);
                }
            });

            // 恢复用户的选择
            voiceSelect.value = selectedVoiceIndex;
        }

        // 朗读对话
        function speakConversation() {
            const dialogue = textInput.value.trim().split('\n').filter(line => line); // 过滤空行
            let currentLine = 0;

            function playNextLine() {
                if (currentLine >= dialogue.length) return;

                const line = dialogue[currentLine].trim();
                const utterance = new SpeechSynthesisUtterance(line);
                utterance.voice = voices[voiceSelect.value];

                synth.speak(utterance);
                utterance.onend = () => {
                    currentLine++;
                    playNextLine(); // 递归调用以继续下一条
                };
            }
            playNextLine();
        }

        // 初始化语音列表
        populateVoiceList();
        if (speechSynthesis.onvoiceschanged !== undefined) {
            speechSynthesis.onvoiceschanged = populateVoiceList;
        }
    </script>
</body>

</html>