How to make beep sound in JavaScript?

A beep sound is usually used for the notification alert in websites. There may be some other cases where you need to use a beep sound in your website.

You can find several real-life examples of this beep sound, such as in grocery stores, libraries, and many more places. This chapter will show you how to use a beep sound in a website using JavaScript programming language.

Following are the cases that we will discuss in this chapter:

Alert notification
Make a website more interactive

In this chapter, we will show you how to play a beep sound on a button click.

Where to use beep sound

Most of the time, you have noticed that a sound emits at the time of barcode scanning; it indicates to a successful scanning. This sound is a beep sound used by the programmer to send a signal to the user of successfully scanning.

Besides this, you have also heard this beep sound in videos several times to mute some part of the sound. There might be some other cases where this beep sound is used. It helps to make a site more interactive.

Implementation

To beep a sound on a button click using JavaScript, it does not require a lengthy code to implement. However, you need to embed the source of the beeping music using the HTML tab and provide the link of the audio in src.

We will take an example where on button click, we will call a user-defined function that will contain the code of beep sound.

Apart from that, we will use the play() function of JavaScript to play the music or sound provided in the code. Following is an example to play a beep sound.

Example 1

This is the most simple and shortest code to play a beep sound using the JavaScript programming language. In this example, we will use the beep music direct from the internet by providing its link in JavaScript code and play it on click.

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>

Test it Now

Output

On executing this code on the web-browser, it will show you the output as shown in the below screenshot along with a button:

When you click on this Press Button, it will play a beep sound.

Example 2: using <audio> tab

In this example, we will use <audio> and <source> tabs to provide the id and src of music and embed them with JavaScript code. Here, we will take the beep sound from the internet by providing its link in 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://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>

Test it Now

Output

Execute the code on the web-browser; it will show you the output as shown in the below screenshot:

Here, click on the Click to beep button to beep a sound. Each time when you click this button, a function will trigger and a beep sound will play.

Play and Pause a sound using JavaScript

Other than the beep sound, you can use any other sound to play it on button click as well as you can stop playing that sound using the pause() function of JavaScript.

These play() and pause() function is used with the object of sound provided in the function by the programmer.

Example 3

Look at the example for this how it will be actually done:

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://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>

Test it Now

Output

When you execute the above code on the web, you will get the output having two buttons. One for playing the sound and another to pause/stop the sound in between if you want.

Click on the Play Audio to play the track and the Pause Audio button to stop playing the sound between.

You will get a music button on the browser when you play the song.

Example 4: Using <embed> tag

The following example is another example to beep a sound on button click. In this example, we will use the <embed> tab of HTML to provide the link of beep sound in the src parameter 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://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>

Test it Now

Output

Similar to the previous example, this code will show you the output as shown in the below screenshot on executing the above code:

Here, click on the Click to beep button to beep a sound. Each time when you click this button, a function will trigger and a beep sound will play.