Spotify와 Yandex Music용 Pomodoro 타이머

# 음악 서비스용 포모도로 타이머 북마크렛

원격 개발자들은 자주 방해가 되는 알림과 싸웁니다. 집중력을 유지하는 한 가지 방법은 포모도로 기법으로, 타이머에 맞춰 음악을 자동으로 일시정지하는 것입니다. 이를 위해 북마크렛을 사용합니다: 브라우저 북마크로 저장된 JavaScript 코드 조각으로, 설정된 시간 후 음악을 일시정지합니다. 별도의 앱이 필요 없습니다.

핵심 아이디어? Spotify를 25분 후 일시정지하는 것입니다. 기본 코드는 setTimeout을 사용해 일시정지 버튼을 클릭합니다:

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

여기서 setTimeout은 콜백과 밀리초 단위 지연 시간을 인자로 받습니다. 셀렉터 [data-testid='control-button-playpause']는 버튼을 타겟팅하고, .click()은 클릭을 시뮬레이션합니다. 25분의 경우: 1000 60 25입니다.

간단한 접근법의 문제점과 해결 방법

기본 스크립트에는 단점이 있습니다: 수동 입력 필요, 콘솔에서만 실행, 버튼을 찾지 못하면 오류 발생, Spotify 한정입니다.

북마크렛을 사용하세요. javascript: 접두사와 코드를 가진 북마크를 만듭니다:

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

버튼 확인과 알림을 추가하세요:

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

    if (!stopButton) {
        alert("일시정지 버튼을 찾을 수 없음 😭");
        return;
    }

    setTimeout(() => {stopButton.click()}, 5000);
    alert("타이머 시작됨 🍅⏰")
})()

타이머 제어: 시작과 중지

세션을 취소하려면 타이머 ID를 쿠키에 저장하세요. 전체 코드는 활성 타이머를 확인하고 clearTimeout으로 중지하거나 새 타이머를 시작합니다:

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("일시정지 버튼을 찾을 수 없음 😭");
        return;
    }

    if (timerID) {
        clearTimeout(Number(timerID));
        alert(`타이머 중지됨`);
        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(`타이머 ${time / 1000 / 60}분 시작됨`);
})()

쿠키는 타이머 만료나 중지 시까지 ID를 유지합니다. 페이지를 새로고침해도 작동합니다.

인기 음악 서비스 지원

getPauseButton 함수로 여러 플랫폼을 지원하세요. 도메인에 맞는 셀렉터를 선택합니다:

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

최종 전체 코드:

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("일시정지 버튼을 찾을 수 없음 😭");
        return;
    }

    if (timerID) {
        clearTimeout(Number(timerID));
        alert(`타이머 중지됨`);
        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(`타이머 ${time / 1000 / 60}분 시작됨`);
})()

주요 포인트

• 북마크렛은 쿠키에 타이머 ID를 저장해 페이지 새로고침 없이 중지 가능.
• 도메인 기반 switch로 Spotify, Yandex Music, Zvuk, VK, YouTube에 맞는 일시정지 버튼 셀렉터 선택.
• 버튼 확인으로 오류 방지; 알림으로 상태 업데이트.
• 확장 프로그램 없이 모든 브라우저에서 실행—중고급 개발자에게 딱.
• data-testid, aria-label, aria-keyshortcuts에 의존해 안정적.

— Editorial Team