jQuery: управление звуком в HTML5 только при воспроизведении

Question

Я использую следующий скрипт для управления аудиосистемой class = "box follow-scroll" , чтобы он плавал во время прокрутки страницы.Но мне было интересно, можно ли заставить его плавать, только когда звук находится в режиме play или pause mode?Если он остановился, он не запустился, он остается там, где он находится.

$(window).load(function(){

    (function($) {
        var element = $('.follow-scroll'),
            originalY = element.offset().top;

        var topMargin = 20;
        element.css('position', 'relative');

        $(window).on('scroll', function(event) {
            var scrollTop = $(window).scrollTop();

            element.stop(false, false).animate({
                top: scrollTop < originalY ? 0 : scrollTop - originalY + topMargin
            }, 300);
        });
    })(jQuery);

});

HTML:

<audio controls class="box follow-scroll">
<source src="http://techslides.com/demos/samples/sample.ogg" type="audio/ogg">
<source src="http://techslides.com/demos/samples/sample.mp3" type="audio/mpeg">
</audio>

Answer 1

Добавьте два eventlisteners к вашему аудио элементу.Тот, который начинает плавать, когда ваше аудио воспроизводится, и тот, который сбрасывает ваш аудио элемент, когда он приостановлен.В следующем примере stopFloating() сбрасывает ваш аудиоэлемент, устанавливая var scrollTop = 0; в ноль.Конечно, вы можете дополнительно настроить эту функцию.

Что-то вроде:

var element = $('.follow-scroll'), originalY = element.offset().top;

var topMargin = 20;
element.css('position', 'relative');

element[0].addEventListener("playing", function() {
    startFloating();
});

element[0].addEventListener("pause", function() {
    stopFloating();
});


function startFloating () {
    $(window).on('scroll', function(event) {

        var scrollTop = $(window).scrollTop();

        element.stop(false, false).animate({
                top: scrollTop < originalY ? 0 : scrollTop - originalY + topMargin
        }, 300);    
    });
}

// Reset your element
function stopFloating () {
    $(window).on('scroll', function(event) {

        var scrollTop = 0;

        element.stop(false, false).animate({
                top: scrollTop < originalY ? 0 : scrollTop - originalY + topMargin
        }, 300);    
    });
}