单击时重新启动音频和动画？答案

【问题标题】：Restart audio and animation on click?单击时重新启动音频和动画？
【发布时间】：2013-11-08 15:56:12
【问题描述】：

请看这个小提琴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();
}
})

【问题讨论】：

标签： javascript jquery animation audio click

【解决方案1】：

要重新开始音频，您可以使用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】：

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

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

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

【讨论】：