How to Play Sound on Button Click in JavaScript

#javascript #webdev #beginners #html

If you want to create JavaScript Play Sound On Click then this tutorial is for you. I have created a button here. When you click on that button, the sound will play.

This type of play sound on click you can use it everywhere in the webpage or in a certain element. In most cases we hear a beep sound in the button. So Beep Sound has been used here too. But you can use any other sound if you want. Watch its live demo to learn how it works.

✅ 100+ Best JavaScript Projects

Very little JavaScript has been used to create this Play Sound Button. If you know a little JavaScript you can easily create it.

HTML Code:
The button was created by the following html code. Here the button function of html is used.

<button>Click me!</button>

CSS Code:
Buttons are designed with some simple css. First I designed the webpage with some code. Then I designed the button and added the hover effect.

* {
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;
}

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;
}

button:hover {
cursor: pointer;
background: #053056;
}

JavaScript Code:
Now play sound on click html has been activated by JavaScript.

First line I added audio using JavaScript. Here I have used beep sound. You can use any audio.
Then a global constant of buttons is set.
Then the sound in the 'audio' is linked to the button by the onclick event. Then I have used the play () method here to play the audio. play () method starts playing the current audio.

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

buttons.forEach(button => {
  button.addEventListener("click", () => {
    audio.play();
  });
});