Background music: stop the music when the widget is out of sight

Ask the Community Customization
1

Hey!

How can I stop the music from playing when the widget is not visible on the page?

I just want to add some pbackground music to an audio story, I dont know how to do it. So I got two different audioplayers.

The problem is that the music keeps on playing forever.

How can I make it stop?

1 Like
3

Hey @javier_f2, happy to see you in the community, welcome! :raised_hands:t2:

Although the widget doesn’t support an option to implement your use case, our devs have prepared a JS code that should do the trick.

Please add the following code to the Custom JS field on your widget’s Styles tab:

const listenerBlock = (selector, callback) => {
  const uniqueBlocks = new Set();

  const initialTargetNode = document.querySelector(selector);
  if (initialTargetNode && !uniqueBlocks.has(initialTargetNode)) {
    uniqueBlocks.add(initialTargetNode);
    callback(initialTargetNode);
  }

  const mutationObserver = new MutationObserver((mutations, observer) => {
    for (const mutation of mutations) {
      for (const node of mutation.addedNodes) {
        if (node.nodeType === Node.ELEMENT_NODE) {
          const targetNode = node.querySelector(selector);
          if (targetNode && !uniqueBlocks.has(targetNode)) {
            uniqueBlocks.add(targetNode);
            observer.disconnect();
            callback(targetNode);
          }
        }
      }
    }
  });

  mutationObserver.observe(document.body, {
    childList: true,
    subtree: true
  });
};

listenerBlock('[class*="AudioPlayer__Component-sc"]', (player) => {
  let isPlaying = true;

  const intersectionObserver = new IntersectionObserver(
    ([{ isIntersecting }]) => {
      if (!isPlaying && isIntersecting) {
        widget.player.play();
        isPlaying = true;
      }

      if (isPlaying && !isIntersecting) {
        widget.player.pause();
        isPlaying = false;
      }
    }
  );

  intersectionObserver.observe(player);
});

Let me know if it worked :blush: