数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在网站上播放通知声音？
如今，Web 开发不断发展，并不断寻找改进用户体验的新方法。改进用户体验的一种方法是向网站添加通知，以通知用户任何事件。
在我们开始本教程之前，让我们了解一下为什么我们需要带有声音的网站通知。
为什么添加通知声音？
如上所述，通知用于增强用户体验。我们可以使用它来通知用户一项任务，例如用户完成表单提交、在聊天应用程序中收到消息、提醒等。
如果用户远离他们的设备，很难让他们知道他们收到了通知。因此，我们应该在用户收到任何通知时添加播放声音。如果开发人员可以为不同的通知添加不同的声音，这将更有助于用户。
在本教程中，我们将学习使用 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）
在这个例子中，我们将“<audio>”标签从 JavaScript 添加到 HTML。我们创建了“<source>”标签，并添加了“src”属性，其值为 JavaScript 中的音频 URL。之后，我们将其赋值给“mp3”变量。此外，我们准备了一个包含“<audio>”标签和“mp3”变量值的字符串，我们将其添加为 ID 为“sound”的 div 元素的内部 HTML。
因为我们在“<audio>”标签中添加了“autoPlay”属性，所以当我们将其添加到 DOM 时，音频会开始播放。
<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>
结论
我们学习了播放音频声音的三个不同示例。在第一个示例中，我们使用了 JavaScript；在第二个示例中，我们使用了 JQuery。在第三个示例中，我们使用 JavaScript 和“autoPlay”属性将“<audio>”标签添加到 DOM。
但是，我们只学习了播放音频，开发人员可以在收到通知时执行该函数以播放音频。
7K+ 次浏览
