使用原生浏览器实现一个语音合成播放功能
4664次阅读
269人点赞
发布时间: 2025-01-10 08:08:05
扫码到手机查看
![]()
完整代码
SpeechSynthesis 功能的 兼容性：https://caniuse.com/?search=SpeechSynthesis
在线体验地址：http://code.wubin.work/code/js/sound-read/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SpeechSynthesis</title>
</head>
<body>
<div style="text-align: center;margin-top:50px">
<textarea style="height: 100px; width:300px;" id="text">这段文字将通过浏览器的语音合成API来播放</textarea>
<br/>
<select name="voice" id="voices">
<option value="">选择语音</option>
</select>
<label>速度:</label>
<input name="rate" type="range" min="0" max="3" value="1" step="0.1">
<label>音高:</label>
<input name="pitch" type="range" min="0" max="2" value="1" step="0.1">
<div style="margin-top:30px">
<button id="playBtn">播放</button>
<button id="pauseBtn">暂停</button>
<button id="resumeBtn">继续</button>
<button id="cancelBtn">取消</button>
<button id="statusBtn">获取状态</button>
</div>
</div>
</body>
<script>
const speech = window.speechSynthesis
const text = document.getElementById("text");
const playBtn = document.getElementById("playBtn");
const pauseBtn = document.getElementById("pauseBtn");
const resumeBtn = document.getElementById("resumeBtn");
const cancelBtn = document.getElementById("cancelBtn");
const statusBtn = document.getElementById("statusBtn");
const voicesDropdown = document.querySelector('[name="voice"]')
const rate = document.querySelector('[name="rate"]')
const pitch = document.querySelector('[name="pitch"]')
let ssu = null;
playBtn.addEventListener("click", () => {
const { pending, speaking, paused } = speech
if (pending) { // 判断当前播放状态
console.log(`当前播放列表${pending ? "有" : "没有"}未播完的语音`);
return false;
}
// 创建语音
if (!ssu) {
ssu = new SpeechSynthesisUtterance();
ssu.text = text.value;
ssu.lang = voicesDropdown.selectedOptions[0].value // 设置播放语言(默认zh-CN)
ssu.pitch = pitch.value // 获取并设置话语的音调(0-2 默认1，值越大越尖锐,越低越低沉)
ssu.rate = rate.value // 获取并设置说话的速度(0.1-10 默认1，值越大语速越快,越小语速越慢)
ssu.volume = 100 // 获取并设置说话的音量
let count = 0
console.log(ssu);
speech.speak(ssu);
ssu.addEventListener("start", () => {
console.log("开始播放语音");
});
ssu.addEventListener("end", () => {
console.log("播放语音结束");
count ++
setTimeout(function() { // 增加控制播放次数
count < 3 && speech.speak(ssu);
}, 1000);
});
ssu.addEventListener("boundary", (e) => {
// console.log("当前遇到单词或句子", e.name);
});
ssu.addEventListener("pause", () => {
console.log("暂停播放语音");
});
ssu.addEventListener("resume", () => {
console.log("继续播放语音");
});
ssu.addEventListener("error", (e) => {
console.log("发生错误", e.error);
});
}
});
pauseBtn.addEventListener("click", () => {
speech.pause();
});
resumeBtn.addEventListener("click", () => {
speech.resume();
});
cancelBtn.addEventListener("click", () => {
speech.cancel();
});
statusBtn.addEventListener("click", () => {
const { pending, speaking, paused } = speech
console.log(pending, speaking, paused);
console.log(`当前播放列表${pending ? "有" : "没有"}未播完的语音`);
console.log(`当前播放列表${speaking ? "存在" : "不存在"}语音`);
console.log(`当前${paused ? "是" : "不是"}暂停播放状态`);
});
let voices = []
speech.addEventListener('voiceschanged',getSupportVoices)
function getSupportVoices() {
voices = speech.getVoices()
voices.forEach(e => {
const option = document.createElement('option')
option.value = e.lang
option.text = e.name
if (e.lang == 'zh-CN') {
option.selected = true;
}
voicesDropdown.appendChild(option)
})
}
</script>
</html>
目录