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

Solution 1

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.

Solution 2

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>