SpotifyBigPicture

SpotifyBigPicture

아름다운 작은 브라우저 페이지에서 Spotify에 현재 재생 상태를 표시하는 고도로 사용자 정의 가능한 인터페이스!

당신은 이것을 Spotify 자신의 (내 의견으로는 압도적으로) 전체 화면 모드보다 사용하고 싶을 수도 있고, TV에 사용하여 구식의 저해상도 OSD 신선한 페인트 작업을 제공 할 수 있습니다!

이 인터페이스는 주로 읽기 전용입니다. 특히, 이것은 Play, Pause 및 Skip과 같은 몇 가지 기본 명령을 넘어서 실제로 음악을 제어 할 수 없음 을 의미합니다 (먼저 설정에서 활성화해야 함). 이는 Spotify API에 대한 제한이 있기 때문에이 앱을 한 번 설정 한 다음 순수한 정보 표시로 영구적으로 실행되기 때문입니다.

이것이 유용한 예는 라즈베리 파이에 연결하는 댄스 플로어 근처에 모니터를 두어 언제든지 손님이 언제 어디서나 어떤 노래를 보도록하고 싶은 파티를 주최하는 것입니다.

스크린 샷

이 두 예제는 SpotifyBigPicture의 기본 사전 설정의 예를 보여줍니다. 더 많은 스크린 샷은 다른 사전 설정을 참조하십시오!

앨범보기

재생 목록보기

사용자 정의

인터페이스의 왼쪽 상단에있는 기어 기호를 클릭하여 시각적 환경 설정 설정을 엽니 다. 여기에서 몇 번의 클릭만으로 여러 옵션에서 인터페이스 스타일을 사용자 정의 할 수 있습니다!

설정은 로컬로 자동으로 저장되므로 웹 사이트를 다시 열 때마다 모든 것을 재구성하는 것에 대해 걱정할 필요가 없습니다.

• 모든 사전 설정의 전체 목록은 여기에서 찾을 수 있습니다 : 사전 설정 .md
• 설정에 대한 일반 정보는 여기에서 확인할 수 있습니다 : settings.md

설치

(비디오 튜토리얼을 선호하는 경우 여기를 클릭하십시오)

1 단계 : Spotify 앱 생성

1. Spotify Developers 대시 보드에서 앱 생성 (먼저 계정을 만들어야 할 수도 있음)
2. 클라이언트 ID 와 클라이언트 비밀을 복사하여 나중에 저장하십시오.
3. "사용자 및 액세스"로 이동하여 계정을 추가하십시오 (이름 및 이메일 주소)

여기에서 설치를 계속할 수있는 두 가지 방법 중 하나 중 하나를 선택할 수 있습니다.

2 단계 - 변형 A : 수동 Java 설치

1. Spotify 앱을 작성한 후 "설정 편집"을 클릭 하고이 앱의 REDIRECT URI를 추가하십시오. http://localhost:8183/login-callback (저장하기 전에 작은 녹색 "추가"버튼을 클릭하십시오!)
2. 현재 릴리스를 다운로드하십시오
3. 앞서 저장 한 클라이언트 ID 및 클라이언트 비밀을 spotifybot.properties 파일의 각 필드에 붙여 넣으십시오.
4. JAR 파일과 동일한 폴더에서 터미널을 엽니 다 (Shift 및 마우스 오른쪽 버튼을 클릭 한 다음 "여기에서"열린 터미널 "을 선택하여 쉽게 수행 할 수 있습니다). 그런 다음 java -jar SpotifyBigPicture.jar 로 앱을 시작하십시오

2 단계 - 변형 B : Docker 이미지를 당기십시오

1. Spotify 앱을 작성한 후 "설정 편집"을 클릭 하고이 앱의 리디렉션 URI를 추가하십시오. 앱을 실행할 위치에 따라 외부에서 도달 할 수있는 URI를 제공해야합니다. 예를 들어 http://ip-of-docker-machine:8183/login-callback . 로그인 콜백은 /login-callback 으로 끝나야 합니다 ! 또한 저장하기 전에 작은 녹색 "추가"버튼을 클릭하십시오.
2. Docker 이미지를 당기십시오 : docker pull ghcr.io/selbi182/spotifybigpicture
3. Docker 이미지를 실행하십시오. 클라이언트 ID , 클라이언트 비밀 및 리디렉션 URI를 이전 필드에 이전에 지정하여 환경 변수로 전달하기 위해 다음을 전달합니다. docker run --name spotifybigpicture -d -p 8183:8183 -e client_id=CLIENTID -e client_secret=CLIENTSECRET -e redirect_uri=REDIRECTURI ghcr.io/selbi182/spotifybigpicture
4. 그런 다음 docker logs -f spotifybigpicture 실행하여 다음 단계에 필요한 URL을 볼 수 있습니다.

3 단계 : 로그인

1. 로그인하라는 메시지가 표시됩니다. 앱은 브라우저를 자체적으로 열려고 시도하지만 실패하면 콘솔 출력을 살펴보고 표시된 URL을 브라우저에 수동으로 복사합니다. https://accounts.spotify.com:443/authorize?client_id=[...]&response_type=code&redirect_uri=[...]&scope=[...]
2. 모든 것이 해결되면 끝났습니다! Variant A를 선택한 경우 앱은 http : // localhost : 8183에서 사용할 수 있으며 변형 B를 선택하면 제공 한 서버가 될 것입니다.

요구 사항

• Java 11 또는 최신 :
  • 여기에서 다운로드하십시오 (수동 Java 설치를하는 경우에만 필요합니다)
• 모니터에는 16 : 9 종횡비가 있어야합니다.
  • 초상화 모드에 대해 특별히 최적화 된 사전 설정이 있지만이 앱은 주로 조경 모드에 최적화되었습니다. 모든 종횡비는 이론적으로 작동해야하지만 16 : 9는 100% 지원 및 테스트 인 유일한 종횡비입니다.
• 현대식 브라우저 :
  • 이 앱에 첨부 된 많은 멋진 종과 휘파람이 구형 브라우저에서는 단순히 작동하지 않습니다. 나는 주로 Mozilla Firefox를 위해 그것을 개발하고 최적화했지만 Chrome에서도 작동합니다. 다른 브라우저에서 테스트되지 않았으므로 거기에 완전한 안정성을 보장하지 않습니다.
• Spotify Premium :
  • 이 앱을 여전히 무료 사용자로 사용할 수 있지만 전체 기능을 얻지 못합니다. 예를 들어, 현재 큐를 얻는 것은 Spotify 프리미엄 사용자에게만 사용할 수 있습니다. 무료 사용자의 경우 현재 노래 만 표시 할 수 있습니다. 앨범의 경우 다음에 오는 노래에 대한 좋은 추측 이상은 불행히도 불가능합니다.

인터페이스가 업데이트되지 않습니까?

정보는 Spotify의 API에서 한 번 1 초를 투표하여 가져옵니다. 불행히도, 노래 변경을위한 Webhooks (예를 들어 Discord를 사용하는 것과 같은)가 공개 API에서 사용할 수 없기 때문에 "적절한"방법은 없습니다.

결과적으로 연결이 때때로 고착 될 수 있습니다. 앱은 가능한 경우 연결을 자동으로 재건하려고 시도하며, 일반적으로 몇 초 밖에 걸리지 않습니다. 인터페이스 모양을 최대한 매끄럽게 유지하려면 타이머는 노래가 현재 재생 중이면 자체적으로 몇 초를 계속 계산하여 재생을 시뮬레이션합니다 .

그러나 인터페이스가 완전히 응답하지 않으면 이러한 접근 방식을 사용해보십시오.

1. 현재 재생 컨텍스트 변경 (예 : 재생 목록에서 앨범으로 변경)

2. 기괴한 이유에 대해서는 PC의 Spotify에서 장치 버튼을 클릭하면 (다른 장치를 선택하지 않고 말 그대로 드롭 다운을 열면) 때때로 인터페이스를 따라 잡을 수 있습니다. 이것은 고정 스크린을 고치기위한 나의 노력이었으며 놀랍게도 잘 작동합니다.

지원하다

문제가 있다면 Github에 문제 티켓을 작성하면 기꺼이 살펴 보겠습니다. :)

또는 불화로 나에게 메시지를 보내십시오. 내 사용자 이름은 : 셀비입니다