Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to make a beep sound in JavaScript ?

  • Last Updated : 13 Mar, 2020

A beep sound in a website can be used for the following tasks:

  • Alert notification
  • Make the website more interactive

There can be many more use cases of these sounds. It all depends on one’s creativity and needs. Usually, we create a function in Javascript and call that function whenever required. In this tutorial, we are using a button to play the “beep” sound using the onclick method.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Method 1: Use Audio function in Javascript to load the audio file.




<!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>
    <h1>Press the Button</h1>
  
    <button onclick="play()">Press Here!</button>
  
    <script>
        function play() {
            var audio = new Audio(
            audio.play();
        }
    </script>
</body>
</html>

Output:

Method 2: Use the audio tag in html and play it using Javascript.




<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
  
<body>
    <h1>Press the Button</h1>
  
    <audio id="chatAudio" >
        <source src=
        type="audio/mpeg">
    </audio>
    <button onclick="play()">Press Here!</button>
   
    <script>
        var audio = document.getElementById('chatAudio');
        function play(){
            audio.play()
        }
    </script>
</body>
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!