play audio on button click html

Playing Audio on Button Click in HTML#

If you want to add an audio file to your HTML page and play it on the click of a button, you can do it by using the audio tag and the onclick attribute.

Step 1: Add the Audio File#

First, add the audio file to your HTML page using the audio tag. You can give it an ID or a class for easier identification:

<audio id="myAudio" src="audio-file.mp3"></audio>

Step 2: Add the Button#

Next, add a button to your HTML page that will trigger the audio file to play. You can also give it an ID or a class:

<button id="myBtn">Play Audio</button>

Step 3: Add JavaScript Code#

Finally, add JavaScript code to your HTML page that will play the audio file on the click of the button. You can use the onclick attribute to call a function that will play the audio:

<script>
  var audio = document.getElementById("myAudio");
  var btn = document.getElementById("myBtn");

  btn.onclick = function() {
    if (audio.paused) {
      audio.play();
      btn.innerHTML = "Pause Audio";
    } else {
      audio.pause();
      btn.innerHTML = "Play Audio";
    }
  };
</script>

This code creates two variables: one for the audio tag and one for the button tag. It then sets the onclick attribute of the button to a function that will play or pause the audio depending on its current state.

Multiple Ways to Do It#

There are multiple ways to play audio on button click in HTML. One way is to use the audio tag and the onclick attribute, as described above. Another way is to use the Audio() constructor in JavaScript:

<script>
  var audio = new Audio("audio-file.mp3");
  var btn = document.getElementById("myBtn");

  btn.onclick = function() {
    if (audio.paused) {
      audio.play();
      btn.innerHTML = "Pause Audio";
    } else {
      audio.pause();
      btn.innerHTML = "Play Audio";
    }
  };
</script>

This code creates a new Audio() object with the audio file URL as its argument. It then sets the onclick attribute of the button to a function that will play or pause the audio in the same way as before.

You can also use third-party libraries like jQuery or AngularJS to add audio to your HTML page and play it on button click. However, the basic steps remain the same: add the audio file, add the button, and add JavaScript code to play or pause the audio on click.

That's it! Now you can add audio to your HTML page and play it on button click using different methods.