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

这篇博客演示了如何利用谷歌的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级,报警时间:2021103017: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>```

如有问题,欢迎点赞评论!
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值