极客教程如何在网站上播放通知声音
在网站上播放通知声音有多种方式。在这篇文章中，我们将以三种不同的方式播放通知声音。
- 在JavaScript中使用Onclick事件
- 在Javascript中使用音频类
- 使用纯Jquery。
以下是所有程序的详细解释和exxampl代码。
- 在Javascript中使用Onclick事件。当用户点击按钮时，onclick事件会触发函数。在下面的代码中，play1函数与onclick事件相关。函数play1接收音频文件的名称，然后我们用id=sound选择分部，并插入一个包含音频标签的HTML。
示例:
<!DOCTYPE html>
<html>
<head>
<title>Notification Sound</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
<script>
function play1() {
/* Audio link for notification */
var mp3 = '<source src=" " type="audio/mpeg">';
document.getElementById("sound").innerHTML =
'<audio autoplay="autoplay">' + mp3 + "</audio>";
}
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<b>Notification Sound</b>
<br>
<!-- The onclick fires play1 function -->
<button onclick="play1();">
Get notification sound
<div id="sound"></div>
</body>
</html>
- 在JavaScript中使用音频类。这个方法纯粹是使用JavaScript，在那里创建一个音频对象和内置的audio.play()方法。
<!DOCTYPE html>
<html>
<head>
<title>Notification Sound</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
<script>
function play2() {
/* Audio link for notification */
var audio = new Audio(" ");
audio.play();
}
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<b>Notification Sound</b>
<br>
<!-- Plays default sound that is
already set in the function -->
<button onclick="play2();">
Get notification sound
</body>
</html>
- 使用纯Jquery。在这个过程中，我们选择播放ID并与点击事件绑定。在该函数中，我们创建一个新的音频文件，然后播放它。
<!DOCTYPE html>
<html>
<head>
<title>Notification Sound</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
<script>
(document).ready(function () {
("#play").click(function () {
/* Audio link for notification */
var audio = new Audio(" ");
audio.play();
});
});
</script>
</head>
<body>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<h1>GeeksforGeeks</h1>
<b>Notification Sound</b>
<br>
<button id="play">
Get notification sound
</body>
</html>
- 输出。对于你使用的任何程序，其工作原理都是一样的。
