1.采用有道的接口
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>语音播报</title>
</head>
<body>
<button onclick='voiceBroadcast("微信收款10000000元")'>点击播放</button>
<button onclick='voiceBroadcast("DTCTS订单号：Order1234567到货，请及时处理！")'>点击播放2</button>
<script>
function voiceBroadcast(text) {
new Audio("https://dict.youdao.com/dictvoice?audio="+text+"&le=zh").play();
//new Audio("https://fanyi.baidu.com/gettts?lan=zh&text="+text+"&spd=5&source=web").play();
}
/**
* js默认播报
* @param {Object} text
*/
function voiceBroadcast2(text) {
var utterThis = new SpeechSynthesisUtterance();
utterThis.volume = 1; // 声音的音量 范围是0到1
utterThis.lang = 'zh';// 汉语
utterThis.rate = 0.7; // 语速，数值，默认值是1，范围是0.1到10
utterThis.pitch = 2; // 音高，数值，范围从0（最小）到2（最大）。默认值为1
utterThis.text = text;
speechSynthesis.speak(utterThis);
}
</script>
</body>
</html>
2.采用系统的
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
.center-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body>
<div class="center-container">
<button onclick="showInputPrompt()">点我后，在弹窗输入文字，然后确认就可以播放了</button>
</div>
<script src="https://cdn.whwsh.cn/js/notification.js"></script>
<script>
function showInputPrompt() {
var inputText = prompt("请输入要播放的文字消息", "");
if (inputText !== null) {
if (inputText.trim() === "") {
alert("输入不能为空，请重新输入");
} else {
notification.audio.setPlayText(inputText);
notification.audio.play();
}
}
}
</script>
</body>
</html>
参阅：
https://cloud.tencent.com/developer/article/2390634
https://blog.csdn.net/weixin_43992507/article/details/131830917
标签：zh,https,text,HTML,语音,utterThis,inputText,播放 From： https://www.cnblogs.com/dzw159/p/18528931