HTML5中使用SpeechSynthesisAPI实现语音合成

最新推荐文章于 2024-08-16 11:00:58 发布

霸道流氓气质

最新推荐文章于 2024-08-16 11:00:58 发布

阅读量1.4k

点赞数

分类专栏：前端那些骚操作文章标签： HTML5

本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/110132393

版权

前端那些骚操作专栏收录该内容

470 篇文章 16 订阅

订阅专栏

场景

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

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