播放/停止隐藏的音轨

Question

我有一个 ASIDE 元素，当使用 Jquery UI 单击按钮时，我将其设置为从右侧滑入和滑出。默认情况下它处于关闭状态。它包含 HTML5 音频。我希望在幻灯片打开时从头开始播放音频，并在幻灯片关闭时停止播放，这样它就像只在幻灯片打开时播放的背景音乐曲目。我希望音频不会在其父元素的显示设置为“无”时播放，但事实并非如此。

我实际上有两个控制滑动元素的按钮。一个是切换按钮，另一个是在滑动元素内部作为关闭按钮。

$(document).ready(function() {
  $("#AnsExpl_btn a").click(function() {
    $("aside").toggle("slide", { direction: "right" });
  });
  $("#AnsExpl_x a").click(function() {
    $("aside").hide("slide", { direction: "right" });
  });
});

我尝试了在网上找到的不同可能的 Jquery/Javascript 解决方案，但没有任何效果。任何帮助将不胜感激，因为我认为我已经用尽了 Google 搜索。

Answer 1

您可以简单地暂停并与按钮同步播放 - 假设您的音频元素是在变量 audio 中获得的：

var audio = $('#bgtrack')[0]; // get native audio element

$("#AnsExpl_btn a").click(function() {
    $("aside").toggle("slide", { direction: "right" });
    audio.currentTime = 0;
    audio.play();
});

$("#AnsExpl_x a").click(function() {
    $("aside").hide("slide", { direction: "right" });
    audio.pause();
});

设置位置是异步的，如果设置正确，您应该监听seeked 事件然后播放：

audio.addEventListener('seeked', function() {this.play()}, false);

$("#AnsExpl_btn a").click(function() {
    $("aside").toggle("slide", { direction: "right" });
    audio.currentTime = 0;
});

更新：FIDDLE