Перезапустить аудио и анимацию при нажатии?

Question

Пожалуйста, посмотрите на эту скрипку http://jsfiddle.net/rabelais/zDu2s/1/

Есть три бара, которые при нажатии на воспроизведение/пауза музыки. Дивы также ожидают нажатия.

Когда анимация завершена кнопка обновления появляется и сбрасывает ширину анимации в 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

Чтобы перезапустить аудио, вы можете использовать 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(); 
}) 

Предполагаю, что анимация бара должна показывать текущую позицию звуковой дорожки относительно общей продолжительности. Вы можете использовать Audio API Funciton 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(); 
}); 

Answer 2

Вы можете активировать событие клика в событии кликов кнопки обновления.

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

Вы, возможно, придется изменить код Обновлять, чтобы очистить все классы, которые мешают играть сразу звук/анимацию снова. Я смог с .removeClass('active')