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解决方案，但没有任何效果。任何帮助将不胜感激，因为我认为我已经筋疲力尽了谷歌搜索。

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

播放/停止隐藏的音轨

1 个答案: