Back to Home

Pomodoro timer for Spotify and Yandex Music

The article describes creating a bookmarklet for Pomodoro timer in music services. The code detects the platform by domain, manages the timer via cookie and pauses playback. Suitable for developers needing concentration automation.

Automatic Pomodoro for music in the browser
Advertisement 728x90

Pomodoro Timer Bookmarklet for Music Services

Remote developers often battle distracting notifications. One way to stay focused is the Pomodoro technique with automatic music pauses on a timer. This is done via a bookmarklet: a JavaScript snippet saved as a browser bookmark that pauses your music after a set time—no extra apps needed.

The core idea? Pause Spotify after 25 minutes. The basic code uses setTimeout to click the pause button:

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

Here, setTimeout takes a callback and delay in milliseconds. The selector [data-testid='control-button-playpause'] targets the button, and .click() simulates a press. For 25 minutes: 1000 60 25.

Google AdInline article slot

Issues with the Simple Approach and How to Fix Them

A basic script has flaws: manual entry required, runs only in the console, breaks if no button is found, and it's Spotify-only.

Enter the bookmarklet. Create a bookmark with the javascript: prefix and your code:

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

Add button checks and alerts:

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

    if (!stopButton) {
        alert("No pause button found 😭");
        return;
    }

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

Timer Controls: Start and Stop

To cancel a session, store the timer ID in a cookie. The full code checks for an active timer, stops it with clearTimeout, or starts a new one:

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 pause button found 😭");
        return;
    }

    if (timerID) {
        clearTimeout(Number(timerID));
        alert(`Timer stopped`);
        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(`Timer started for ${time / 1000 / 60} min`);
})()

Cookies hold the ID until the timer expires or is cleared on stop. Reload the page and it still works.

Support for Popular Music Services

Extend to multiple platforms with a getPauseButton function that matches the domain to the right selector:

Google AdInline article slot
  • 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']

Full final code:

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 pause button found 😭");
        return;
    }

    if (timerID) {
        clearTimeout(Number(timerID));
        alert(`Timer stopped`);
        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(`Timer started for ${time / 1000 / 60} min`);
})()

Key Points

  • Bookmarklet uses cookies to store the timer ID, allowing stops without page reloads.
  • Domain-based switch picks the right pause button selector for Spotify, Yandex Music, Zvuk, VK, and YouTube.
  • Button checks prevent errors; alerts show status updates.
  • Runs in any browser without extensions—perfect for mid-to-senior devs.
  • Selectors rely on data-testid, aria-label, and aria-keyshortcuts for reliability.

— Editorial Team

Advertisement 728x90

Read Next