the-music-player page_template

<div id="editor-tab-preview" class="card round secondary tab-container secondary round" style="height: max-content; max-height: initial; margin-bottom: 0px;">
    {{{ content }}}
    </div>

    <div class="flex justify-space-between g-4 full" id="paste-info-box">
    <div class="flex g-4 flex-wrap">
        {{{ edit_button }}}
        {{{ config_button }}}
    </div>

    <div class="flex flex-column g-2" style="color: var(--text-color-faded); min-width: max-content; align-items: flex-end;">
        <span class="flex g-4" id="paste-info-pub">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cake-slice"><circle cx="9" cy="7" r="2"/><path d="M7.2 7.9 3 11v9c0 .6.4 1 1 1h16c.6 0 1-.4 1-1v-9c0-2-3-6-7-8l-3.6 2.6"><path d="M16 13H3"><path d="M16 17H3"></svg>
            Pub: <span class="date-time-to-localize">{{ pub_date }}</span>
        </path></path></path></span>

        <span class="flex g-4" id="paste-info-edit">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pencil"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"><path d="m15 5 4 4"></svg>
            Edit: <span class="date-time-to-localize">{{ edit_date }}</span>
        </path></path></span>

        <span id="paste-info-owner">
            Owner: {{{ owner_button }}}
        </span>

        <span id="paste-info-views">Views: {{ views }}</span>
    </div>
    </div>
    <script>
    window.addEventListener('load', function() {
        const initMusicPlayer = function() {
            let musicPixel = document.querySelector('#musicpixel');
            let audio = document.querySelector('#musicsrc');
            let playButton = document.querySelector('.playpause');

            if (!musicPixel || !audio || !playButton) return;

            musicPixel.addEventListener('click', function() {
                if (playButton.innerHTML.includes('fa-play')) {
                    audio.play().catch(function(error) {
                        console.log("Audio play failed:", error);
                    });
                    playButton.innerHTML = '<i class="fas fa-pause"></i>';
                } else {
                    audio.pause();
                    playButton.innerHTML = '<i class="fas fa-play"></i>';
                }
            });
        };

        // Initialize player
        initMusicPlayer();

        // Re-initialize if content is dynamically loaded
        if (typeof window.onContentUpdate === 'function') {
            window.onContentUpdate(initMusicPlayer);
        }
    });
    </script>