jQuery: HTML5 audio control floating only when playing

Question

I am using the following script to with the audio controls class="box follow-scroll" to make it float while the page is scrolling. But I was wondering if it possible to make it float only while the audio is in either play or pause mode? If it stopped it didn't start, it stays where it is.

$(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);

});

The 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>

Add event listeners to your audio element. Have a look at this answer: https://stackoverflow.com/a/35537318/4746087 — Kurt Van den Branden, Dec 12 '18 at 08:09
Yes it should work.. but I am not sure how to implement it with the code.. Can you add a reply with the edited script as suggested? Thanks. — Mike, Dec 12 '18 at 08:25

Kurt Van den Branden · Accepted Answer · 2018-12-12T16:35:48.247

Add two eventlisteners to your audio element. One that starts floating when your audio is playing, and one that resets your audio element when it is paused. In the following example the stopFloating() resets your audio element by setting var scrollTop = 0; to zero. You can of course further tune this function.

Something like:

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);    
    });
}

jQuery: HTML5 audio control floating only when playing

1 Answers1