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
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。