一、合成音频核心知识
1. 认识Web Speech API：浏览器自带的“朗读引擎”
无需额外音频文件，利用浏览器内置的Web Speech API，通过JavaScript即可实现中英文文本朗读，支持语速、音量调节，兼容性覆盖主流浏览器。
核心优势：无需服务器支持，纯前端实现，点击按钮即可触发朗读，适合课程音频、语音播报等场景。
// 核心朗读函数
function readText(text, lang) {
const synth = window.speechSynthesis;
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = lang; // 语言类型（en-US=英文，zh-CN=中文）
synth.speak(utterance); // 开始朗读
}
2. 必学参数：控制朗读效果的“关键配置”
通过调整参数可自定义朗读效果，以下3个是开发中最常用的配置，必须掌握：
// 完整配置示例
function readText(text, lang) {
const synth = window.speechSynthesis;
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = lang; // 语言类型
utterance.rate = 1; // 语速（正常）
utterance.volume = 1; // 音量（最大）
utterance.pitch = 1; // 音调（正常）
synth.speak(utterance);
}
3. 避坑指南：确保朗读功能正常使用
部分浏览器可能存在兼容限制，需注意2个关键细节：
二、实战：2个朗读功能案例
结合上面的知识，实现中英文朗读功能，点击按钮即可体验：
案例1：英文句子朗读（Hello everyone）
配置说明：lang="en-US"（英文）、rate=1（正常语速）、volume=1（最大音量），点击按钮直接朗读。
<!-- 按钮HTML -->
<button class="read-btn" id="read-eng">点击朗读英文</button>
<div class="play-tip" id="tip-eng">网页提示：该版本暂不支持播放</div>
<!-- JavaScript --> document.getElementById('read-eng').addEventListener('click', () => { readText('Hello everyone', 'en-US'); });
<div class="play-tip" id="tip-eng">网页提示：该版本暂不支持播放</div>
<!-- JavaScript --> document.getElementById('read-eng').addEventListener('click', () => { readText('Hello everyone', 'en-US'); });
网页提示：该版本暂不支持播放
案例2：中文词语朗读（你好）
配置说明：lang="zh-CN"（中文）、rate=1（正常语速）、volume=1（最大音量），点击按钮直接朗读。
<!-- 按钮HTML -->
<button class="read-btn" id="read-cn">点击朗读中文</button>
<div class="play-tip" id="tip-cn">网页提示：该版本暂不支持播放</div>
<!-- JavaScript --> document.getElementById('read-cn').addEventListener('click', () => { readText('你好', 'zh-CN'); });
<div class="play-tip" id="tip-cn">网页提示：该版本暂不支持播放</div>
<!-- JavaScript --> document.getElementById('read-cn').addEventListener('click', () => { readText('你好', 'zh-CN'); });
网页提示：该版本暂不支持播放