使用谷歌浏览器的speechSynthesis的API，实现语音播报功能

最新推荐文章于 2025-03-12 09:03:40 发布

卡洛背心

最新推荐文章于 2025-03-12 09:03:40 发布

阅读量2.3k

点赞数 1

分类专栏：学习数据处理

本文链接：https://blog.csdn.net/weixin_42321819/article/details/121053780

版权

elasticsearch 语音识别大数据

数据处理同时被 2 个专栏收录

25 篇文章

订阅专栏

学习

10 篇文章

订阅专栏

这篇博客演示了如何利用谷歌的API在网页中实现语音播报功能，特别是在项目预警场景下，通过JavaScript代码实现播报线上项目预警信息，包括预警级别、时间及负责人等关键细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天给大家分享一个，使用谷歌自带的API实现语音播报的功能，可以在项目预警上使用！

实现效果：

代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title></title>
</head>

<body>
  <button onclick='playRadio()' id="played">播报语音</button>
  <button onclick='pauseRadio()' id="pasued">暂停</button>
  <button onclick='resumeRadio()' id="resumed">重新播报</button>
  <button onclick='stopRadio()' id="stoped">停止</button>
  <div>项目预警:线上项目预警，报警级别：2级，报警时间：2021年10月30日17:19:40，负责人：卡洛背心</div>

  <script>
    // 播报语音
    function playRadio() {
      let useVoiceText = '项目预警:线上项目预警，报警级别：2级，报警时间：2021年10月30日17:19:40，负责人：卡洛背心'
      let to_speak = new SpeechSynthesisUtterance(useVoiceText);
      window.speechSynthesis.speak(to_speak)
    }
    // 暂停
    function pauseRadio() {
      window.speechSynthesis.pause();

    }
    // 重新播报
    function resumeRadio() {
      window.speechSynthesis.resume();
    }
    // 停止
    function stopRadio() {
      window.speechSynthesis.cancel();
    }
  </script>
</body>

</html>```

如有问题，欢迎点赞评论！