Re-trigger embed code after pagination loading content

Attributes
19

Thank you @lincoln!

Now this should be copy/paste ready as I tested it multiple times. Great music by the way!

You can replace all of the code inside you </body> tag with this

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      console.log('cmsfilter Successfully loaded!');

      const [filterInstance] = filterInstances;
      const { listInstance } = filterInstance;
      const items = listInstance.items;
      const globalPlayBtn = document.querySelector('#globalplaybtn');

      items.forEach((item) => {
        const trackContainerElement = item.element;
        const trackDataContainer = trackContainerElement.querySelector('.hidden_div');

        const uniqueID = trackDataContainer.querySelector('.uniqueid').textContent;
        const slug = trackDataContainer.querySelector('.slug').textContent;
        const trackLink = trackDataContainer.querySelector('.tracklink').textContent;
        const trackName = trackDataContainer.querySelector('.trackname').textContent;

        const trackData = { uniqueID, slug, trackLink, trackName };
        createWaveSurfer(trackData);
      });

      function createWaveSurfer(config) {
        const { uniqueID, slug, trackLink, trackName } = config;

        const wavesurfer = WaveSurfer.create({
          container: `#${slug}`,
          progressColor: '#ffffff',
          waveColor: '#ffffff',
          barGap: 2,
          barWidth: 1,
          height: 65,
          cursorWidth: 0,
          url: trackLink,
          // Add more configuration options as needed
        });

        wavesurfer.on('decode', () => {
          const button = document.querySelector(`#${uniqueID}`);
          button.onclick = () => {
            globalPlayBtn.src =
              'https://assets-global.website-files.com/61f6c90352d29627cd69a979/661cdf7333f7a2a70dbd9b21_pause.png';

            document.getElementById('globaltracktitle').innerHTML = trackName;

            if (window.wavesurferBottom) {
              window.wavesurferBottom.destroy();
            }

            window.wavesurferBottom = WaveSurfer.create({
              container: '#globalwaveform',
              cursorColor: '#4facb3',
              progressColor: '#525252',
              waveColor: '#00eeff',
              barGap: 2,
              barWidth: 1,
              height: 65,
              // Add more configuration options as needed
            });

            window.wavesurferBottom.load(trackLink);
            window.wavesurferBottom.on('decode', () => {
              window.wavesurferBottom.play();
            });

            const globalButton = document.querySelector('#globalbutton');
            globalButton.onclick = () => {
              if (window.wavesurferBottom.isPlaying()) {
                globalPlayBtn.src =
                  'https://assets-global.website-files.com/61f6c90352d29627cd69a979/661cdf745c4247757e19b954_play-buttton.png';
                window.wavesurferBottom.pause();
              } else {
                globalPlayBtn.src =
                  'https://assets-global.website-files.com/61f6c90352d29627cd69a979/661cdf7333f7a2a70dbd9b21_pause.png';
                window.wavesurferBottom.play();
              }
            };

            // Current time & duration
            const formatTime = (seconds) => {
              const minutes = Math.floor(seconds / 60);
              const secondsRemainder = Math.round(seconds) % 60;
              return `${minutes}:${secondsRemainder.toString().padStart(2, '0')}`;
            };

            const timeEl = document.querySelector('#globaltime');
            const durationEl = document.querySelector('#globalduration');

            window.wavesurferBottom.on('decode', (duration) => {
              durationEl.textContent = formatTime(duration);
            });

            window.wavesurferBottom.on('timeupdate', (currentTime) => {
              timeEl.textContent = formatTime(currentTime);
            });
          };
        });

        return wavesurfer;
      }

      filterInstance.listInstance.on('renderitems', (renderedItems) => {
        renderedItems.forEach((item) => {
          const trackContainerElement = item.element;
          const trackDataContainer = trackContainerElement.querySelector('.hidden_div');

          const uniqueID = trackDataContainer.querySelector('.uniqueid').textContent;
          const slug = trackDataContainer.querySelector('.slug').textContent;
          const trackLink = trackDataContainer.querySelector('.tracklink').textContent;
          const trackName = trackDataContainer.querySelector('.trackname').textContent;

          const trackData = { uniqueID, slug, trackLink, trackName };
          createWaveSurfer(trackData);
        });
      });
      filterInstance.listInstance.on('switchpage', (targetPage) => {
        if (window.wavesurferBottom.isPlaying()) {
          globalPlayBtn.src =
            'https://assets-global.website-files.com/61f6c90352d29627cd69a979/661cdf745c4247757e19b954_play-buttton.png';
          window.wavesurferBottom.pause();
        } else {
          console.log('No audio playing');
          window.wavesurferBottom.pause();
        }
      });
    },
  ]);
</script>

Please let me know how it goes!

1 Like