场景

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

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

posted on 2020-11-25 15:48 霸道流氓阅读(1816) 评论(0) 编辑收藏举报

刷新页面返回顶部