场景
在网页端实现将指定的文字进行语音合成并进行播报。
使用HTML5的Speech Synthesis API就能实现简单的语音合成效果。
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
新建一个Html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name= "viewport"content="width=device-width, initial-scale=1.0"> <title>公众号:霸道的程序猿</title> </head> <body> <h1>公众号:霸道的程序猿</h1> <input id="btn1" type="button" value ="点我" onclick="test();"/> </body> </html> <script> function test() { const sos = `公众号:霸道的程序猿`; const synth = window.speechSynthesis; let msg = new SpeechSynthesisUtterance(sos); synth.speak(msg) } </script>
然后在浏览器中打开
然后点击按钮，就会触发test方法的执行
const sos = `公众号:霸道的程序猿`;
const synth = window.speechSynthesis;
let msg = new SpeechSynthesisUtterance(sos);
synth.speak(msg)
然后实现语音合成的主要是如上代码。
这里推荐使用Chrome浏览器，因为HTML5的支持度不同
浏览器兼容性
| 电脑端 | 移动端 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | |
| 基本支持 | 支持：33 | 支持 | 支持：49 | 支持 | ？ | 支持：7 | ？ | 支持 | 支持 | 支持 | 支持 | 支持：7.1 |