How to Play Sound on Button Click in JavaScript

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

Hopefully using the tutorial above you will know how to create Play Sound on Button Click.
Related Post:

1. Responsive Footer HTML CSS
2. International Schools in Bangalore
3. Simple Stopwatch using JavaScript
4. JavaScript Password Generator
5. IB Schools in Hyderabad
6. Sidebar Menu Using HTML CSS

I have previously created many JavaScript web elements for beginners. Please comment on how you like this onclick play audio button.

Comments

[EirBec]

Thank you for this post! I created a account just to thank you. This worked perfect. Keep up the good work

[EirBec]

Could you also add the js code for stopping the sound/song when u re-click the button?