How to disable html5 audio element play/pause button

Question

What is the way to disable or prevent events from the play/pause button in the html5 audio element?

I am trying something like this:

document.getElementById(id).addEventListener("pause", function() {
    $(this).trigger("play");
});

This works when alone, but my problem is that I would like to control the play/pause when clicking on the div where the audio element is in:

<div id="my_div">
    <audio controls id="my_audio">
        <source src="my_song.mp3" type="audio/mpeg">
    </audio>
</div>

var is_playing;
$("#my_div").click(function () {
    if (is_playing) {
        $('#my_audio').trigger("pause");
        is_playing = false;
    } else {
        $('#my_audio').trigger("play");
        is_playing = true;
    }
});

so this causes conflict when I use the pause/play buttons of the audio element. So, I am searching a way to prevent the event of the play/pause audio element control (but not the whole controls as I need to use the seekbar and volume).

Answer 1

play and pause are not jQuery methods. Try calling .play() , .pause() on <audio> element

$(function() {
  var is_playing;
  $("#my_div").click(function(e) {
    // if `e.target` is not `<audio>` element
    if(e.target.tagName !== "AUDIO") {
      if (is_playing) {
        $('#my_audio')[0].pause();
        is_playing = false;
      } else {
        $('#my_audio')[0].play();
        is_playing = true;
      }
    } else {
      e.stopPropagtion()
    }
  });
});

plnkr http://plnkr.co/edit/l5NejZ4rvxTZLPghkFWF?p=preview