triggering audio start/stop w/scroll

edited April 2016 in p5.js

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?


  • 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...

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

  • 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:
            window.addEventListener('scroll', function(e) {
              last_known_scroll_position = window.scrollY;
              if (!ticking) {
                window.requestAnimationFrame(function() {
                  ticking = false;
              ticking = true;
        p.draw = function() {
    }, "sketch01");
    function triggerEvent(last_known_scroll_position) {
        if(last_known_scroll_position > 400 && debounce) {
            debounce = false;
        if(last_known_scroll_position < 100 && !debounce) {
            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.

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

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

  • Answer ✓

    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.

Sign In or Register to comment.