Pomodoro-Timer für Spotify und Yandex Music

Pomodoro-Timer-Bookmarklet für Musikdienste

Remote-Entwickler kämpfen oft mit ablenkenden Benachrichtigungen. Eine Methode, um fokussiert zu bleiben, ist die Pomodoro-Technik mit automatischer Musikpause nach einem Timer. Das geht über ein Bookmarklet: ein JavaScript-Snippet, das als Browser-Lesezeichen gespeichert wird und die Musik nach einer festen Zeit pausiert – ohne zusätzliche Apps.

Das Grundprinzip? Spotify nach 25 Minuten pausieren. Der einfache Code nutzt setTimeout, um auf die Pausentaste zu klicken:

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

Hier nimmt setTimeout eine Callback-Funktion und eine Verzögerung in Millisekunden. Der Selektor [data-testid='control-button-playpause'] zielt auf die Taste ab, und .click() simuliert einen Klick. Für 25 Minuten: 1000 60 25.

Probleme des einfachen Ansatzes und wie man sie behebt

Ein simpler Skript hat Schwächen: Manuelle Eingabe nötig, läuft nur in der Konsole, bricht ab, wenn keine Taste gefunden wird, und funktioniert nur bei Spotify.

Hier kommt das Bookmarklet ins Spiel. Erstelle ein Lesezeichen mit dem Präfix javascript: und deinem Code:

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

Füge Tastenprüfungen und Meldungen hinzu:

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

    if (!stopButton) {
        alert("Keine Pausentaste gefunden 😭");
        return;
    }

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

Timer-Steuerung: Starten und Stoppen

Um eine Sitzung zu beenden, speichere die Timer-ID in einem Cookie. Der vollständige Code prüft auf einen aktiven Timer, stoppt ihn mit clearTimeout oder startet einen neuen:

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("Keine Pausentaste gefunden 😭");
        return;
    }

    if (timerID) {
        clearTimeout(Number(timerID));
        alert(`Timer gestoppt`);
        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 gestartet für ${time / 1000 / 60} Min`);
})()

Cookies halten die ID bis zum Ablauf des Timers oder bis zum manuellen Stopp. Seite neu laden? Funktioniert trotzdem.

Unterstützung für beliebte Musikdienste

Erweitere auf mehrere Plattformen mit einer getPauseButton-Funktion, die die Domain mit dem passenden Selektor abgleicht:

• 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']

Vollständiger Finalcode:

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("Keine Pausentaste gefunden 😭");
        return;
    }

    if (timerID) {
        clearTimeout(Number(timerID));
        alert(`Timer gestoppt`);
        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 gestartet für ${time / 1000 / 60} Min`);
})()

Wichtige Punkte

• Bookmarklet speichert Timer-ID in Cookies, Stopp möglich ohne Neuladen.
• Domain-basierter Switch wählt passenden Selektor für Spotify, Yandex Music, Zvuk, VK und YouTube.
• Tastenprüfungen verhindern Fehler; Meldungen zeigen Status.
• Läuft in jedem Browser ohne Erweiterungen – ideal für erfahrene Entwickler.
• Selektoren basieren auf data-testid, aria-label und aria-keyshortcuts für Zuverlässigkeit.

— Editorial Team