triggering audio start/stop w/scroll

je5c

been doing a lot of digging for relevant info, but i can't find good examples of audio files being triggered and paused in response to the viewport and/or scrolling. i assume processing would be the best bet. any tips/suggestions?

blindfish

I can't find any mention of 'scroll' in the p5js docs, so you may have to use raw JavaScript or another library (jQuery being the obvious one). As for your digging: you just need to find out how to trigger an event on scroll (less specific search so more likely to find an answer) then in that event play your audio file as normal...

je5c

thanks - i had a feeling i'd end up needing to start from that point but was hoping i'd overlooked something to reference.

blindfish

Having looked into it you don't necessarily need an additional library - just depends on your requirements. Simple proof of concept:

var last_known_scroll_position = 0;
var ticking = false;
var debounce = true;

var p5 = new p5(function (p) {    

    p.setup = function () {
        p.createCanvas(600, 400);

        // artificially set the height of the document
        document.getElementsByTagName('body')[0].style = "height: 1024px";

        // adapted from from: https://developer.mozilla.org/en-US/docs/Web/Events/scroll
        window.addEventListener('scroll', function(e) {
          last_known_scroll_position = window.scrollY;
          if (!ticking) {
            window.requestAnimationFrame(function() {
              triggerEvent(last_known_scroll_position);
              ticking = false;
            });
          }
          ticking = true;
        });

    };

    p.draw = function() {

    }

}, "sketch01");


function triggerEvent(last_known_scroll_position) {

    if(last_known_scroll_position > 400 && debounce) {
        console.info("foo")
        debounce = false;
    }

    if(last_known_scroll_position < 100 && !debounce) {
        console.info("bar")
        debounce = true;
    }
}

The numbers in triggerEvent are arbitrary. If you want to trigger an event when a particular element comes into view you could dynamically get the element's y position and use the above approach. Alternatively a different tack is to ignore scroll position and trigger an event when an element becomes visible. Doing that may be a dark art so with this approach it may be simpler to use a library...

Just to be clear mixing in additional libraries with p5js is perfectly possible; but I'd recommend using instance mode as I have above: otherwise you'll find out why p5js's decision to put everything in the global namespace is really bad. I'd also suggest lightweight libraries wherever possible.

GoToLoop

http://p5js.org/reference/#/p5/mouseWheel

je5c

thanks @blindfish - i may need some time to see how this will work (still relatively new to js). fingers crossed...

je5c

appreciate the reference @gotoloop - what are your thoughts on how the audio would fit into the mouseWheel code?

GoToLoop

Dunno. The only thing certain is that the mouse's wheel has rolled.
We can also get its delta in order to know whether it was up or down.