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:
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 :
13 Mar, 2020
Like Article
Save Article