Play sound file on certain frame of sequence

Hi,

This is not possible now out of the box as part of the plugin. But because you are not the first one to ask for similar functions ie: Play a video after the sequence finishes is on our roadmap for future versions.

Nevertheless, below is a simple snippet, that listens to the scroll position and once the user scrolls past certain point (100px) it plays the sound.

// Reference: https://www.html5rocks.com/en/tutorials/speed/animations/

let lastKnownScrollPosition = 0;
let ticking = false;
let audio = new Audio('audio_file.mp3');
let isMusicPlaying=false;

function doSomething(scrollPos) {
  // Here goes the play music logic 
   if (scrollPos > 100 && isMusicPlaying === false){
    audio.play();
    isMusicPlaying = true;
   }
}

document.addEventListener('scroll', function(e) {
  lastKnownScrollPosition = window.scrollY;

  if (!ticking) {
    window.requestAnimationFrame(function() {
      doSomething(lastKnownScrollPosition);
      ticking = false;
    });

    ticking = true;
  }
});

I haven’t tested it myself, but the idea is simple – listen for scroll position to be bigger than certain value (100), and then play the music.

Please let me know if it works for you

Ales

Thank you for the snippet, however it is not working or I have not implemented it correctly. Do I enclose it within
<script> snippet here </script>
And then insert that into the “Fixed content” or the “content editor” of the scrollsequence page?
https://staging-u2atrainer.kinsta.cloud/scrollsequence/advanced-laser-training-pistol/ Here is a URL where I have implemented it.

Hi Rskagy15b,

Due to security reasons it’s impossible to enter Javascript code into the content editor. You have to add the script just before the end of </body> tag, or use a plugin that allows you to enter custom scripts.

And secondly – yes the code should be enclosed in SCRIPT tags.

OK I have gotten this to work, however there is an exception in the code. Is there any way to bypass this? It is not counting the user scrolling as “interacting”. It seems the article https://goo.gl/xX8pDD referenced only counts interactions as clicks or taps.

ncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD
doSomething @ (index):16
(anonymous) @ (index):26
requestAnimationFrame (async)
(anonymous) @ (index):25

Can it be updated to include this part from that article? How would you go about making this code display a button on a certain scene of the scrollsequence?

You should always look at the Promise returned by the play function to see if it was rejected:

var promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}

• This reply was modified 3 years, 9 months ago by rskagy15b.
• This reply was modified 3 years, 9 months ago by rskagy15b.