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

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

1 个答案: