当前位置：首页 > JavaScript

js实现语音播报

2026-03-01 13:25:52JavaScript

实现语音播报的基本方法

在JavaScript中，可以通过Web Speech API实现语音播报功能。该API提供了SpeechSynthesis接口，允许将文本转换为语音。

// 创建语音合成实例
const synth = window.speechSynthesis;

// 创建语音内容
const utterance = new SpeechSynthesisUtterance('你好，这是语音播报测试');

// 设置语音参数
utterance.rate = 1; // 语速 (0.1-10)
utterance.pitch = 1; // 音高 (0-2)
utterance.volume = 1; // 音量 (0-1)

// 开始播报
synth.speak(utterance);

选择不同语音

可以获取系统支持的语音列表并选择特定语音：

// 获取语音列表
const voices = synth.getVoices();

// 设置中文语音（如果有）
const chineseVoice = voices.find(voice => voice.lang.includes('zh'));
if(chineseVoice) {
    utterance.voice = chineseVoice;
}

处理语音加载问题

由于语音列表可能需要时间加载，建议这样处理：

// 语音加载完成后再设置
synth.onvoiceschanged = function() {
    const voices = synth.getVoices();
    // 设置语音...
};

控制语音播放

可以控制语音的播放、暂停和停止：

// 暂停当前语音
synth.pause();

// 恢复暂停的语音
synth.resume();

// 停止所有语音
synth.cancel();

事件监听

可以监听语音播报的各种事件：

utterance.onstart = function(event) {
    console.log('语音开始播放');
};

utterance.onend = function(event) {
    console.log('语音播放结束');
};

utterance.onerror = function(event) {
    console.error('语音播放出错');
};

浏览器兼容性注意事项

Web Speech API在现代浏览器中得到较好支持，但使用时仍需注意：

Chrome、Edge、Firefox和Safari都支持此API
某些移动浏览器可能支持不完全
需要用户授权麦克风权限（部分浏览器）

实现语音播报按钮示例

以下是一个完整的HTML示例，实现点击按钮播放语音：

<!DOCTYPE html>
<html>
<head>
    <title>语音播报示例</title>
</head>
<body>
    <textarea id="textToSpeak" rows="4" cols="50">请输入要播报的文本</textarea>
    <button id="speakButton">播放</button>
    <button id="stopButton">停止</button>

    <script>
        document.getElementById('speakButton').addEventListener('click', function() {
            const text = document.getElementById('textToSpeak').value;
            const utterance = new SpeechSynthesisUtterance(text);
            window.speechSynthesis.speak(utterance);
        });

        document.getElementById('stopButton').addEventListener('click', function() {
            window.speechSynthesis.cancel();
        });
    </script>
</body>
</html>