首页 > 其他分享 >HTML5中使用SpeechSynthesisAPI实现语音合成

HTML5中使用SpeechSynthesisAPI实现语音合成

时间:2023-03-23 11:04:07浏览次数:42  
标签:const SpeechSynthesisAPI 支持 sos HTML5 语音 synth msg 霸道


场景

在网页端实现将指定的文字进行语音合成并进行播报。

使用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>

然后在浏览器中打开

 

HTML5中使用SpeechSynthesisAPI实现语音合成_公众号

然后点击按钮,就会触发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

相关文章