HTML怎么插入语音播报按钮实现文本转语音触发

在网页开发中，实现语音播报功能可以提升无障碍访问体验，通过HTML结合浏览器原生的SpeechSynthesis API就能快速实现语音播报按钮的触发效果，不需要依赖第三方插件。

核心API介绍

浏览器内置的SpeechSynthesis接口是文本转语音的核心，它属于Web Speech API的一部分，主流现代浏览器都支持该接口，主要包括以下常用方法和属性：

• speak()：传入SpeechSynthesisUtterance实例，开始播报语音
• pause()：暂停当前正在进行的语音播报
• resume()：恢复被暂停的语音播报
• cancel()：取消当前所有排队的语音播报任务
• speaking：只读属性，返回布尔值表示当前是否正在播报

基础实现步骤

1. 创建HTML结构

首先需要创建播报按钮和需要播报的文本区域，结构如下：

<div class="speech-container">
  <textarea id="speechText" rows="5" cols="50" placeholder="请输入要播报的文本内容">这是一段测试语音播报的内容，用于演示HTML触发文本转语音的效果</textarea>
  <div class="btn-group">
    <button id="startBtn">开始播报</button>
    <button id="pauseBtn">暂停播报</button>
    <button id="resumeBtn">继续播报</button>
    <button id="stopBtn">停止播报</button>
  </div>
</div>

2. 编写JavaScript逻辑

接下来通过JavaScript绑定按钮事件，调用SpeechSynthesis API实现播报控制：

// 获取DOM元素
const speechText = document.getElementById('speechText');
const startBtn = document.getElementById('startBtn');
const pauseBtn = document.getElementById('pauseBtn');
const resumeBtn = document.getElementById('resumeBtn');
const stopBtn = document.getElementById('stopBtn');

// 获取语音合成实例
const synth = window.speechSynthesis;
let utterance = null;

// 开始播报
startBtn.addEventListener('click', () => {
  // 如果正在播报先取消之前的任务
  if (synth.speaking) {
    synth.cancel();
  }
  const text = speechText.value.trim();
  if (!text) {
    alert('请输入要播报的文本内容');
    return;
  }
  // 创建播报实例
  utterance = new SpeechSynthesisUtterance(text);
  // 设置播报参数
  utterance.lang = 'zh-CN'; // 设置语言为中文
  utterance.rate = 1; // 播报语速，范围0.1-10，默认1
  utterance.pitch = 1; // 播报音高，范围0-2，默认1
  utterance.volume = 1; // 播报音量，范围0-1，默认1
  // 开始播报
  synth.speak(utterance);
});

// 暂停播报
pauseBtn.addEventListener('click', () => {
  if (synth.speaking && !synth.paused) {
    synth.pause();
  }
});

// 继续播报
resumeBtn.addEventListener('click', () => {
  if (synth.speaking && synth.paused) {
    synth.resume();
  }
});

// 停止播报
stopBtn.addEventListener('click', () => {
  if (synth.speaking) {
    synth.cancel();
  }
});

兼容性处理

虽然大部分现代浏览器都支持SpeechSynthesis API，但仍有部分旧版本浏览器不支持，使用前可以先做兼容性检测：

if (!('speechSynthesis' in window)) {
  alert('当前浏览器不支持语音播报功能，请更换Chrome、Edge等现代浏览器');
  // 禁用所有播报按钮
  startBtn.disabled = true;
  pauseBtn.disabled = true;
  resumeBtn.disabled = true;
  stopBtn.disabled = true;
}

常见问题说明

部分浏览器要求语音播报必须在用户主动交互（比如点击按钮）后触发，不能在页面加载完成后自动调用speak方法，否则会被浏览器拦截。

如果需要获取浏览器支持的语音列表，可以调用getVoices()方法，该方法返回当前浏览器支持的所有语音实例数组，你可以从中选择合适的语音进行配置：

// 获取支持的语音列表
const voices = synth.getVoices();
voices.forEach((voice, index) => {
  console.log(`语音${index + 1}：名称${voice.name}，语言${voice.lang}`);
});
// 选择指定语音
utterance.voice = voices.find(voice => voice.lang === 'zh-CN');

HTMLtext_to_speechSpeechSynthesis语音播报按钮修改时间：2026-07-22 05:24:22