Hey there,
This is outside our coding background. Basically we have HowlerJS library that plays audio on clicking on an element. When paginating to a new page, the library no longer works.
hey @info2! You’ll need to reselect the buttons used on each newly rendered page. We can use the CMS Load callback function for this.
Can you replace the code in your </body> section with this?
<script>
Howler.autoUnlock = true;
function toggleAudioMute() {
const isMuted = $(this).toggleClass('muted').hasClass('muted');
Howler.mute(isMuted);
}
function initializeSongButton(button) {
const url = button.find('.songs_url').text();
const song = new Howl({
src: [url],
volume: 0.1,
onend: () => button.removeClass('playing'),
});
button.on('click', () => {
$('.songs_button.playing').not(button).click();
button.toggleClass('playing');
if (button.hasClass('playing')) {
song.play();
} else {
song.stop();
}
});
}
function initializeAudioAndSongs() {
$('.audio').on('click', toggleAudioMute);
$('.songs_button').each(function () {
initializeSongButton($(this));
});
}
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsload',
(listInstances) => {
console.log('cmsload Successfully loaded!');
initializeAudioAndSongs();
const [listInstance] = listInstances;
listInstance.on('renderitems', () => {
console.log(listInstance.renderedItems);
initializeAudioAndSongs();
});
},
]);
</script>
You’ll also want to look into fs-cmsload-resetix = true so that the new items have the correct interaction on hover.
Note: Initial states on interactions will break the resetix option. Please simulate the initial state with effects or other classes.