CODEWITHSUNDEEP
javascripthtml
Basiyath T Zubair
Basiyath T Zubair

Reputation: 39

How do play an audio file on a button click using HTML and JavaScript?

This code only returns a volume icon and a link property, doesn't play audio file:

function playSound() {
  var sound = document.getElementById("audio");
  sound.play();
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="name">
  My name is
  <div>
    <a><i class="fa fa-volume-up" style="font-size:24px" onclick="playSound()"></i></a>
  </div>
  Basiyath Zubair
  <audio id="audio" src="./audio/name.mp3"></audio>
</div>

Upvotes: 1

Views: 4700

Answers (2)

Alessio Cantarella
Alessio Cantarella

Reputation: 5201

If you assign the correct URL to the src attribute of audio, it will work, e.g.

function playSound() {
  var sound = document.getElementById("audio");
  sound.play();
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="name">
  My name is
  <div>
    <a><i class="fa fa-volume-up" style="font-size:24px" onclick="playSound()"></i></a>
  </div>
  Basiyath Zubair
  <audio id="audio" src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3">
    Your browser does not support the <code>audio</code> element.
  </audio>
</div>

Upvotes: 1

Joystick
Joystick

Reputation: 304

Try this, it may work for you

<!DOCTYPE html>
<html>
<body>
<audio id="myAudio">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
<p>Click the buttons to play or pause the audio.</p>
<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button>
<script>
    var x = document.getElementById("myAudio"); 

    function playAudio() { 
      x.play(); 
    } 

    function pauseAudio() { 
     x.pause(); 
    }
</script> 
</body>
</html>

Upvotes: 1

Related Questions