Sound generation on clicking the button using JavaScript

Read

Discuss

The sound generation after clicking the button, receiving notifications or at the time of page load can be done by using JavaScript.

Note:

URL provided in the playSound function can be changed to give the custom sound url.
Style property is not the part of implementation. It is used to provide a nice interface for viewers.

Example: This example generating the sound after clicking the button.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Sound generation after clicking the button 
    </title> 
      
    <link rel="stylesheet" href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> 
      
    <script src='https://code.jquery.com/jquery-2.2.0.min.js'> 
    </script> 
    <script src= 
'https://cdn.rawgit.com/admsev/jquery-play-sound/master/jquery.playSound.js'> 
    </script> 
</head> 
  
<body style="text-align:center;"> 
    <div class="container-fluid" style="margin:35px;"> 
        <p style="font-size:30px;"> 
            <strong> 
                Click on the button to generate sound 
            </strong> 
        </p> 
          
        <br><br> 
      
        <button class="btn btn-primary" onclick= 
'$.playSound("http://tusharbaheti28.000webhostapp.com/notification.mp3")'> 
            Click Me! 
        </button> 
    </div> 
</body> 
  
</html>                     

Output:

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 16 Apr, 2019

Sound generation on clicking the button using JavaScript

Please Login to comment...