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.
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:
(() => {
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:
- 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, andaria-keyshortcutsfor reliability.
— Editorial Team
No comments yet.