Stop Other Playlists When One Is Playing – AudioIgniter Free WordPress Audio Player Plugin

August 21, 2026
Daniel
Blog, Development

AudioIgniter is the best WordPress plugin for displaying and playing audio files on your WordPress site.

However, with the free version of the plugin, if you have multiple playlists on the same page, you will encounter a limitation: other playlists won’t stop playing when a new one starts. This feature is only supported in the paid version of the plugin.

Here is a custom JavaScript code snippet you can add to your website to achieve this purpose:


/*
Use this AudioIgniter custom JavaScript snippet to pause other players when one starts playing; otherwise, you must buy the PRO version
*/
(function() {
    // 1. Flag to prevent infinite recursive click loops
    let isProcessing = false;

    // 2. Create an observer to watch for dynamic DOM modifications
    const observer = new MutationObserver(function(mutations) {
        if (isProcessing) return;

        mutations.forEach(function(mutation) {
            // Check if the change happened to an "aria-pressed" attribute
            if (mutation.type === 'attributes' && mutation.attributeName === 'aria-pressed') {
                const targetButton = mutation.target;

                // Ensure it is one of your AudioIgniter buttons and it was just turned ON
                if (targetButton.classList.contains('ai-track-inline-play-btn') &&
                    targetButton.getAttribute('aria-pressed') === 'true') {
                   
                    isProcessing = true; // Lock processes

                    // Find all OTHER buttons currently set to active/true
                    const activeButtons = document.querySelectorAll('.ai-track-btn.ai-track-inline-play-btn[aria-pressed="true"]');
                   
                    activeButtons.forEach(function(button) {
                        if (button !== targetButton) {
                            // Programmatically click the other button to pause it
                            button.click();
                        }
                    });

                    // Unlock processing after the event loop completes
                    setTimeout(function() {
                        isProcessing = false;
                    }, 50);
                }
            }
        });
    });

    // 3. Start observing the entire document for live attribute changes
    observer.observe(document.body, {
        attributes: true,
        subtree: true,
        attributeFilter: ['aria-pressed']
    });
})();

How to add this to WordPress: