AI-一分钟生成一个文本转语音的小工具（html + js + css版）

文本转语音的小工具（html + js + css版）

stiekel

325人浏览 · 2025-02-27 10:18:26

stiekel · 2025-02-27 10:18:26 发布

1、提示词

（1）轻量；（2）有中文支持，且生成语音高质量；（3）免费、开源；（4）方便编程小白使用；（5）不使用内置的UI样式；（6）html + js + css 版本的，不使用任何框架，可以下载插件；

2、生成预览效果

1、功能：

文本转语音
声音选择
语速调节
音调调节
播放/暂停/停止控制
中文语音优先选择

2、预览效果：

3、文件

1、index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本转语音工具</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://unpkg.com/lucide-icons/dist/umd/lucide.css" rel="stylesheet">
</head>
<body>
    <div class="text-to-speech">
        <div class="text-to-speech__container">
            <h1 class="text-to-speech__title">文本转语音工具</h1>
            
            <div>
                <textarea
                    class="text-to-speech__textarea"
                    placeholder="请输入要转换的文本..."
                    id="textInput"
                ></textarea>

                <div class="text-to-speech__controls">
                    <div class="text-to-speech__control-group">
                        <label class="text-to-speech__label">选择声音：</label>
                        <select class="text-to-speech__select" id="voiceSelect"></select>
                    </div>

                    <div class="text-to-speech__control-group">
                        <label class="text-to-speech__label">语速 (<span id="rateValue">1.0</span>)：</label>
                        <input
                            type="range"
                            class="text-to-speech__slider"
                            min="0.5"
                            max="2"
                            step="0.1"
                            value="1"
                            id="rateInput"
                        />
                    </div>

                    <div class="text-to-speech__control-group">
                        <label class="text-to-speech__label">音调 (<span id="pitchValue">1.0</span>)：</label>
                        <input
                            type="range"
                            class="text-to-speech__slider"
                            min="0.5"
                            max="2"
                            step="0.1"
                            value="1"
                            id="pitchInput"
                        />
                    </div>
                </div>

                <div class="text-to-speech__buttons">
                    <button id="playButton" class="text-to-speech__button text-to-speech__button--play">
                        <i data-lucide="play" class="icon"></i>
                        播放
                    </button>
                    <button id="pauseButton" class="text-to-speech__button text-to-speech__button--pause" style="display: none;">
                        <i data-lucide="pause" class="icon"></i>
                        暂停
                    </button>
                    <button id="stopButton" class="text-to-speech__button text-to-speech__button--stop">
                        <i data-lucide="square" class="icon"></i>
                        停止
                    </button>
                </div>
            </div>

            <div class="text-to-speech__tips">
                <p>提示：此工具使用浏览器内置的 Web Speech API，完全免费且无需安装。</p>
                <p>支持中文和多种语言，可调节语速和音调。</p>
            </div>
        </div>
    </div>
    <script src="https://unpkg.com/lucide@latest"></script>
    <script src="script.js"></script>
</body>
</html>

2、styles.css

/* 变量定义 */
:root {
    --primary-color: #3b82f6;
    --secondary-color: #f3f4f6;
    --text-color: #1f2937;
    --border-color: #e5e7eb;
}

/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.text-to-speech {
    min-height: 100vh;
    padding: 2rem;
    background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
}

.text-to-speech__container {
    max-width: 42rem;
    margin: 0 auto;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    padding: 2rem;
}

.text-to-speech__title {
    font-size: 1.875rem;
    font-weight: 700;
    text-align: center;
    color: var(--text-color);
    margin-bottom: 2rem;
}

.text-to-speech__textarea {
    width: 100%;
    min-height: 200px;
    padding: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 1.125rem;
    resize: vertical;
}

.text-to-speech__textarea:focus {
    border-color: var(--primary-color);
    outline: none;
}

.text-to-speech__controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .text-to-speech__controls {
        grid-template-columns: repeat(2, 1fr);
    }
}

.text-to-speech__control-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.text-to-speech__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-color);
}

.text-to-speech__select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: white;
}

.text-to-speech__slider {
    width: 100%;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    appearance: none;
}

.text-to-speech__slider::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
}

.text-to-speech__buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.text-to-speech__button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.text-to-speech__button .icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
}

.text-to-speech__button--play {
    background-color: var(--primary-color);
    color: white;
    border: none;
}

.text-to-speech__button--play:hover {
    background-color: #2563eb;
}

.text-to-speech__button--pause {
    background-color: #ca8a04;
    color: white;
    border: none;
}

.text-to-speech__button--pause:hover {
    background-color: #a16207;
}

.text-to-speech__button--stop {
    border: 2px solid var(--border-color);
    color: var(--text-color);
    background: transparent;
}

.text-to-speech__button--stop:hover {
    background-color: var(--secondary-color);
}

.text-to-speech__tips {
    text-align: center;
    color: #6b7280;
    font-size: 0.875rem;
    margin-top: 2rem;
}

.text-to-speech__tips p {
    margin: 0.5rem 0;
}

3、script.js

document.addEventListener('DOMContentLoaded', () => {
    // 初始化Lucide图标
    lucide.createIcons();

    // DOM元素
    const textInput = document.getElementById('textInput');
    const voiceSelect = document.getElementById('voiceSelect');
    const rateInput = document.getElementById('rateInput');
    const pitchInput = document.getElementById('pitchInput');
    const rateValue = document.getElementById('rateValue');
    const pitchValue = document.getElementById('pitchValue');
    const playButton = document.getElementById('playButton');
    const pauseButton = document.getElementById('pauseButton');
    const stopButton = document.getElementById('stopButton');

    let voices = [];
    let isPlaying = false;

    // 加载声音列表
    function loadVoices() {
        voices = window.speechSynthesis.getVoices();
        voiceSelect.innerHTML = '';
        
        voices.forEach(voice => {
            const option = document.createElement('option');
            option.value = voice.name;
            option.textContent = `${voice.name} (${voice.lang})`;
            voiceSelect.appendChild(option);
        });

        // 默认选择中文声音
        const chineseVoice = voices.find(voice => voice.lang.includes('zh'));
        if (chineseVoice) {
            voiceSelect.value = chineseVoice.name;
        }
    }

    // 初始加载声音
    loadVoices();
    if (speechSynthesis.onvoiceschanged !== undefined) {
        speechSynthesis.onvoiceschanged = loadVoices;
    }

    // 更新滑块值显示
    rateInput.addEventListener('input', () => {
        rateValue.textContent = parseFloat(rateInput.value).toFixed(1);
    });

    pitchInput.addEventListener('input', () => {
        pitchValue.textContent = parseFloat(pitchInput.value).toFixed(1);
    });

    // 播放功能
    function speak() {
        if (!textInput.value) return;

        window.speechSynthesis.cancel();
        const utterance = new SpeechSynthesisUtterance(textInput.value);
        utterance.voice = voices.find(voice => voice.name === voiceSelect.value);
        utterance.rate = parseFloat(rateInput.value);
        utterance.pitch = parseFloat(pitchInput.value);

        utterance.onstart = () => {
            isPlaying = true;
            playButton.style.display = 'none';
            pauseButton.style.display = 'flex';
        };

        utterance.onend = () => {
            isPlaying = false;
            playButton.style.display = 'flex';
            pauseButton.style.display = 'none';
        };

        utterance.onerror = () => {
            isPlaying = false;
            playButton.style.display = 'flex';
            pauseButton.style.display = 'none';
        };

        window.speechSynthesis.speak(utterance);
    }

    // 暂停功能
    function pause() {
        window.speechSynthesis.pause();
        isPlaying = false;
        playButton.style.display = 'flex';
        pauseButton.style.display = 'none';
    }

    // 继续播放功能
    function resume() {
        window.speechSynthesis.resume();
        isPlaying = true;
        playButton.style.display = 'none';
        pauseButton.style.display = 'flex';
    }

    // 停止功能
    function stop() {
        window.speechSynthesis.cancel();
        isPlaying = false;
        playButton.style.display = 'flex';
        pauseButton.style.display = 'none';
    }

    // 事件监听
    playButton.addEventListener('click', speak);
    pauseButton.addEventListener('click', pause);
    stopButton.addEventListener('click', stop);

    // 清理
    window.addEventListener('beforeunload', () => {
        window.speechSynthesis.cancel();
    });
});

4、总结

1. 使用原生DOM操作替代了React的状态管理

2. 使用CSS变量和BEM命名规范组织样式

3. 保持了相同的UI设计和交互体验

4. 使用Lucide图标库的CDN版本

5. 增加了更多的错误处理和状态管理

6. 优化了移动端适配

技术共进，成长同行——讯飞AI开发者社区

更多推荐

智能体（Agent）的记忆架构：深入解析短期记忆与长期记忆

讯飞AI开发者社区

PHP与人工智能：结合案例与可能性探索

讯飞AI开发者社区

通用人工智能(AGI)发展现状：从科幻到现实的跨越

通用人工智能(AGI)正从科幻走向现实。2025年，多模态融合、递归推理引擎和能效革命三大技术突破推动AGI发展，国际科技巨头和中国企业加速布局。AI Agent在金融、医疗、教育等领域广泛应用，企业自动化效率显著提升。然而，数据隐私、算法透明度和就业替代等伦理挑战亟待解决。未来，AGI将向多模态量子计算融合、具身智能和世界模型方向发展，需要建立人机协作新模式和完善的政策法规框架。AGI既带来机遇