HTML5中使用SpeechSynthesisAPI实现语音合成
生活随笔
收集整理的這篇文章主要介紹了
HTML5中使用SpeechSynthesisAPI实现语音合成
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
場(chǎng)景
在網(wǎng)頁端實(shí)現(xiàn)將指定的文字進(jìn)行語音合成并進(jìn)行播報(bào)。
使用HTML5的Speech Synthesis API就能實(shí)現(xiàn)簡(jiǎn)單的語音合成效果。
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。
實(shí)現(xiàn)
新建一個(gè)Html
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name= "viewport"content="width=device-width, initial-scale=1.0"><title>公眾號(hào):霸道的程序猿</title></head><body><h1>公眾號(hào):霸道的程序猿</h1><input id="btn1" type="button" value ="點(diǎn)我" onclick="test();"/> </body></html><script> function test() {const?sos?=?`公眾號(hào):霸道的程序猿`;const?synth?=?window.speechSynthesis;let?msg?=?new?SpeechSynthesisUtterance(sos);synth.speak(msg) } </script>然后在瀏覽器中打開
?
然后點(diǎn)擊按鈕，就會(huì)觸發(fā)test方法的執(zhí)行
const?sos?=?`公眾號(hào):霸道的程序猿`; const?synth?=?window.speechSynthesis; let?msg?=?new?SpeechSynthesisUtterance(sos); synth.speak(msg)然后實(shí)現(xiàn)語音合成的主要是如上代碼。
這里推薦使用Chrome瀏覽器，因?yàn)镠TML5的支持度不同
瀏覽器兼容性
?
| ? | 電腦端移動(dòng)端|||||||||||
| ? | ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS Safari|||||||||||
| 支持：33 | 支持 | 支持：49 | 支持 | ？ | 支持：7 | ？ | 支持 | 支持 | 支持 | 支持 | 支持：7.1 |
?
總結(jié)
以上是生活随笔為你收集整理的HTML5中使用SpeechSynthesisAPI实现语音合成的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MobileIMSDK怎样将Java服务
- 下一篇： Java中使用Jacob实现Window