Question

请看这个小提琴http://jsfiddle.net/rabelais/zDu2s/1/

点击播放/暂停音乐时有三个小节。 div也可以点击动画。

动画完成后，会出现一个刷新按钮，并将动画宽度重置为0.

我的问题是如何在点击刷新按钮时重启歌曲和动画。

我只显示下面的一小部分代码，因为有这么多，一个人真的想看看上面的小提琴，看看所有的代码。

var $sounds = $('.sound'),
$bars = $('#sound-bars .bars');
$bars.click(function () {
var $this = $(this),
    $target = $($this.data('target')),
    target = $target[0];
$bars.not(this).removeClass('playing');
$sounds.not($target).each(function () {
    this.pause();
});

$this.toggleClass('playing');
if ($this.hasClass('playing')) {
    target.play();
} else {
    target.pause();
}
})

Answer 1

您应该能够在刷新按钮单击事件中触发单击事件。

$("#refresh-1").click(function () {
    $(".alt0").width(0);
    $("#one").removeClass('active');
    $("#one").trigger("click");
    $(this).hide();
})

您可能需要修改刷新代码以清除任何阻止立即再次播放声音/动画的类。我能够使用.removeClass('active')

Answer 2

要重新启动音频，您可以使用currentTime并将其设置为0.正如@Robb建议的那样，您还可以触发特定条的单击以开始动画。您还需要从栏中删除playing和active类。

$('#refresh-1').click(function () {
   $('.alt0').width(0);
   $('.alt0').stop();
   $(this).hide();
   $('#sound-1')[0].pause();
   $('#sound-1')[0].currentTime = 0;
   $('#one').removeClass('active playing');
   $('#one').click();
})

我假设条形图的动画应该显示音轨的当前位置与总持续时间的关系。您可以使用音频API功能duration来获取音频文件的总持续时间（以秒为单位），然后您可以在动画的持续时间内使用它，如下所示：

var $this = $(this),
    $target = $($this.data('target')),
    target = $target[0];
$('.alt0').animate({ //start animation
   width: $(this).width()
}, target.duration * 1000, "linear", function () {
   $("#refresh-1").show();
});

单击重新启动音频和动画？

2 个答案: