Question

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

这是我一直在使用的代码，但无济于事：

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

奇怪的是，如果我在＆＃34; playingaudio = true＆＃34;中设置断点，则此代码有效。 A onclick事件处理程序中的行，但是在没有断点的情况下执行时，它无法完成所需的操作。

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

Answer 1

此代码按您的要求运行。

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

mock：我没有你的audioplayer或你的模态，但建立了它们的简单版本。手动暂停后显示模态按钮，然后单击按钮模拟隐藏模态。

关键变化：

你需要使用触发器进行播放和暂停。控制台抱怨'游戏'没有定义。如果它适合你，它可能只是调用音频播放器方法而不是你的方法。
仅在init和播放/暂停时更新playaudio，这样可以更轻松地不会意外覆盖您的代码所在的逻辑

重新开始播放的逻辑向后，因为你只想暂停播放。

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

});

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

2 个答案: