資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
