极客笔记JavaScript 如何发出蜂鸣声
蜂鸣声通常用于网站的通知警报。在您的网站中可能还有其他需要使用蜂鸣声的情况。
您可以在日常生活中的一些场所找到几个蜂鸣声的实际示例，例如杂货店、图书馆等。本章将向您展示如何在网站中使用蜂鸣声，使用的是JavaScript编程语言。
以下是本章将讨论的情况：
- 警报通知
- 使网站更具互动性
在本章中，我们将向您展示如何在按钮点击时播放蜂鸣声。
蜂鸣声的使用场景
大多数时候，您会注意到在扫描条形码时会发出声音，它表示扫描成功。这个声音是程序员使用蜂鸣声发送信号给用户的。
此外，您也经常在视频中听到这个蜂鸣声，用于静音部分声音。还有其他一些情况下也会使用这个蜂鸣声。它有助于使站点更具互动性。
实现
要使用JavaScript在按钮点击时播放蜂鸣声，不需要编写冗长的代码来实现。但是，您需要嵌入蜂鸣音乐的源代码，使用HTML标签并提供音频的链接在中。
我们将以一个示例为例，其中在按钮点击时，我们将调用一个用户定义的函数，该函数将包含蜂鸣声的代码。
除此之外，我们将使用JavaScript的play()函数来播放代码中提供的音乐或声音。以下是播放蜂鸣声的示例：
示例1
这是使用JavaScript编程语言播放蜂鸣声的最简单和最短的代码。在此示例中，我们将直接从互联网上使用蜂鸣音乐，通过在JavaScript代码中提供其链接并在点击时播放。
<html>
<head>
<title> Beep sound document </title>
</head>
<body>
<center>
<h2 style="color:brown"> Simple example </h2>
<h4> Press the Button to beep a sound </h4>
<!-- create a button to call the function to play a beep sound -->
<button onclick="play()"> Press Button </button>
<script>
//JavaScript function to play the beep sound
function play() {
var beepsound = new Audio(
'https://www.soundjay.com/button/sounds/beep-01a.mp3');
beepsound.play();
}
</script>
</center>
</body>
</html>
输出：
在Web浏览器上执行此代码后，会如下屏幕截图所示显示输出结果，并附带一个按钮：
当您点击这个 按下按钮 时，它会播放一声哔哔声。
示例2：使用<audio>标签
在这个示例中，我们将使用 < audio>和 < source>标签来提供音乐的 id 和 src 以及将它们与JavaScript代码嵌入在一起。在这里，我们会通过在JavaScript代码中提供其链接来获取来自互联网的哔哔声。
<html>
<head>
<title> Beep sound on button click </title>
</head>
<body>
<center>
<h2> Example: Beep a sound </h2>
<h4> Press the Button to beep a sound </h4>
<!-- Use audio tab to provide an id to sound for further using it in JavaScript code -->
<audio id="beepAudio" >
<!-- Provide a link of beep sound from internet -->
<source src= "https://www.soundjay.com/button/sounds/beep-01a.mp3">
</audio>
<button onclick="beepSound()"> Click to beep </button>
<script>
//user-defined function to play a beep sound
var audio = document.getElementById(' beepAudio');
function beepSound () {
audio.play()
}
</script>
</center>
</body>
</html>
输出
在Web浏览器上执行代码；它将显示如下屏幕截图中显示的输出：
在这里，点击 Click to beep 按钮会发出一声哔哔声。每次点击该按钮时，一个函数将被触发，并且会播放一段哔哔声。
使用JavaScript播放和暂停声音
除了哔哔声，你还可以使用任何其他声音来在按钮点击时播放，同时也可以使用JavaScript的pause()函数停止播放该声音。
这些play()和pause()函数与程序员提供的声音对象一起使用。
示例3
看看这个示例，它是如何实际完成的：
<html>
<body>
<center>
<h2 style="color:brown"> Example: Play and Pause a sound </h2>
<audio id="myAudio">
<!-- provide the address of the sound to be played -->
<source src="https://www.soundjay.com/free-music/sounds/barn-beat-01.mp3">
Your browser does not support the audio element.
</audio>
<p><b> Click the buttons to play or pause the audio. </b></p>
<!-- create a button to play the music -->
<button onclick="playAudio()" > Play Audio </button>
<br><br>
<!-- create a button to pause the music -->
<button onclick="pauseAudio()" > Pause Audio </button>
</center>
</body>
<script>
var sound = document.getElementById("myAudio");
//function to play the audio
function playAudio() {
sound.play();
}
//function to pause the audio
function pauseAudio() {
sound.pause();
}
</script>
</html>
输出
当在网页上执行上述代码时，你将得到一个包含两个按钮的输出。一个按钮用于播放声音，另一个按钮用于在需要时暂停/停止声音。
点击 播放音频 以播放音轨，点击 暂停音频 按钮停止播放声音。
当您播放音乐时，浏览器上会出现一个音乐按钮。
示例4：使用<embed>标签
以下示例是另一个在按钮点击时发出“嘟嘟”声音的示例。在这个示例中，我们将使用HTML的<embed>标签，并在src参数中提供来自互联网的“嘟嘟”声音的链接。
<html>
<head>
<title> Beep sound on button click </title>
</head>
<body>
<center>
<h2 style="color:brown"> Example: Beep a sound </h2>
<h4> Press the Button to beep a sound </h4>
<!-- Use embed to provide the link of beep sound from internet -->
<embed src="https://www.soundjay.com/button/sounds/beep-01a.mp3" autostart="false" width="0" height="0" id="sound1"
enablejavascript="true">
<button onclick="playSound('sound1')"> Click to beep </button>
<script>
//user-defined function to play a beep sound
function playSound(beepSound) {
//get the sound in JavaScript variable and play it
var audio = document.getElementById(beepSound);
audio.play() ;
}
</script>
</center>
</body>
</html>
输出
与上一个示例类似，执行上述代码后，此代码将在下面的屏幕截图中显示输出：
在这里，点击 点击发出蜂鸣声 按钮发出声音。每次点击此按钮时，将触发一个功能并播放蜂鸣声。
注意：我们建议您使用<audio>或<video>标签在您的网站中嵌入声音或视频。