浏览器内置文字转语音，播报功能Web Speech API - SpeechSynthesisUtterance

hongkid

于 2024-10-11 08:00:00 发布

阅读量1.3k

点赞数 28

文章标签：前端

本文链接：https://blog.csdn.net/hongkid/article/details/142822783

版权

SpeechSynthesisUtterance: 让网页说话的艺术

在现代Web开发中，让网页具有语音功能可以极大提升用户体验，特别是对于视障用户或需要多任务处理的场景。SpeechSynthesisUtterance 是 Web Speech API 中的一个接口，它允许开发者创建一个语音合成对象，该对象可以用来控制语音输出的内容、语言、速度等属性。

什么是 SpeechSynthesisUtterance？

SpeechSynthesisUtterance 对象代表了一段将要通过浏览器的语音合成服务朗读出来的文本。每个 SpeechSynthesisUtterance 实例都可以设置不同的属性，如文本内容、声音类型、音量、语速等，以满足不同场景下的需求。

使用方法

首先，你需要检查用户的浏览器是否支持 speechSynthesis 接口。大多数现代浏览器（如 Chrome, Firefox, Edge, Safari）都支持此功能。

if ('speechSynthesis' in window) {
  console.log('Your browser supports speech synthesis!');
} else {
  console.log('Sorry, your browser does not support speech synthesis.');
}

接下来，你可以创建一个新的 SpeechSynthesisUtterance 对象，并设置其属性：

const utterance = new SpeechSynthesisUtterance();
utterance.text = 'Hello, world!';
utterance.lang = 'en-US'; // 设置语言为美式英语
utterance.rate = 1; // 设置语速，1为正常速度
utterance.pitch = 1; // 设置音调，1为正常音调
utterance.volume = 1; // 设置音量，1为最大音量

// 发出语音
window.speechSynthesis.speak(utterance);

使用语音包

虽然 SpeechSynthesisUtterance 提供了一些基本的属性来调整语音效果，但有时候我们可能希望使用特定的声音来增强用户体验。这可以通过选择不同的 Voice 对象实现。

function getVoices() {
  return new Promise((resolve) => {
    const voices = speechSynthesis.getVoices();
    if (voices.length !== 0) {
      resolve(voices);
    } else {
      speechSynthesis.onvoiceschanged = () => {
        resolve(speechSynthesis.getVoices());
      };
    }
  });
}

getVoices().then(voices => {
  // 选择第一个可用的语音
  const voice = voices[0];
  // 或者选择特定的语音
  const specificVoice = voices.find(v => v.name === 'Google UK English Female');
  
  utterance.voice = specificVoice;
  window.speechSynthesis.speak(utterance);
});

完整的 HTML Demo

下面是一个简单的 HTML 页面示例，展示了如何使用 SpeechSynthesisUtterance 创建一个可交互的语音合成应用。

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>语音合成示例 - 中文</title>
<style>
  label { display: block; margin-top: 10px; }
  textarea { width: 100%; height: 100px; }
</style>
</head>
<body>
<h1>语音合成示例 - 中文</h1>
<label for="textToSpeak">请输入要朗读的文本:</label>
<textarea id="textToSpeak" placeholder="请输入要朗读的文本..."></textarea>
<br>
<label for="voiceSelect">选择语音:</label>
<select id="voiceSelect">
  <option value="">请选择一个语音</option>
</select>
<br>
<label for="volumeSlider">调整音量:</label>
<input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="1">
<br>
<button onclick="speak()">朗读</button>

<script>
document.addEventListener('DOMContentLoaded', () => {
  // 初始化语音选择下拉框
  getVoices().then(voices => {
    const select = document.getElementById('voiceSelect');
    voices.forEach(voice => {
      if (voice.lang === 'zh-CN') {
        const option = document.createElement('option');
        option.value = voice.name;
        option.textContent = `${voice.name} (${voice.lang})`;
        select.appendChild(option);
      }
    });
  });
});

function speak() {
  if ('speechSynthesis' in window) {
    const text = document.getElementById('textToSpeak').value;
    const selectedVoiceName = document.getElementById('voiceSelect').value;
    const volume = parseFloat(document.getElementById('volumeSlider').value);
    const utterance = new SpeechSynthesisUtterance(text);
    utterance.lang = 'zh-CN'; // 设置语言为中文
    utterance.volume = volume; // 设置音量

    // 获取所有可用的语音
    getVoices().then(voices => {
      // 选择用户选择的中文语音
      const selectedVoice = voices.find(v => v.name === selectedVoiceName);
      if (selectedVoice) {
        utterance.voice = selectedVoice;
      } else {
        console.warn('没有找到用户选择的语音包，使用默认语音。');
      }
      window.speechSynthesis.speak(utterance);
    });
  } else {
    alert('您的浏览器不支持语音合成。');
  }
}

function getVoices() {
  return new Promise((resolve) => {
    const voices = speechSynthesis.getVoices();
    if (voices.length !== 0) {
      resolve(voices);
    } else {
      speechSynthesis.onvoiceschanged = () => {
        resolve(speechSynthesis.getVoices());
      };
    }
  });
}
</script>
</body>
</html>