本文介绍如何利用HTML5和JavaScript的Web Speech API构建一个在线语音朗读工具。内容涵盖获取系统支持的语音列表、配置语言与发音人、调整音高、语速及音量范围，以及实现暂停与继续播放功能。通过具体代码示例，展示如何将这些控制项集成到网页界面中，实现完整的语音合成交互体验。
前言
由于笔者近期正在学习英语，希望能找到一个配套的在线朗读工具以便跟读练习，但市面上并未找到合适的现成产品。因此，笔者决定自行开发一个简易的在线朗读器，正所谓“自己动手，丰衣足食”。
首先展示一下最终实现的效果【此处未涉及具体样式设计，主要确保结构完整且功能可用，用户可根据需求自行美化界面】。
接下来直接展示核心代码实现过程。
一、配置语言与发音人选项
首先需要获取浏览器支持的所有可用语言及对应的发音人列表。
const synth = window.speechSynthesis;
// 注意点：这里是获取不到的，因为所有支持的语言是异步载入到这个数组里的，所以我们需要加一个延迟
console.log(synth.getVoices());
setTimeout(() => {
// 这样就可以拿到了
console.log(synth.getVoices());
}, 50)
该数组中的每一项由特定的语言代码和发音人名称组合而成，构成唯一的标识键。
我们可以将获取到的这些数据填充至下拉选择框中，供用户进行选择使用。
对应的HTML结构代码如下：
<label for="lang">
你可以选择语言：
<select name="lang" id="lang"></select>
</label>
对应的JavaScript逻辑代码如下：
// 将可选的语言填入到选择框中
setTimeout(() => {
const voiceSelect = document.querySelector('select');
const selectChild = synth.getVoices().reduce((res, ite) => {
return res += `<option value="${ite.lang}" data-name="${ite.name}">${ite.lang} - ${ite.name}</option>`
}, '');
voiceSelect.innerHTML = selectChild;
}, 50);
二、配置语音音高参数
除了基础播放，我们还可以调整语音的音高参数（注意：此处指音调高低，而非音量大小）。
相关的HTML输入控件代码如下：
<div>
<label for="pitch">
你可以设置音高【范围在0 - 2之间】：
<input type="number" name="pitch" id="pitch" />
</label>
</div>
相关的JavaScript处理逻辑代码如下：
const pitchInput = document.querySelector('#pitch'); // 音高输入框
// 当音高输入框的内容大于2或小于0的时候进行处理
pitchInput.onblur = () => {
if (pitchInput.value > 2) {
pitchInput.value = 2;
} else if (pitchInput.value < 0) {
pitchInput.value = 0;
}
};
三、配置语音播放速度
此外，我们还可以自定义语音的朗读速度。
相关的HTML输入控件代码如下：
<label for="rate">
你可以设置朗读速度【范围在0 - 10之间】：
<input type="number" name="rate" id="rate" />
</label>
相关的JavaScript处理逻辑代码如下：
const rateInput = document.querySelector('#rate'); // 音速输入框
// 因为有俩个以上的限制了，所以提一个公共方法
// 限制值的公共函数
function limitVal({ ele, min, max }) {
if (ele.value > max) {
ele.value = max;
} else if (ele.value < min) {
ele.value = min;
}
}
// 当音速输入框的内容大于10或小于0的时候进行处理
rateInput.onblur = () => {
limitVal({ ele: rateInput, min: 0, max: 10 });
};四、配置语音音量大小
最后，我们还可以调节语音输出的音量大小。
相关的HTML输入控件代码如下：
<label for="volume">
你可以设置声音大小【范围在0 - 1之间】：
<input type="number" value="0.5" name="volume" id="volume" />
</label>
相关的JavaScript处理逻辑代码如下：
const volumeInput = document.querySelector('#volume'); // 声音大小输入框
// 当音速输入框的内容大于10或小于0的时候进行处理
volumeInput.onblur = () => {
limitVal({ ele: volumeInput, min: 0, max: 1 });
};五、添加暂停与继续播放控制
为了增强交互体验，我们新增了两个控制按钮。
相关的HTML按钮代码如下：
<button onclick="pause()">暂停</button>
<button onclick="continueSpeak()">继续</button>
相关的JavaScript事件处理代码如下：
function pause() { // 暂停
synth.pause();
}
function continueSpeak() { // 继续播放
synth.resume();
}
六、完整代码整合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>吴迪专用在线朗读器</title>
<style>
* {margin: 0;padding: 0;}
</style>
</head>
<body>
<h1>吴迪专用在线朗读器</h1>
<div>
<label for="lang">
你可以选择语言和朗读人员：
<select name="lang" id="lang"></select>
</label>
</div>
<div>
<label for="pitch">
你可以设置音高【范围在0 - 2之间】：
<input type="number" value="1" name="pitch" id="pitch" />
</label>
</div>
<div>
<label for="rate">
你可以设置朗读速度【范围在0 - 10之间】：
<input type="number" value="1" name="rate" id="rate" />
</label>
</div>
<div>
<label for="volume">
你可以设置声音大小【范围在0 - 1之间】：
<input type="number" value="0.5" name="volume" id="volume" />
</label>
</div>
<textarea name="" id="readText" cols="30" rows="10">I'm Wu Di~What are you doing now?</textarea>
<button onclick="startRead()">开始朗读</button>
<button onclick="pause()">暂停</button>
<button onclick="continueSpeak()">继续</button>
<script>
const synth = window.speechSynthesis;
const voiceSelect = document.querySelector('#lang'); // 语言选择框
const pitchInput = document.querySelector('#pitch'); // 音高输入框
const rateInput = document.querySelector('#rate'); // 音速输入框
const volumeInput = document.querySelector('#volume'); // 声音大小输入框
const text = document.getElementById('readText'); // 朗读内容区域
// 将可选的语言填入到选择框中
setTimeout(() => {
const selectChild = synth.getVoices().reduce((res, ite) => {
return res += `<option value="${ite.lang}" data-name="${ite.name}">${ite.lang} - ${ite.name}</option>`
}, '');
voiceSelect.innerHTML = selectChild;
}, 50);
// 限制值的公共函数
function limitVal({ ele, min, max }) {
if (ele.value > max) {
ele.value = max;
} else if (ele.value < min) {
ele.value = min;
}
}
// 当音高输入框的内容大于2或小于0的时候进行处理
pitchInput.onblur = () => {
limitVal({ ele: pitchInput, min: 0, max: 2 });
};
// 当音速输入框的内容大于10或小于0的时候进行处理
rateInput.onblur = () => {
limitVal({ ele: rateInput, min: 0, max: 10 });
};
// 当声音输入框的内容大于1或小于0的时候进行处理
volumeInput.onblur = () => {
limitVal({ ele: volumeInput, min: 0, max: 1 });
};
const utterThis = new window.SpeechSynthesisUtterance(text.value);
// 开始朗读
function startRead() {
const selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
const voices = synth.getVoices();
for(let i = 0; i < voices.length ; i++) {
if(voices[i].name === selectedOption) {
utterThis.voice = voices[i];
}
}
utterThis.pitch = pitchInput.value; // 设置音高
utterThis.rate = rateInput.value; // 设置音速
utterThis.volume = volumeInput.value; // 设置声音大小
synth.speak(utterThis);
}
function pause() { // 暂停
synth.pause();
}
function continueSpeak() { // 继续播放
synth.resume();
}
</script>
</body>
</html>
至此，关于使用HTML和JavaScript实现在线朗读器的教程已介绍完毕。如需了解更多相关技术细节，建议查阅本站往期文章或继续浏览后续内容，感谢大家的支持！