Play Sound On Click Using JavaScript

How to Play Sound On Click Using JavaScript

Play sound on click using javascript is a function that create a sound on clicking on the button as the user clicks on the button the click evenlistener triggers the sound click function and using the .play() function the sound that is stored inside the brackets starts playing.

If you want to add a beep sound to the button using javascript then this article will help you. “Play Sound onClick” in JavaScript refers to the ability to play an audio file when a button or other element is clicked. This can be accomplished using the HTML5 audio element and JavaScript play() method.

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

30+ Javascript Projects with Source Code

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.

 

Example: Click Me App!

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


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.

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

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.

 
Create a button

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;
}
Design the button with CSS

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;
}
Play Sound On Click with JavaScript

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.

How to Create a Snake Game In JavaScript (Free Code)

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.

 

The download will start automatically

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

play sound on button click in jquery

“Play Sound onclick” in jQuery refers to the ability to play an audio file when a button or other element is clicked using jQuery, a popular JavaScript library that simplifies the process of traversing and manipulating HTML documents.

This can be accomplished by using the jQuery click function to attach a click event to the button element, and then using the jQuery .play() method on the audio element to start playback.

First, create an HTML audio element with a source for the audio file you want to play. This can be done using the audio tag and the source tag, like so:

				
					<audio id="myAudio">
  <source src="myAudioFile.mp3" type="audio/mpeg">
</audio>

Next, create a button or other HTML element that will trigger the audio to play when clicked. You can use the button tag, or any other tag that you prefer. Add a class or id to the element, which will be used to select it with jQuery.

				
					<button id="playBtn">Play Sound</button>

In your JavaScript/jQuery file, use the jQuery click function to attach a click event to the button element. When the button is clicked, the audio element’s play() method will be called.

				
					$('#playBtn').click(function() {
  $('#myAudio')[0].play();
});

To add more functionality to your audio player, you can add more buttons or elements to control the audio, such as a “pause” button, a “mute” button, or a progress bar. You can also use jQuery methods like on, off, one, etc to add more functionality.

You can also add a listener for the ended event on the audio element and then do something like change the text of the play button to ‘play’ again, so that user can play the sound again.

				
					$('#myAudio').on('ended',function(){
  $('#playBtn').html('Play');
});

You can also add a listener for the play event on the audio element and then do something like change the text of the play button to ‘Pause’, so that user can pause the sound.

				
					$('#myAudio').on('play',function(){
  $('#playBtn').html('Pause');
});

This is a basic example of how to create an advanced audio player using jQuery, but there are many other features and functionality that you can add to make it even more robust.

Note that in the above example, the jQuery click function is used to attach a click event to the button element, but the same can be achieved using the on method as well like this:

				
					$('#playBtn').on('click', function() {
  $('#myAudio')[0].play();
});

and also you can achieve this by simply writing:

				
					$('#playBtn').click(() => $('#myAudio')[0].play());

Hopefully from the above tutorial you have learned how to create Play Sound On Click using jQuery.

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.

Source Code