如何区分人为和程序触发的音频暂停事件

Question

所以，我想要实现的是，当用户单击 A 元素时，bootstrap 模态 window 会出现并暂停正在播放的任何音频。模态关闭后，应恢复音频。

这是我一直在使用的代码，但没有用：

playingaudio = false; // global variable

$(document).on("click", "a", function(){

if (playingaudio && $('#audioplayer').length) {
  $('#audioplayer')[0].pause(); // pause audio programatically
  playingaudio = true;
}

// show modal code

});

$('#myModal').on('hidden.bs.modal', function () {
// if there is an audioplayer and it is paused, resume playback
if (playingaudio && $('#audioplayer').length) {
   $('#audioplayer')[0].play();
}

});

$('#audioplayer').on('play', function() {
  playingaudio = true;
});

$('#audioplayer').on('pause', function(e) {
  playingaudio = false;
});

奇怪的是，如果我在 A onclick 事件处理程序中的 "playingaudio = true" 行中设置断点，此代码可以正常工作，但是在没有断点的情况下执行时，它无法执行预期的操作。

关于如何使这项工作有任何想法吗？

Answer 1

此代码按您的要求工作。

调试：我添加了一个中央函数来管理更改变量，因此它可以在控制台和标签中提供调试输出，这样您就可以在 html 视图中看到播放状态。

模拟：我没有你的音频播放器或模态，但构建了它们的简单版本。手动暂停后模态按钮显示，单击按钮模拟隐藏模态。

关键变化：

您确实需要使用触发器来播放和暂停。控制台抱怨 'play' 未定义。如果它对你有用，它可能只是调用音频播放器方法而不是你的方法。
仅在 init 和 play/pause 中更新 playingaudio 可以更轻松地避免意外覆盖您的代码的逻辑

重新开始播放的逻辑是倒退的，因为您只想在暂停时播放。

<div id="audioplayer">
  <div>
    <span>Playing Mode: </span>
    <span class='playing_mode_label'></span>
  </div>
  <br>
  <a href="#">a button</a>
  <br>
  <button class="play_button">play button</button>
  <br>
  <br>
  <button class='fake_modal'>fake modal - click to close</button>
</div>


// start out not playing
set_playing_mode(false, "init");
$('.fake_modal').hide();

$(document).on("click", "a", function() {

  if (playingaudio && $('#audioplayer').length) {
    $('#audioplayer').trigger('pause'); // pause audio programatically
    $('.fake_modal').show(); // show modal
  }

});

// play button
$('.play_button').on('click', function() {
  $('#audioplayer').trigger('play');
});


$('.fake_modal').on('click', function() {
    $('.fake_modal').hide();  //hide modal
  // if there is an audioplayer and it is paused, resume playback
  if (!playingaudio && $('#audioplayer').length) {
    $('#audioplayer').trigger('play');
  }

});

$('#audioplayer').on('play', function() {
  set_playing_mode(true, "play");
});

$('#audioplayer').on('pause', function(e) {
  set_playing_mode(false, "pause");
});

function set_playing_mode(mode, note) {
  playingaudio = mode;
  console.log(note + ": " + mode);
  $('.playing_mode_label').text(mode);
}

https://jsfiddle.net/azroc6sf/

Answer 2

好的，所以我终于解决了！我把答案分享给大家。感谢您的大力帮助！

<audio controls id='audioplayer'>
<source src='http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3' type='audio/mpeg'>
Your browser does not support the audio element.
</audio>

<div>
  <div>
    <span>Playing Mode: </span>
    <span class='playing_mode_label'></span>
  </div>
  <br>
  <a href="#">a button</a>
  <br>
  <button class='fake_modal'>fake modal - click to close</button>
</div>

$('.fake_modal').hide();

$(document).on("click", "a", function() {
var audioplayer = $('#audioplayer');

if (audioplayer.length) { // if there is an audioplayer
  if (!audioplayer.prop('paused') && audioplayer.prop('currentTime')) {
    audioplayer.trigger('pause'); // pause audio
    playingaudio = true;
  } else {
    playingaudio = false;
  }
}

$('.fake_modal').show(); // show modal

});

$('.fake_modal').on('click', function() {
    $('.fake_modal').hide();  //hide modal
  var audioplayer = $('#audioplayer');
    if (playingaudio && audioplayer.length) { // if there is an audioplayer
        audioplayer.trigger("play");
    }

});

如何区分人为和程序触发的音频暂停事件

How to differentiate human and programatically triggered audio pause event

html

jquery

events

html5-audio

pause