You are currently viewing How to Play Sound On Button Click Using Javascript

How to Play Sound On Button Click Using Javascript

Hello Coders👨‍💻!! In this blog, we will look at how to make a bell sound when someone clicks on a button.

This javascript tutorial will show you how to make a on click play sound button. Here’s a button I made. When you click on that button, the sound will start playing.

How to Play Sound On Button Click Using Javascript

This type of click-and-play sound can be used anywhere on the page or in a specific element. In our project, we used a bell sound for the button. However, you are free to use any other sound you want.

This Play Sound Button was created with only a few lines of JavaScript. It’s simple to make if you know a little JavaScript.

This project is intended for beginners. This project will teach you how to  add click sound to any button or element.

I hope you must have got an idea about the project.

Let’s have a look at our Play Sound On Click.👇

How to Play Sound On Button Click Using Javascript
Play Sound On Button Click Using Javascript

Step1: Lets Start with adding some Basic HTML.

The HTML is hypertext markup language is the main structure of our webpage which will help us to display our content to the browser.

All the HTML document must start with <!doctypehtml> this helps the browser to understand the code written follows the lastest HTML format.

The HTML document itself begin With <html> and end with </html>.

The content that will be displayed in the brower comes under the body section <body></body>.Inside the body tag main content lies.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Play sound on click</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Sound On Click!!</h1>
  <div class="wrapper">
    <button class="button" type="button">Ting🔔!</button>
   </div>
   <script src="index.js"></script>   
</body>

If you’re working on this project in an IDE like (vscode, atom), we recommend creating separate files for html, CSS, and javascript code. This will help you manage your code and will help you understand it better in the future. So, in order to link a CSS and Javascript external file to our HTML, we must add their link to our HTML document.

Add this link to your head section for the CSS file (note: always check the CSS file name while adding it to the link).

<link rel="stylesheet" href="style.css">

For the JavaScript file, add this link under the body section.

<script src="index.js"></script>

The H1 tag will now be used to add the heading to our webpage.

Using the button tag, we will now create a button.

Now we have the added the basic structure of our webpage . Let’s us take a look at our HTML output.

Output:

 How to Play Sound On Button Click Using Javascript
HTML Structure

Step2: Adding the CSS Code.

Cascading Style Sheets (CSS) is a markup language for describing the presentation of a document written in HTML or XML. CSS, like HTML and JavaScript, is a key component of the World Wide Web.

100+ Front-end Projects for Web developers (Source Code)

Now we will look at our CSS code.

body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: skyblue;
}
h1{
  font-size: 4rem;
  color: #5d5d5d;
  text-align: center;

}
.button {
  font-size:15px;
  font-family:Arial;
  width:250px;
  height:100px;
  margin-top: 10%;
  margin-left: 42%;
  border-width:1px;
  color:#fff;
  border-color:#599bb3;
  font-weight:bold;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
  box-shadow: 0px 10px 14px -7px #276873;
  text-shadow: 0px 1px 0px #3d768a;
  background:linear-gradient(#599bb3, #408c99);
}

.button:hover {
  background: linear-gradient(#408c99, #599bb3);
}

After we’ve added the CSS code, we’ll go over it step by step. To save time, you can simply copy this code and paste it into your IDE. Let us now understand our code step by step.

Step1: Using the body tag, we will set the padding and margin to zero, as well as the box-sizing to “border-box.” We also call the background colour “skyblue.”

The H1 tag will now have a font size of 4 rem. In addition, we changed the colour of our heading to “Zambezi (light brown).” We also used the text-align property to align the text to “centre.”

body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: skyblue;
}
h1{
  font-size: 4rem;
  color: #5d5d5d;
  text-align: center;

}

Step2:We’ll style our button with the class selctor (.button). The font size of our button text is “15 px,” and the font family is “Arial.” We set the width and height of our button to “250 px” and “100 px,” respectively. We also set the top margin to 10%. We also use a linear gradient for the box shadow and background colour.

Using the hover selector, we will now add the hover property to our button. The background of the button changes as we move our mouse over it.

.button {
  font-size:15px;
  font-family:Arial;
  width:250px;
  height:100px;
  margin-top: 10%;
  margin-left: 42%;
  border-width:1px;
  color:#fff;
  border-color:#599bb3;
  font-weight:bold;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
  box-shadow: 0px 10px 14px -7px #276873;
  text-shadow: 0px 1px 0px #3d768a;
  background:linear-gradient(#599bb3, #408c99);
}

.button:hover {
  background: linear-gradient(#408c99, #599bb3);
}

Now we have completed our css code and below👇here is the output after styling our webpage.

Output:

How to Play Sound On Button Click Using Javascript
Click sound Design

 

Now that we’ve styled our webpage, we need to add the functionality of playing sound on click. So we must add some javascript function to our button. So, let us look at our JavaScript code.

Step3: Adding the Javascript Code.

function ding() {
    var sound = new  Audio("https://www.soundjay.com/misc/sounds/small-bell-ring-01a.mp3");  
    sound.play();
}


document.getElementsByTagName("button")[0].addEventListener("click", ding);

First, we’ll create a “ding” function. Within it, we will declare a variable called sound, which will hold the value of our Audio function Object() [native code]. We’ve included the URL of our “bell” sound in the audio file. if you want to add another sound you can simply paste another URL inside it in the format of an audio file (.mp3) .

The current audio is starts playing, using the sound.play() method.

We’ll now select our button with the tag selector and add an event listener “click” to it. When the user clicks the button, the ding function is invoked, and our audio begins to play.

Now that we’ve added functionality to our button, let’s take a look at our video output to get a better understanding of it.

Output:

Codepen Preview Play Sound On Button Click Using Javascript

Now We have Successfully added Play Sound On Click Using Javascript . You can use this project directly by copying into your  IDE. WE hope you understood the project , If you any doubt feel free to comment!!

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By : @arun
Code by : @arun

Leave a Reply