How to play sound through HTML buttons

Question

My current method of playing music through my website is by the HTML audio tags. However I want to be able to play it through HTML button instead. This button should be able to toggle the music between playing and stopping. I've created an example on JSFiddle but don't know how to implement it. Could someone please show me how to do it using my JSFiddle example?

JSFiddle: http://jsfiddle.net/jTh3v/332/

Original way I done it:

document.getElementById("soundTag").innerHTML = "<audio controls volume preload='none' src='http://www.sousound.com/music/healing/healing_01.mp3'></audio>";

Possible duplicate of [Html 5 audio tag custom controls?](http://stackoverflow.com/questions/7638754/html-5-audio-tag-custom-controls) — Mike Scotty, Aug 26 '16 at 08:21

score 6 · Answer 1 · answered Aug 26 '16 at 08:48

you can play sound by onclick event...insert a button on html.write a function and call it at your button as onclick event.

function playMusic(){
  var music = new Audio('musicfile.mp3');
  music.play();
  }

<input type="button" value="sound" onclick="playMusic()" />

Make sure to give a valid filename.

score 1 · Answer 2 · answered Aug 26 '16 at 08:45

This will work:

document.getElementById("soundTag").innerHTML = "<audio controls volume preload='none' src='http://www.sousound.com/music/healing/healing_01.mp3'></audio>";

$('#button_play').on('click', function() {
 //I added this
 $("audio")[0].play();
  
  $('#button_pause').show();
  $('#button_play').hide();
});
$('#button_pause').on('click', function() {
 //I added this
 $("audio")[0].pause();
  
  $('#button_play').show();
  $('#button_pause').hide();
});

.second {
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <p>Instead of doing the audio tag method, I want to do it through the buttons. However I don't know how to do this.</p><br>

  <p>HTML Audio tag method (the method I don't want):</p>
  <div id="soundTag"></div><br>

  <p>Button method (the method I want, but doesn't work):</p>
  <div>
    <button id="button_play" class="first" type="button">
      <i class="glyphicon glyphicon-volume-up"></i></button>
    <button id="button_pause" class="second" type="button">
      <i class="glyphicon glyphicon-volume-off"></i></button>
  </div>

The music was nice. Thank you for the tutorial too! However, is there any way to hide the music player but keep the button so that it keeps running in the background? — Abhigyan, Aug 25 '23 at 04:55

Vanidia Fortes · Answer 3 · 2020-11-02T15:18:02.123

This worked. Delete my mp3 file and upload your own mp3 file.

<button id="ASong" onClick="playPause()">
  <audio
    src="file_example_MP3_700KB.mp3"
    autoplay
    loop
  ></audio>
  Song
</button>

<script>
  var aud = document.getElementById("ASong").children[0];
  var isPlaying = false;
  aud.pause();

  function playPause() {
    if (isPlaying) {
      aud.pause();
    } else {
      aud.play();
    }
    isPlaying = !isPlaying;
  }
</script>

user1952854 · Answer 4 · 2016-08-26T08:48:19.980

try it like this


    $('#button_play').on('click', function() {
      $('#button_pause').show();
      $('#button_play').hide();
      $('audio')[0].play();
    });
    $('#button_pause').on('click', function() {
      $('#button_play').show();
      $('#button_pause').hide();
      $('audio')[0].pause();
    });

The idea here is to take the audio element from the array that returns and use the methods for the HTML5 tag. All the methods you can find from here

score 0 · Answer 5 · answered Nov 08 '20 at 17:36

Play and pause buttons.

Info and code comes from https://www.w3schools.com/jsref/met_audio_play.asp

I put it on this http://jsfiddle.net/654qasw0/ (changing sound sources)

<!DOCTYPE html>
<html>
<body>

<audio id="myAudio">
  <source src="https://upload.wikimedia.org/wikipedia/commons/1/11/H_is_for_horse.ogg" type="audio/ogg">
  <source src="http://www.u86news.com/Music/Sounds/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>

score 0 · Answer 6 · answered Nov 08 '20 at 18:32

Try this:

<!DOCTYPE html>
<html>
<body>

<audio id="myAudio">
  <source src="https://upload.wikimedia.org/wikipedia/commons/1/11/H_is_for_horse.ogg" type="audio/ogg">
  <source src="http://www.u86news.com/Music/Sounds/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>

or:

<button id="ASong" onClick="playPause()">
  <audio
    src="file_example_MP3_700KB.mp3"
    autoplay
    loop
  ></audio>
  Song
</button>

<script>
  var aud = document.getElementById("ASong").children[0];
  var isPlaying = false;
  aud.pause();

  function playPause() {
    if (isPlaying) {
      aud.pause();
    } else {
      aud.play();
    }
    isPlaying = !isPlaying;
  }
</script>

if they don't work just try this:

    $('#button_play').on('click', function() {
  $('#button_pause').show();
  $('#button_play').hide();
  $('audio')[0].play();
});
$('#button_pause').on('click', function() {
  $('#button_play').show();
  $('#button_pause').hide();
  $('audio')[0].pause();
});

How to play sound through HTML buttons

6 Answers6

Linked