Raspberry Pi Spotify Status
Progress bar, no refresh for liking songs, better color algorithm
Spotify에 현재 재생되는 노래를 표시하는 웹 앱. 노래를 건너 뛰고 재생/일시 중지 및 좋아요/와는 달리 건너 뛸 수 있습니다. 앨범 아트 워크를 분석하여 이미지와 일치하는 배경 및 전경 색상을 선택합니다. 2 초마다 투표하여 디스플레이를 새로 고쳐서 현재 재생하는 노래를 보여줍니다. 동적 레이아웃을 사용하여 디스플레이의 크기로 비늘.
오픈 소스 Spotify Python API 인 Spotipy를 사용하여 Spotify 데이터의 RAW JSON을 표시하는 기본 사이트를 설정하여 프로젝트를 시작했습니다. 나중에, 나는 2 초마다 Spotify API를 폴링하기 위해 JavaScript를 작성하여 변경 사항을 확인했습니다. 노래가 변경되면 새 정보로 페이지가 새로 고침됩니다.
Colorthief라는 JavaScript 라이브러리를 사용하여 색상 팔레트를 계산하여 배경의 지배적 색상을 가져오고 텍스트의 팔레트에서 대조적 인 대체 색상을 사용합니다. 텍스트 색상은 검은 색 또는 흰색 일뿐 만 아니라 전체 팔레트를 형성하기 위해 몇 가지 다른 색상을 샘플링하고 선택한 배경색과 대조되는 팔레트에서 색상을 찾습니다.
재생 제어 아이콘에 Google 자료 기호를 사용합니다. 이를 통해 별도의 이미지없이 다른 화면 크기로 쉽게 확장 할 수 있습니다.
화면에 요소를 배열하고 다른 디스플레이의 스케일링을 얻는 것은 어려운 일이었습니다. 조경 화면이있는 PC에서 휴대폰과 같은 것에 대한 최소한 견딜 수있는 것으로 보이기를 원했습니다. 완벽하지는 않지만 상당히 견고합니다. 또한, 검은 색 대신 텍스트가 흰색이어야하는 시점을 찾는 것은 어려웠습니다. 그 순간에 어떤 노래를 연주하든 노래 세부 사항을 쉽게 읽을 수 있는지 확인해야했습니다.
이 웹 앱을 호스팅 할 수있는 여러 가지 방법이 있습니다. 나는 개인적으로 fly.io를 사용합니다. 또한 Spotify Client ID 및 클라이언트 비밀을 얻으려면 Spotify 개발자 응용 프로그램을 설정해야합니다.
Spotify 개발자 계정이없는 경우 Spotify Developer 계정을 작성하고 새 앱을 만듭니다. 클라이언트 ID 및 클라이언트 비밀을 기록해야합니다. 다음 3 가지 옵션 중 하나를 사용하여 WebApp을 호스팅하십시오.
그런 다음 Spotify Developer Dashboard로 돌아가서 리디렉션 URI를 입력하십시오. 후행 슬래시를 제거하십시오. 기능적이어야합니다!
app.py 상단의 큰 주석으로 환경 변수 설정 및 로컬 호스팅에 대한 추가 정보가 있습니다.
원래 이것은 하버드 CS50 코스의 프로젝트였습니다. 그 이후로 나는 내 자신의 기능을 추가해 왔습니다. 별도의 지점에서 원래 CS50 버전을 볼 수 있습니다. 그 이후로, 나는 색상 감지 알고리즘을 크게 향상시켰다. 또한 음악이 재생되지 않을 때 라즈베리 파이의 화면을 끄기 위해 로컬 웹 서버를 호출하는 추가 코드 라인이 포함 된 지정된 "Raspi"브랜치가 있습니다.
색상 감지 및 화면 스케일링, 몇 가지 버튼 및 보너스 기능 등으로 버그를 수정하기 위해이 작업을 업데이트하려고합니다.
