Snippet js reproductor música en todo el sitio WordPress

Snippet js reproductor música en todo el sitio WordPress:

js document.addEventListener('DOMContentLoaded', function () {
    if (!document.getElementById('custom-audio-player')) {
        const container = document.createElement('div');
        container.id = 'custom-audio-player';
        container.style = 'padding:20px;background:#f5f5f5;color:#000;text-align:center;margin-top:60px;';
        container.innerHTML = `
            <h3 style="margin-bottom:10px;">Reproductor Musical</h3>
            <button id="prev-btn" style="font-size:18px; padding:10px;">⏮️</button>
            <button id="play-pause-btn" style="font-size:18px; padding:10px;">▶️</button>
            <button id="next-btn" style="font-size:18px; padding:10px;">⏭️</button>
            <p id="track-title" style="margin:10px 0;">Cargando...</p>
            <audio id="audio-player" preload="auto" style="width:100%; max-width:500px;" controls></audio>
        `;
        document.body.appendChild(container);

        const playlist = [
            {
                title: "Sol Caribeño",
                url: "https://brayanstevenrendonmonsalve.com/wp-content/uploads/2025/05/Sol-Caribeno-1.mp3"
            },
            {
                title: "Vibrante",
                url: "https://brayanstevenrendonmonsalve.com/wp-content/uploads/2025/05/Vibrante.mp3"
            },
            {
                title: "Fuego",
                url: "https://brayanstevenrendonmonsalve.com/wp-content/uploads/2025/05/Fuego.mp3"
            }
        ];

        let currentTrack = localStorage.getItem('currentTrack') ? parseInt(localStorage.getItem('currentTrack')) : 0;
        let isPlaying = localStorage.getItem('isPlaying') === 'true';
        let savedTime = localStorage.getItem('currentTime') ? parseFloat(localStorage.getItem('currentTime')) : 0;

        const audio = document.getElementById('audio-player');
        const playBtn = document.getElementById('play-pause-btn');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        const titleSpan = document.getElementById('track-title');

        function loadTrack(index) {
            audio.src = playlist[index].url;
            titleSpan.textContent = playlist[index].title;
            localStorage.setItem('currentTrack', index);

            audio.addEventListener('loadedmetadata', () => {
                if (!isNaN(savedTime) && savedTime < audio.duration) {
                    audio.currentTime = savedTime;
                }

                if (isPlaying) {
                    audio.play().catch(e => console.warn("Autoplay bloqueado:", e));
                    playBtn.textContent = '⏸️';
                } else {
                    playBtn.textContent = '▶️';
                }
            }, { once: true });
        }

        playBtn.addEventListener('click', () => {
            if (audio.paused) {
                audio.play();
                playBtn.textContent = '⏸️';
                localStorage.setItem('isPlaying', 'true');
            } else {
                audio.pause();
                playBtn.textContent = '▶️';
                localStorage.setItem('isPlaying', 'false');
            }
        });

        prevBtn.addEventListener('click', () => {
            currentTrack = (currentTrack - 1 + playlist.length) % playlist.length;
            savedTime = 0; // reset time
            loadTrack(currentTrack);
        });

        nextBtn.addEventListener('click', () => {
            currentTrack = (currentTrack + 1) % playlist.length;
            savedTime = 0; // reset time
            loadTrack(currentTrack);
        });

        audio.addEventListener('ended', () => {
            currentTrack = (currentTrack + 1) % playlist.length;
            savedTime = 0; // reset time
            loadTrack(currentTrack);
        });

        // Guardar el tiempo actual antes de salir de la página
        window.addEventListener('beforeunload', () => {
            localStorage.setItem('currentTime', audio.currentTime);
        });

        // Cargar la pista inicial
        loadTrack(currentTrack);
        audio.volume = 0.1;
    }
});

---

✅ ¿Qué logra esto?.

• Al navegar entre páginas la música sigue desde donde quedó (posición, pista y estado).
• Volumen bajo al 10%.
• Funciona en cualquier página que cargue el mismo script (como un snippet global o footer común).

aquí tienes una explicación clara y paso a paso del código del reproductor musical persistente, incluyendo lo que hace cada parte:

---

🔧 1. DOMContentLoaded

js document.addEventListener('DOMContentLoaded', function () {

Esto asegura que el código solo se ejecute después de que la página HTML esté completamente cargada.

---

🧱 2. Verifica si ya existe el reproductor

jsCopiarEditar if (!document.getElementById('custom-audio-player')) {

Previene que se duplique el reproductor si el usuario navega y el código se vuelve a cargar.

---

🎵 3. Crea e inserta el HTML del reproductor

js const container = document.createElement('div');
container.innerHTML = ` ... `;
document.body.appendChild(container);

Se construye dinámicamente el reproductor y se lo añade al body, con controles de anterior, play/pause, siguiente y una etiqueta <audio> con controls.

---

🎶 4. Lista de canciones (playlist)

js const playlist = [
    { title: "Sol Caribeño", url: "..." },
    ...
];

Es un array de objetos con el title (para mostrar al usuario) y la url del archivo de audio.

---

💾 5. Carga de estado previo (track y reproducción)

js let currentTrack = localStorage.getItem('currentTrack') ? parseInt(...) : 0;
let isPlaying = localStorage.getItem('isPlaying') === 'true';
let savedTime = localStorage.getItem('currentTime') ? parseFloat(...) : 0;

Usa localStorage para recordar:

• qué canción estaba sonando (currentTrack)
• si estaba reproduciendo o pausada (isPlaying)
• en qué minuto y segundo quedó (currentTime)

---

🔁 6. Función loadTrack(index)

js function loadTrack(index) {
    audio.src = playlist[index].url;
    ...
}

• Carga la canción correspondiente al índice.
• Actualiza el título mostrado.
• Intenta poner el currentTime si se había guardado.
• Si estaba en reproducción (isPlaying), intenta reanudarla.

---

⏯️ 7. Botones de control

• Play/Pause:
  Cambia entre reproducir o pausar y actualiza localStorage.
• Anterior/Siguiente:
  Cambian el índice de la canción actual y recargan la pista desde el inicio.

---

⏱️ 8. Guarda la posición al salir

js window.addEventListener('beforeunload', () => {
    localStorage.setItem('currentTime', audio.currentTime);
});

Antes de que el usuario cierre o cambie de página, guarda el segundo exacto donde quedó.

---

🔊 9. Configuración final

jsCopiarEditaraudio.volume = 0.1;

Establece un volumen del 10%, como música ambiental para tiendas físicas.

---

✅ Resultado

Este script te permite tener un reproductor musical persistente que:

• Se mantiene igual entre páginas (pista + segundo + estado).
• Es discreto, con volumen bajo.
• Solo se inicia si el usuario da clic en Play (evita bloqueo de autoplay).