Play/Pause Button HTML5 Audio

Question

I'm trying to get HTML5 Audio to play/pause in one button. How would I possibly go around doing this? So the play button switches to the pause icon which is font awesome 'fa fa-pause' The code is here:

<audio id="myTune">
<source src="http://96.47.236.72:8364/;">
</audio>
<div class="btn-group btn-group-xs">
<a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview"     onclick="document.getElementById('myTune').play()"><i class="fa fa-play"></i></a>

Thank you!

Answer 1

You can put an id to the <i> tag and assign the fa fa-pause class when change of state:

<a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview" onclick="aud_play_pause()"><i id="stateicon" class="fa fa-play"></i></a>

<script>
  function aud_play_pause() {
    var myAudio = document.getElementById("myTune");
    if (myAudio.paused) {
      $('#stateicon').removeClass('fa fa-play');
      $('#stateicon').addClass('fa fa-pause');
      myAudio.play();
    } else {
      $('#stateicon').removeClass('fa fa-pause');
      $('#stateicon').addClass('fa fa-play');
      myAudio.pause();
   }
 }

Hope this helps

Answer 2

Give this a whirl:

function aud_play_pause() {
  var myAudio = document.getElementById("myTune");
  if (myAudio.paused) {
    myAudio.play();
  } else {
    myAudio.pause();
  }
}

<audio id="myTune" src="http://www.rachelgallen.com/HappyBirthday.mp3"></audio>


<button type="button"  onclick="aud_play_pause()">Play/Pause</button>