使用 Web Speech API 构建通用的语音播报工具函数

引入 Web Speech API

Web Speech API 是一种浏览器内置的功能，它提供了两个主要的功能区域：语音识别 和 语音合成。本文聚焦于后者——语音合成（TTS），即通过 JavaScript 将文本转换为语音播放出来。

工具函数实现

下面是一个简单的工具函数 useSpeech 的实现，封装了 Web Speech API 的核心功能：

export function useSpeech(message) {
    const speak = (msg) => {
        const utterance = new SpeechSynthesisUtterance(msg); // 创建语音对象
        utterance.lang = 'zh-CN'; // 设置语言为中文
        utterance.rate = 1; // 设置语速（0.1 到 10，默认为 1）
        utterance.pitch = 1; // 设置音调（0 到 2，默认为 1）
        utterance.volume = 1; // 设置音量（0 到 1，默认为 1）

        // 检查浏览器是否支持 Web Speech API
        if ('speechSynthesis' in window) {
            window.speechSynthesis.cancel(); // 取消之前的语音播报
            window.speechSynthesis.speak(utterance); // 开始播报
        } else {
            console.warn('您的浏览器不支持 Web Speech API');
        }
    };

    // 如果传入了消息，则直接播报
    if (message) {
        speak(message);
    }

    return { speak }; // 返回 speak 方法以便外部调用
}

参数详解与扩展

以下是详细的参数说明：

1. lang: 定义了语音的语言环境。例如，zh-CN 表示简体中文，en-US 表示美式英语等。

2. rate: 控制语速，取值范围为 0.1 至 10。较低的值意味着较慢的语速，而较高的值则表示较快的语速。默认值为 1，

3. pitch: 调整语音的音调高低，范围从 0 到 2，其中 1 是正常音调。改变音调可以区分不同的说话者或者表达情感变化。

4. volume: 设置播放音量，范围为 0 到 1，其中 1 表示最大音量。
   还有几个重要的属性和方法：

• voice: 允许选择特定的声音类型。例如，在某些实现中可以选择男声、女声或者其他特色声音。这可以通过遍历 speechSynthesis.getVoices() 获取所有可用的声音列表来实现。

• 事件监听: 可以为 SpeechSynthesisUtterance 对象添加事件监听器，如 onstart, onend, onpause, onresume, 和 onboundary 等。这些事件可以帮助监控语音合成过程中的各个阶段，从而实现更复杂的交互逻辑。