Notes

initializeAudioEvents() {
const processedAudioElements = new Set();

// Function to attach events to audio elements
const attachAudioEvents = (audioElements) => {
audioElements.forEach((audio) => {
if (!processedAudioElements.has(audio)) {
processedAudioElements.add(audio);

// Play event listener
audio.addEventListener('play', function (event) {
// Synchronize processedAudioElements with all current audio tags
const currentAudioElements = document.querySelectorAll('audio');
currentAudioElements.forEach((el) => processedAudioElements.add(el));

// Get the title of the current audio
const title = audio.closest('.podcast-tile')?.querySelector('p:first-child')?.innerText;

const playEvent = new CustomEvent("audioEvent", {
detail: "play",
});
playEvent.title = title || null;
document.dispatchEvent(playEvent);

event.stopImmediatePropagation();

// Pause all other audio elements except the current one
processedAudioElements.forEach((otherAudio) => {
if (otherAudio !== audio && !otherAudio.paused) {
otherAudio.pause();
}
});
});

// Pause event listener
audio.addEventListener('pause', (event) => {
const title = audio.closest('.podcast-tile')?.querySelector('p:first-child')?.innerText;

const pauseEvent = new CustomEvent("audioEvent", {
detail: "paused",
});
pauseEvent.title = title || null;
document.dispatchEvent(pauseEvent);

event.stopImmediatePropagation();
});
}
});
};

// Attach events to all existing audio elements
const initialAudioElements = document.querySelectorAll('audio');
attachAudioEvents(initialAudioElements);

// Observe DOM for dynamically added audio elements
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
const newAudioElements = Array.from(mutation.addedNodes).filter(
(node) => node.tagName === 'AUDIO'
);

if (newAudioElements.length > 0) {
attachAudioEvents(newAudioElements);
}
});
});

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