Chrome浏览器自带TTS语音合成实战：离线场景下的文本转语音解决方案

1次阅读

没有评论

共计 2950 个字符，预计需要花费 8 分钟才能阅读完成。

在开发需要语音合成功能的 Web 应用时，我们通常会使用在线 TTS 服务，比如 Google Cloud Text-to-Speech 或 Amazon Polly。这些服务虽然功能强大，但存在几个明显的痛点：

必须联网才能使用，这在网络条件差或需要离线使用的场景下是个硬伤
通常需要 API 密钥和计费，增加了开发复杂度和成本
响应速度受网络延迟影响

而 Chrome 浏览器自带的 TTS 功能完美解决了这些问题，它基于 Web Speech API，完全在本地运行，不需要网络连接，也没有使用限制。

让我们看看几种常见语音合成方案的对比：

在线 TTS 服务(如 Google Cloud TTS)
优点：语音质量高，支持多种语言和声音
缺点：需要网络，有使用限制，可能产生费用
客户端 TTS 库(如 responsive-voice)
优点：简单易用
缺点：通常依赖在线服务，功能有限
Web Speech API(Chrome 内置 TTS)
优点：完全离线，免费无限制，原生浏览器支持
缺点：语音质量一般，浏览器兼容性有限

Web Speech API 的 SpeechSynthesis 接口提供了完整的 TTS 功能。下面我们来看具体实现方法。

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

// 创建语音文本对象
const utterance = new SpeechSynthesisUtterance('你好，这是一段测试语音');

// 播放语音
synth.speak(utterance);

下面是一个功能更完整的示例，包含语音选择、语速和音调控制：

// 获取 DOM 元素
const textInput = document.getElementById('text-input');
const voiceSelect = document.getElementById('voice-select');
const rateInput = document.getElementById('rate');
const pitchInput = document.getElementById('pitch');
const speakButton = document.getElementById('speak-btn');
const stopButton = document.getElementById('stop-btn');

// 初始化语音合成
const synth = window.speechSynthesis;
let voices = [];

// 加载可用语音
function loadVoices() {voices = synth.getVoices();
  voiceSelect.innerHTML = '';

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

// 如果语音还没加载完成，监听变化事件
if (speechSynthesis.onvoiceschanged !== undefined) {speechSynthesis.onvoiceschanged = loadVoices;}

// 播放语音
function speak() {if (synth.speaking) {console.error('正在播放语音');
    return;
  }

  if (textInput.value !== '') {const utterance = new SpeechSynthesisUtterance(textInput.value);

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

    // 发生错误时触发
    utterance.onerror = function(event) {console.error('语音播放出错:', event.error);
    };

    // 设置语音
    const selectedVoice = voiceSelect.selectedOptions[0].getAttribute('data-name');
    if (selectedVoice) {utterance.voice = voices.find(voice => voice.name === selectedVoice);
    }

    // 设置语速和音调
    utterance.rate = rateInput.value;
    utterance.pitch = pitchInput.value;

    // 播放
    synth.speak(utterance);
  }
}

// 按钮事件绑定
speakButton.addEventListener('click', speak);
stopButton.addEventListener('click', () => synth.cancel());

// 初始化加载语音
loadVoices();

经过测试，Chrome 内置 TTS 在不同文本长度下的表现如下：

短文本(100 字以内)：几乎瞬时合成
中等文本(100-1000 字)：1- 3 秒合成时间
长文本(1000 字以上)：建议分块处理，避免界面卡顿

内存占用方面，即使处理长文本，内存增长也很有限，通常不会超过几十 MB。

目前支持情况：

Chrome：完整支持
Edge：完整支持
Firefox：部分支持
Safari：部分支持
iOS Safari：不支持

建议在使用前检测 API 是否可用：

if (!('speechSynthesis' in window)) {alert('您的浏览器不支持语音合成功能');
}

尽量使用系统默认语音，通常质量最好
调整语速 (rate) 到 0.8-1.2 之间效果最佳
对于中文语音，使用 zh-CN 或zh-TW语言的语音

常见的错误及处理方法：

utterance.onerror = function(event) {switch(event.error) {
    case 'interrupted':
      console.warn('语音被中断');
      break;
    case 'synthesis-failed':
      console.error('语音合成失败');
      break;
    default:
      console.error('未知错误:', event.error);
  }
};

在实际项目中使用时，可以考虑以下应用场景：