当前位置：首页 > JavaScript

js实现听书

2026-01-31 16:46:19JavaScript

实现思路

通过Web Speech API中的SpeechSynthesis接口可以实现文本转语音功能。该API允许浏览器将文本内容转换为语音播放，适合实现听书功能。

js实现听书

基础代码实现

// 获取语音合成对象
const synth = window.speechSynthesis;

// 创建语音实例
function speak(text) {
    if (synth.speaking) {
        synth.cancel();
    }

    const utterance = new SpeechSynthesisUtterance(text);
    utterance.rate = 1; // 语速 (0.1-10)
    utterance.pitch = 1; // 音高 (0-2)
    utterance.lang = 'zh-CN'; // 中文普通话

    synth.speak(utterance);
}

// 调用示例
speak("这是一段测试文本");

功能扩展

添加暂停/继续控制功能

let isPaused = false;

function togglePlayback() {
    if (isPaused) {
        synth.resume();
        isPaused = false;
    } else {
        synth.pause();
        isPaused = true;
    }
}

语音选择

获取并切换可用语音

function populateVoices() {
    const voices = synth.getVoices();
    const voiceSelect = document.getElementById('voice-select');

    voices.forEach(voice => {
        const option = document.createElement('option');
        option.textContent = `${voice.name} (${voice.lang})`;
        option.setAttribute('data-name', voice.name);
        voiceSelect.appendChild(option);
    });
}

// 需要等待语音列表加载
synth.onvoiceschanged = populateVoices;

注意事项

部分浏览器需要用户交互（如点击事件）后才能触发语音播放
移动端可能存在自动暂停限制，需要保持屏幕常亮
不同浏览器支持的语音质量和语言可能有差异

完整示例

<!DOCTYPE html>
<html>
<body>
    <textarea id="text-input" rows="10"></textarea>
    <button id="play-btn">播放</button>
    <button id="pause-btn">暂停/继续</button>
    <select id="voice-select"></select>

    <script>
        document.getElementById('play-btn').addEventListener('click', () => {
            const text = document.getElementById('text-input').value;
            speak(text);
        });

        // 其他功能实现代码...
    </script>
</body>
</html>

该实现方案主要依赖浏览器原生API，无需额外库，兼容现代浏览器。对于更复杂的需求，可以考虑结合Web Audio API进行音频处理，或使用第三方TTS服务获得更高质量的语音合成效果。

js实现听书