在 JavaScript 中建立嗶聲
Anika Tabassum Era
2023年1月30日
2022年5月5日
本文展示了兩種在 JavaScript 中建立嗶聲的方法。
在 JavaScript 中建立嗶聲
嗶聲通常用作某些功能的警報。但是一般的 JavaScript 約定沒有任何特定的方法或屬性來遵循這種操作。
有兩種執行任務的方法。一種是與 HTML 標籤互動,另一種是在 script
標籤中操作。
在這裡,我們將看到在 HTML 標籤中新增音訊源的示例。我們還將看到另一個例項,它在音訊建構函式中獲取嗶嗶聲的 URL,然後在操作後觸發。
在 JavaScript 中使用 audio
HTML 標籤來發出嗶嗶聲
我們需要在 HTML audio
標籤中新增聲音的來源。在定義音訊和源結構時,我們新增了一個按鈕元素來觸發函式 playbeep()
。
我們將獲取音訊元素並在指令碼部分執行其功能。當它被 sound.play()
觸發時,它會建立一個與附加源相對應的聲音(嗶聲)。
程式碼片段:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Press the Button</p>
<audio id="Audio" >
<source src="https://www.soundjay.com/misc/censor-beep-01.mp3"
type="audio/mpeg">
</audio>
<button onclick="playbeep()">Press Here!</button>
<script>
var sound = document.getElementById('Audio');
function playbeep(){
sound.play()
}
</script>
</body>
</html>
輸出:
在 JavaScript 中為 Beep 使用 audio
建構函式
JavaScript Audio
建構函式獲取聲音源。在 HTML 部分,只需要一個按鈕和一個 onclick
函式,並且無論何時呼叫它,都會觸發獲取 URL 的 sound
物件。
程式碼片段:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>Press the Button</h2>
<button onclick="playbeep()">Press Here!</button>
<script>
function playbeep() {
var sound = new Audio('https://www.soundjay.com/misc/censor-beep-01.mp3');
sound.play();
}
</script>
</body>
</html>
輸出:
Author: Anika Tabassum Era