javascript - 如何禁用html5音频元素播放/暂停按钮

Question

通过html5音频元素中的“播放/暂停”按钮禁用或阻止事件的方式是什么？

我正在尝试这样的事情:

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

单独使用时可以使用，但是我的问题是我想在单击音频元素所在的div时控制播放/暂停:

<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;
    }
});

因此当我使用音频元素的暂停/播放按钮时，这会导致冲突。因此，我正在寻找一种方法来防止发生播放/暂停音频元素控件的事件(但不是整个控件，因为我需要使用搜寻栏和音量)。

Answer 1

play和pause不是jQuery方法。尝试在.play()元素上调用.pause()，<audio>

$(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