Yandex Music 플레이리스트 내보내기 JS 스크립트

DevTools에서 자바스크립트로 Yandex Music 플레이리스트 내보내기

개발자들은 Yandex Music에서 트랙 목록을 추출해 다른 서비스로 옮기거나, 백업하거나, 분석해야 할 때가 많습니다. 공식 내보내기 기능은 없지만, 자바스크립트 스크립트로 스크롤을 시뮬레이션해 문제를 해결할 수 있습니다. 이 스크립트는 브라우저 콘솔에서 실행되며, 가상화된 목록을 고려합니다: 트랙은 동적으로 로드되며, DOM에는 보이는 부분만 포함됩니다.

스크립트는 아티스트, 제목, 재생 시간 데이터를 수집해 TXT나 CSV로 내보냅니다. 수천 개의 트랙이 있는 플레이리스트도 몇 초 안에 처리됩니다.

준비 및 실행

• Yandex Music에서 원하는 플레이리스트를 엽니다.
• DevTools(F12)를 실행하고 Console 탭으로 이동합니다.
• 스크립트를 콘솔에 붙여넣고 실행합니다.
• 플레이리스트를 끝까지 스크롤합니다—스크립트가 모든 트랙을 캡처합니다.
• finalizeCapture() 명령을 실행해 마무리합니다.
• 제공된 링크로 파일을 다운로드합니다.

// 이 코드를 Console에 붙여넣으세요
let tracks = [];
const observer = new MutationObserver(() => {
  const items = document.querySelectorAll('[data-testid="track-row"]');
  items.forEach(item => {
    if (!item.dataset.captured) {
      const artist = item.querySelector('[data-testid="artist-name"]')?.textContent.trim();
      const title = item.querySelector('[data-testid="track-title"]')?.textContent.trim();
      const duration = item.querySelector('[data-testid="track-duration"]')?.textContent.trim();
      if (artist && title) {
        tracks.push({artist, title, duration});
        item.dataset.captured = 'true';
      }
    }
  });
});
observer.observe(document.body, {childList: true, subtree: true});

window.finalizeCapture = () => {
  observer.disconnect();
  const data = tracks.map(t => `${t.artist} - ${t.title}${t.duration ? ` (${t.duration})` : ''}`).join('\n');
  const blob = new Blob([data], {type: 'text/plain'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'playlist.txt';
  a.click();
  console.log(`Captured ${tracks.length} tracks`);
};

이 코드는 MutationObserver를 사용해 DOM의 새 요소를 추적합니다. 선택자는 Yandex Music의 현재 구조에 맞춰져 있습니다—변경 사항이 있으면 확인하세요.

출력 형식 및 예시

• TXT: 아티스트 - 제목 또는 재생 시간이 포함된 간단한 문자열 목록입니다.
• CSV: 스프레드시트로 가져올 수 있는 아티스트,제목,재생 시간 열입니다.

일렉트로닉 플레이리스트의 TXT 예시:

Daft Punk - One More Time
The Weeknd - Blinding Lights
Justice - D.A.N.C.E.

CSV 버전:

Daft Punk,One More Time,4:02
The Weeknd,Blinding Lights,3:20
Justice,D.A.N.C.E.,4:00

가상화된 목록은 수동 스크롤이 필요합니다: 스크립트는 차단을 피하기 위해 스크롤을 자동화하지 않습니다. 대규모 플레이리스트의 경우 휠 이벤트나 Page Down을 사용하세요.

기술 구현 세부 사항

가상화된 목록(예: react-window 기반)은 보이는 행만 렌더링해 메모리를 절약합니다. 표준 querySelectorAll은 20–50개의 트랙만 캡처하며, 나머지는 숨겨져 있습니다.

주요 스크립트 구성 요소:

• MutationObserver: 스크롤 중 DOM 노드 추가에 반응합니다.
• Dataset 플래그: 중복을 방지합니다(item.dataset.captured).
• Blob 및 URL.createObjectURL: 서버 없이 다운로드 가능한 파일을 생성합니다.
• data-testid 선택자: SPA에서 변경 가능성이 낮은 안정적인 선택자입니다.

CSV의 경우 변환을 추가하세요:

const csv = tracks.map(t => `${t.artist},"${t.title}",${t.duration || ''}`).join('\n');

정확한 CSV를 위해 제목의 따옴표 이스케이프를 처리하세요.

프로덕션을 위한 가능한 개선 사항

• 자동 스크롤: setInterval(() => window.scrollBy(0, 500), 100)에 일시 정지를 추가합니다.
• JSON 내보내기: JSON.stringify(tracks, null, 2).
• 앨범 지원: /artist/ 및 /album/에 유사한 선택자를 사용합니다.
• 필터: 트랙 ID로 중복을 제외합니다.
• 브라우저 확장 프로그램: 버튼 UI가 있는 콘텐츠 스크립트입니다.

다른 플레이리스트에서 테스트하세요—팟캐스트나 라이브 녹음의 경우 구조가 다를 수 있습니다.

핵심 포인트

• 스크립트는 API나 확장 프로그램 없이 브라우저에서만 작동합니다.
• 가상화된 목록을 고려합니다—스크롤 중에만 트랙을 수집합니다.
• TXT/CSV 내보내기는 Spotify, Apple Music으로 가져올 준비가 되어 있습니다.
• 수정이 쉽습니다: 트랙 ID나 커버 아트를 추가하세요.
• 분석에 유용합니다: 장르, 재생 시간별 통계.

— Editorial Team