Open In App

How to make a beep sound in JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

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.

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:



Last Updated : 13 Mar, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads