How to make beep sound using JavaScript

5 min readFeb 22, 2021

We can use a beep sound for the notification alert in websites. There may be some other cases where we need to use a beep sound in our website.

We Know some real-life examples of this beep sound, such as in grocery shops, airport, harbor, libraries, and many more places. In this article we can see how to use a beep sound in a website using JavaScript programming language.

We will see how to play a beep sound on a button click…

We no need to require a lengthy code to make a beep sound on a button click using JavaScript.

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

In here we will use the play_beep() 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 simple 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.


<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_beep()"> Press Button </button>   <script>
//JavaScript function to play the beep sound
   function play_beep()
 {
     var beepsound = new Audio(
'https://www.soundjay.com/button/sounds/beep-01a.mp3');
     beepsound.play_beep();
 }   </script>
  </center>
 </body>
</html>

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. — 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.



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

Output

Execute the code on the web-browser; it will show we 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, wecan use any other sound to play it on button click as well as we 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:

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

Output

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

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

We 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.


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