场景
在网页端实现将指定的文字进行语音合成并进行播报。
使用HTML5的Speech Synthesis API就能实现简单的语音合成效果。
注:
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
新建一个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 |
标签:const,SpeechSynthesisAPI,支持,sos,HTML5,语音,synth,msg,霸道 From: https://blog.51cto.com/BADAOLIUMANGQZ/6144507