Play Sound On Click Using JavaScript

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 Using JavaScript. This tutorial will show you how to make a Play Sound On Button Click. Here’s a button I made. When you click on that button, the sound will start playing.

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.

50+ HTML, CSS & JavaScript Projects With Source Code

This project is intended for beginners. This project will teach you how to add a 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.

Simple Portfolio Website Using Html And Css With Source Code

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.

Responsive Resume/CV Website Using HTML & CSS

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+ JavaScript Projects With Source Code ( Beginners to Advanced)

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.

ADVERTISEMENT

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.”

ADVERTISEMENT

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.”

ADVERTISEMENT

Restaurant Website Using HTML and CSS

ADVERTISEMENT

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.

ADVERTISEMENT

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.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

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

How to create a sound on button click?

We will add an event listener to the button to use the javascript function to produce music when the button is clicked. The function will launch when the user presses the button, and we’ll use the audio’s play() method to start the sound.



Leave a Reply