<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button id="btn">文字转语言</button>
<script>
/**
* @description 文字转语音方法
* @public
* @param { text, rate, lang, volume, pitch } object
* @param text 要合成的文字内容，字符串
* @param rate 读取文字的语速 0.1~10 正常1
* @param lang 读取文字时的语言
* @param volume 读取时声音的音量 0~1 正常1
* @param pitch 读取时声音的音高 0~2 正常1
* @returns SpeechSynthesisUtterance
*/
function speak(
{
text, speechRate, lang, volume, pitch },
endEvent,
startEvent
) {
if (!window.SpeechSynthesisUtterance) {
console.warn("当前浏览器不支持文字转语音服务");
return;
}
if (!text) {
return;
}
const speechUtterance = new SpeechSynthesisUtterance();
speechUtterance.text = text;
speechUtterance.rate = speechRate || 1;
speechUtterance.lang = lang || "zh-CN";
speechUtterance.volume = volume || 1;
speechUtterance.pitch = pitch || 1;
speechUtterance.onend = function () {
endEvent && endEvent();
};
speechUtterance.onstart = function () {
startEvent && startEvent();
};
speechSynthesis.speak(speechUtterance);
return speechUtterance;
}
document.querySelector("#btn").addEventListener("click", () => {
speak(
{
text: "yyds永远滴神,stream",
},
() => {
console.log("语音播放结束");
},
() => {
console.log("语音开始播放");
}
);
});
</script>
</body>
</html>
js implements text-to-speech
Guess you like
Origin blog.csdn.net/m0_51531365/article/details/128409675
Recommended
Ranking