How to Play Sound On Click Using JavaScript

If you want to add a beep sound to the button using javascript then this article will help you.

In this article, you will learn how to create Javascript Audio Play on click. You can create this kind of play sound on click HTML in many ways. One of the simplest methods is the OnClick Attribute and .play () method.

If you use only 3 lines of JavaScript, you will hear a beep sound by clicking on the button. Although you can use any other audio here if you want.

Javascript Play Sound onclick

Many times we see that when we click on a button or a web element, the sound comes out of it. The OnClick Attribute is used for this.

Although I have added this DOM Audio play () Method in a button. But you can add it to any other element if you want.

See the Pen Untitled by Shantanu Jana (@shantanu-jana) on CodePen.

I used HTML, CSS, and JavaScript to make it. However, JavaScript is much easier to use here. First designed the button using HTML and CSS. Then the audio is played using JavaScript's onClick attribute.

How to Play a Sound on Click with JavaScript

Here I have given step by step tutorial, live preview, and source code. Use what you need.

Step 1: Create a button

Button's basic design has been done using the following HTML and CSS code. Here I first created buttons using HTML's button function. Then I designed the webpage with some CSS.

<button>Click me!</button>

* {

margin: 0;

padding: 0;

border: none;

box-sizing: border-box;

-webkit-tap-highlight-color: transparent;

}

html,

body {

height: 100%;

}

body {

display: flex;

align-items: center;

justify-content: center;

background: #dff0f6;

}

Step 2: Design the button with CSS

Now it's time to design the button using some CSS. Button's background blue color and test color white have been used. Button size depending on padding: 1.1rem 3.4rem.

button {

font-family: 'Open Sans', sans-serif;

font-size: 1.5rem;

color: #fff;

background: #034d85;

padding: 1.1rem 3.4rem;

border-radius: .2rem;

transition: opacity .2s;

}

Now the hover effect has been added to the button. The background color of the button will change when you hover over the button.

button:hover {

cursor: pointer;

background: #053056;

}

Step 3: Activate Play Sound On Click with JavaScript

Now you need to add a beep sound to the button using JavaScript. As a result, the sound will play when you click on that button.

Very simple JavaScript is used here. The audio was first stored. Then I was instructed to play the sound using the onClick attribute.
 
First, the link to the audio is stored in a global constant called 'audio'. Here I have used a beep sound. You can use any other sound here if you want.

const audio = new Audio("https://www.fesliyanstudios.com/play-mp3/387");

Now a global constant of buttons has been set.

const buttons = document.querySelectorAll("button");

Arrangements have now been made to play the audio. Arrangements have been made to play the audio using the play () method using the onClick attribute. This will cause the audio to play when you click on the button.

buttons.forEach(button => {

  button.addEventListener("click", () => {

    audio.play();

  });

});

Play Sound on Click HTML( Source Code )

The above code is so simple that you will not have any difficulty in making it (play sound on click HTML). However, if you want, you can download all the code from the code section below.

 If you have difficulty connecting the above codes together, then the following code section is for you.

See the Pen Untitled by Shantanu Jana (@shantanu-jana) on CodePen.

I hope you have learned from this tutorial how to create this javascript play audio from a URL. If there is any difficulty then you can definitely let me know by commenting. 

You can download the source code of this Play Audio button created by JavaScript below.

The download will start automatically