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到1utterThis.lang = 'zh';// 汉语utterThis.rate = 0.7; // 语速，数值，默认值是1，范围是0.1到10utterThis.pitch = 2; // 音高，数值，范围从0（最小）到2（最大）。默认值为1utterThis.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
![0XGAME [Week 3] 重生之我在南邮当CTF大王](https://img2023.cnblogs.com/blog/3540423/202411/3540423-20241105211237023-1294471509.png)
