HTML5中使用SpeechSynthesisAPI实现语音合成
生活随笔
收集整理的這篇文章主要介紹了
HTML5中使用SpeechSynthesisAPI实现语音合成
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
在網頁端實現將指定的文字進行語音合成并進行播報。
使用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的支持度不同
瀏覽器兼容性
?
| ? | 電腦端移動端|||||||||||
| ? | ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS Safari|||||||||||
| 支持：33 | 支持 | 支持：49 | 支持 | ？ | 支持：7 | ？ | 支持 | 支持 | 支持 | 支持 | 支持：7.1 |
?
總結
以上是生活随笔為你收集整理的HTML5中使用SpeechSynthesisAPI实现语音合成的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MobileIMSDK怎样将Java服务
- 下一篇： Nginx映射本地静态资源时，浏览器提示