A beep sound is commonly employed as a notification alert on websites. There could also be various other scenarios in which incorporating a beep sound into your website might be necessary.
Numerous real-world instances of this beep sound can be observed in locations such as supermarkets, libraries, and various other environments. In this chapter, you will learn how to implement a beep sound on a website utilizing the JavaScript programming language.
In this chapter, we will explore the following scenarios:
- Alert notification
- Enhancing website interactivity
In this section, we will demonstrate the process of generating a beep sound in response to a button click.
Where to use beep sound
Frequently, you may have observed that a sound is produced during the scanning of a barcode; this sound signifies a successful scan. This auditory cue is a beep, utilized by the programmer to communicate to the user that the scanning process has been completed successfully.
In addition to this, you have likely encountered the beep sound in various videos that often serves to silence certain portions of the audio. There are additional scenarios in which this beep sound is utilized. It contributes to enhancing the interactivity of a website.
Implementation
To produce a beep sound upon clicking a button with JavaScript, you don't need an extensive amount of code. Instead, you must incorporate the audio source for the beep within the HTML section and specify the audio link in the src attribute.
Let us consider a scenario in which, upon clicking a button, we will invoke a custom function that encapsulates the code responsible for generating a beep sound.
In addition to that, we will utilize the play method in JavaScript to initiate the playback of the audio or sound specified in the code. Below is an example demonstrating how to play a beep sound.
Example 1
This represents the simplest and most concise code to generate a beep sound utilizing the JavaScript programming language. In this illustration, we will directly employ a beep sound sourced from the internet by incorporating its URL within the JavaScript code, and it will be played upon a click event.
Copy Code
<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>
Output
Upon running this code in a web browser, you will see the output displayed as illustrated in the screenshot below, accompanied by a button:
Upon clicking this Press Button, a beep sound will be generated.
Example 2: using <audio> tab
In this demonstration, we will utilize the <audio> and <source> tabs to specify the id and src attributes of an audio file and incorporate them using JavaScript code. In this case, we will retrieve the beep sound from the web by including its URL within the JavaScript code.
Copy Code
<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://placehold.co/400x300/3498db/ffffff?text=Sample+Image">
</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>
Output
Run the code in your web browser; the output will be displayed as illustrated in the screenshot provided below:
To produce a sound, simply click on the "Click to beep" button. Every time you press this button, a function will be activated, resulting in a beep sound being heard.
Play and Pause a sound using JavaScript
In addition to the beep sound, you have the option to utilize any other audio clip that can be played upon a button click. Furthermore, you can halt the playback of that audio using the pause function available in JavaScript.
The functions play and pause are utilized in conjunction with the sound object that the programmer supplies within the function.
Example 3
Examine the following illustration for a practical demonstration of how this will be executed:
Copy Code
<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://placehold.co/400x300/3498db/ffffff?text=Sample+Image">
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>
Output
Upon running the aforementioned code on the web, the output will display two buttons. One button is designated for playing the sound, while the other allows you to pause or stop the sound at any point if you choose to do so.
Select the Play Audio button to initiate playback of the track, and utilize the Pause Audio button to halt the sound at any point during playback.
When you start playing a song, a music button will appear in your browser.
Example 4: Using <embed> tag
The subsequent illustration demonstrates how to produce a beep sound in response to a button click. In this instance, we will utilize the <embed> tag in HTML to specify the source of the beep sound within the src attribute, retrieving it from the internet.
Copy Code
<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://placehold.co/400x300/3498db/ffffff?text=Sample+Image" 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>
Output
In a manner akin to the earlier example, executing the code provided will yield the output depicted in the screenshot below:
To produce a sound, click the button labeled "Click to beep." Each time you press this button, a function will be activated, resulting in a beep sound being emitted.