码上焚香

Yahocen

浏览器语音合成（Speech Synthesis）

Web
19
2024-09-07

Web Speech API 包括了语音合成（Speech Synthesis）

示例代码

演示地址：https://www.yhc.red/web-speech-api-tts-example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Speech API Text-To-Speech Example with Voice Selection</title>
</head>
<body>
  <h1>Web Speech API Text-To-Speech Example with Voice Selection</h1>
  <textarea id="textToSpeak" rows="4" cols="50" placeholder="Enter text to speak..."></textarea>
  <br>
  <label for="voiceSelect">Select Voice:</label>
  <select id="voiceSelect">
  </select>
  <br>
  <button id="speakButton">Speak</button>
  
  <script>
  // 检查浏览器是否支持 Web Speech API 的语音合成部分
  if (!('speechSynthesis' in window)) {
    console.error('Your browser does not support the Web Speech API.');
  }

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

  // 获取所有可用的发音人
  let voices = [];
  updateVoices();

  // 创建一个用于语音合成的 Utterance 对象
  const utterance = new SpeechSynthesisUtterance();

  // 初始化 Utterance 对象
  document.getElementById('speakButton').addEventListener('click', () => {
    utterance.text = document.getElementById('textToSpeak').value;
    utterance.lang = 'zh-CN'; // 设置语言为中文（简体）
    utterance.voice = getSelectedVoice();
    synth.speak(utterance);
  });

  // 更新发音人列表
  function updateVoices() {
    voices = synth.getVoices();
    displayVoices();
  }

  // 显示发音人列表
  function displayVoices() {
    const select = document.getElementById('voiceSelect');
    select.innerHTML = '';
    voices.forEach(voice => {
      const option = document.createElement('option');
      option.value = voice.name;
      option.textContent = `${voice.name} (${voice.lang})`;
      select.appendChild(option);
    });
  }

  // 获取当前选中的发音人
  function getSelectedVoice() {
    const selectedVoiceName = document.getElementById('voiceSelect').value;
    return voices.find(voice => voice.name === selectedVoiceName);
  }

  // 监听语音合成系统的改变事件
  synth.onvoiceschanged = () => {
    updateVoices();
  };

  // 初始化页面加载时的发音人列表
  window.addEventListener('load', () => {
    updateVoices();
  });
</script>
</body>
</html>

兼容性和注意事项

  1. 浏览器支持

    1. 确保您的浏览器支持 Web Speech API 的语音合成部分。大多数现代浏览器（如 Chrome、Firefox、Edge 等）都支持

  2. 语言支持

    1. 不同的浏览器可能支持不同的语言。确保您设置的语言是浏览器支持的

  3. 权限

    1. 在某些情况下，浏览器可能会询问是否允许使用语音合成功能，请确保您允许了这个请求

扩展功能

选择不同的发言人

您可以使用 speechSynthesis.getVoices() 获取可用的声音选项，并设置 utterance.voice 来选择不同的发音人。

const voices = synth.getVoices();
utterance.voice = voices.find(voice => voice.name === 'Alex');

监听事件

utterance 对象支持多种事件监听，如 onstart、onend 等，可以用来跟踪语音合成的状态

utterance.onstart = function() {
  console.log('Speaking started.');
};

utterance.onend = function() {
  console.log('Speaking ended.');
};

#原创 49
浏览器监听文本选择
Java 的集合框架