Temporizador Pomodoro para Spotify y Yandex Music

Bookmarklet de Temporizador Pomodoro para Servicios de Música

Los desarrolladores remotos suelen luchar contra notificaciones distractivas. Una forma de mantener la concentración es la técnica Pomodoro con pausas automáticas de música en un temporizador. Esto se logra con un bookmarklet: un fragmento de JavaScript guardado como marcador de navegador que pausa tu música después de un tiempo establecido, sin necesidad de apps adicionales.

¿La idea principal? Pausar Spotify después de 25 minutos. El código básico usa setTimeout para hacer clic en el botón de pausa:

setTimeout(() => { document.querySelector("[data-testid='control-button-playpause']").click()}, 5000)

Aquí, setTimeout recibe una función de callback y un retraso en milisegundos. El selector [data-testid='control-button-playpause'] apunta al botón, y .click() simula una pulsación. Para 25 minutos: 1000 60 25.

Problemas del Enfoque Simple y Cómo Solucionarlos

Un script básico tiene fallos: requiere entrada manual, solo funciona en la consola, falla si no encuentra el botón y está limitado a Spotify.

Aquí entra el bookmarklet. Crea un marcador con el prefijo javascript: y tu código:

javascript:setTimeout(() => {
  document.querySelector("[data-testid='control-button-playpause']")
    .click()
}, 5000)

Agrega verificaciones de botón y alertas:

(() => {
    const stopButton = document.querySelector("[data-testid='control-button-playpause']");

    if (!stopButton) {
        alert("No se encontró el botón de pausa 😭");
        return;
    }

    setTimeout(() => {stopButton.click()}, 5000);
    alert("Temporizador iniciado 🍅⏰")
})()

Controles del Temporizador: Iniciar y Detener

Para cancelar una sesión, guarda el ID del temporizador en una cookie. El código completo verifica si hay un temporizador activo, lo detiene con clearTimeout o inicia uno nuevo:

javascript:(() => {
    const time = 1000 * 60 * 25;
    
    const stopButton = document.querySelector("[data-testid='control-button-playpause']");

    const timerID = document.cookie.split('; ').find(row => row.startsWith('myPomodoroMusic='))?.split('=')[1];

    if (!stopButton) {
        alert("No se encontró el botón de pausa 😭");
        return;
    }

    if (timerID) {
        clearTimeout(Number(timerID));
        alert(`Temporizador detenido`);
        document.cookie = `myPomodoroMusic=${timerID}; expires=${ new Date().toUTCString() }; path=/;`;
        return;
    }

    window.myPomodoroMusic = setTimeout(() => {stopButton.click()}, time);

    document.cookie = `myPomodoroMusic=${window.myPomodoroMusic}; expires=${ new Date(Date.now() + time).toUTCString() }; path=/;`;

    alert(`Temporizador iniciado por ${time / 1000 / 60} min`);
})()

Las cookies mantienen el ID hasta que expire el temporizador o se limpie al detenerlo. Recarga la página y sigue funcionando.

Soporte para Servicios de Música Populares

Extiéndelo a varias plataformas con una función getPauseButton que empareja el dominio con el selector correcto:

• Spotify: [data-testid='control-button-playpause']
• Yandex Music: [aria-label='Pause']
• Zvuk: [id='theme-provider'] > div > div > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > button:nth-of-type(2)
• VK Music: [data-testid='audio-player-controls-state-button']
• YouTube: [aria-keyshortcuts='k']

Código final completo:

javascript:(() => {
    const time = 1000 * 60 * 25;

    const getPauseButton = () => {
        const url = window.location.href;
        const domain = new URL(url).hostname;
        switch (domain) {
            case "open.spotify.com":
                return document.querySelector("[data-testid='control-button-playpause']");
            case "music.yandex.ru":
                return document.querySelector("[aria-label='Pause']");
            case "zvuk.com":
                return document.querySelector("[id='theme-provider'] > div > div > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > button:nth-of-type(2)");
            case "vk.com":
                return document.querySelector("[data-testid='audio-player-controls-state-button']");
            case "www.youtube.com":
                return document.querySelector("[aria-keyshortcuts='k']");
            default:
                return null;
        }
    }
    
    const stopButton = getPauseButton();

    const timerID = document.cookie.split('; ').find(row => row.startsWith('myPomodoroMusic='))?.split('=')[1];

    if (!stopButton) {
        alert("No se encontró el botón de pausa 😭");
        return;
    }

    if (timerID) {
        clearTimeout(Number(timerID));
        alert(`Temporizador detenido`);
        document.cookie = `myPomodoroMusic=${timerID}; expires=${ new Date().toUTCString() }; path=/;`;
        return;
    }

    window.myPomodoroMusic = setTimeout(() => {stopButton.click()}, time);

    document.cookie = `myPomodoroMusic=${window.myPomodoroMusic}; expires=${ new Date(Date.now() + time).toUTCString() }; path=/;`;

    alert(`Temporizador iniciado por ${time / 1000 / 60} min`);
})()

Puntos Clave

• El bookmarklet usa cookies para guardar el ID del temporizador, permitiendo detenciones sin recargar la página.
• Un switch por dominio selecciona el selector correcto de pausa para Spotify, Yandex Music, Zvuk, VK y YouTube.
• Las verificaciones de botón evitan errores; las alertas muestran actualizaciones de estado.
• Funciona en cualquier navegador sin extensiones, ideal para desarrolladores intermedios y senior.
• Los selectores se basan en data-testid, aria-label y aria-keyshortcuts para mayor fiabilidad.

— Editorial Team