如何在网页上播放通知声音

如今，网页开发一直在不断发展，并寻找改善用户体验的新方法。其中一种改善用户体验的方式是通过在网页上添加通知，以通知用户发生的任何事件。

在开始教程之前，让我们了解一下为什么我们需要在网页上添加带有声音的通知。

为什么要添加通知声音

正如我们上面所说，通知用于增强用户体验。我们可以用它来通知用户任务的完成，例如当用户提交表单、在聊天应用中收到消息、提醒等等。

如果用户离开设备，很难让他们知道他们收到了通知。因此，我们应该在用户收到任何通知时添加播放声音的功能。即使开发人员可以为不同的通知添加不同的声音，这样也可以帮助用户。

在本教程中，我们将学习如何使用JavaScript和JQuery在用户收到通知时播放音频。

语法

用户可以按照以下语法使用audio()构造函数来播放通知声音。

var audio = new Audio(URL);
audio.play();

在上面的语法中，URL是我们要在用户接收到通知时播放的音频URL。

示例1（使用JavaScript）

在下面的示例中，我们使用基本的JavaScript来播放音频。当用户点击按钮时，它会执行playSound()函数。在playSound()函数中，我们通过将音频URL作为参数传递来创建音频对象。然后，我们使用play()方法来播放音频。

在输出中，用户可以点击按钮播放音频。在实时应用中，当用户接收到通知时，我们可以执行像playSound()这样的函数来播放音频。

<html>
   <body>
      <h2> Adding the <i> notification sound </i> to webpage using JavaScript </h2>
      <button onclick = "playSound()"> play notification sound </button>
      <script>
         function playSound() {
         var audio = new Audio('http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/alien_shoot.wav');
         audio.play();
         }
      </script>
</html>

示例2

在下面的示例中，我们使用Jquery播放音频声音。在这里，我们创建了按钮并分配了“btn” ID。在Jquery中，我们使用ID访问按钮并添加“click”事件监听器。

当用户点击按钮时，它会创建音频对象并使用play()方法播放它，用户可以在输出中进行测试。

<html>
<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.js"></script>
</head>
<body>
   <h2> Adding the <i> notification sound </i> to webpage using jQuery </h2>
   <button id = "btn"> play notification sound </button>
   <script>
      // play notification sound
      $("#btn").click(function () {
      var audio = new Audio('http://commondatastorage.googleapis.com/codeskulptor-assets/jump.ogg');
      audio.play();
      });
   </script>
</html>

示例3（将音频添加到HTML）

在这个示例中，我们从JavaScript中将“

由于我们在“

<html>
   <body>
      <h2> Adding the <i> notification sound </i> to webpage using JavaScript </h2>
      <div id = "sound"> </div>
      <button onclick = "playSound()"> play notification sound </button>
      <script>
         function playSound() {
         var mp3 = '<source src="http://commondatastorage.googleapis.com/codeskulptor-assets/jump.ogg" type="audio/mpeg">';
         document.getElementById("sound").innerHTML =
         '<audio autoplay="autoplay">' + mp3 + "</audio>";
         }
      </script>
</html>