SpotifyBigPicture

SpotifyBigPicture

อินเทอร์เฟซที่ปรับแต่งได้สูงซึ่งแสดงสถานะการเล่นปัจจุบันของคุณบน Spotify ในหน้าเบราว์เซอร์เล็ก ๆ ที่สวยงาม!

คุณอาจต้องการใช้สิ่งนี้มากกว่าของ Spotify (ในความคิดของฉันค่อนข้างล้น) โหมดเต็มหน้าจอหรือคุณสามารถใช้มันสำหรับทีวีของคุณเพื่อให้ OSD ที่ล้าสมัยและมีความละเอียดต่ำเป็นงานทาสีสด!

อินเทอร์เฟซนี้เป็นการอ่านอย่างเดียวเป็นหลัก โดยเฉพาะหมายความว่าคุณ ไม่สามารถควบคุมเพลงของคุณ ได้เกินกว่าคำสั่งพื้นฐานบางอย่างเช่นการเล่นการหยุดชั่วคราวและข้าม (จำเป็นต้องเปิดใช้งานในการตั้งค่าก่อน) นี่เป็นทั้งข้อ จำกัด ของ Spotify API และเนื่องจากแนวคิดคือการตั้งค่าแอปนี้หนึ่งครั้งและจากนั้นมันจะทำงานอย่างถาวรเป็นจอแสดงผลข้อมูลบริสุทธิ์

ตัวอย่างที่สิ่งนี้มีประโยชน์จะเป็นเจ้าภาพจัดงานปาร์ตี้ที่คุณต้องการให้แขกของคุณดูได้ตลอดเวลาเพลงใดที่อยู่ข้างหน้าโดยวางจอมอนิเตอร์ใกล้กับฟลอร์เต้นรำที่คุณเชื่อมต่อกับ Raspberry Pi

ภาพหน้าจอ

ตัวอย่างทั้งสองนี้แสดงตัวอย่างของค่าเริ่มต้นที่ตั้งไว้ล่วงหน้าเริ่มต้นของ SpotifyBigPicture เท่านั้น สำหรับภาพหน้าจอเพิ่มเติมดูที่ตั้งไว้ล่วงหน้าอื่น ๆ !

มุมมองอัลบั้ม

มุมมองเพลย์ลิสต์

การปรับแต่ง

คลิกสัญลักษณ์เกียร์ที่ด้านบนซ้ายของอินเทอร์เฟซเพื่อเปิดการตั้งค่าสำหรับการตั้งค่าภาพ ที่นี่คุณสามารถปรับแต่งสไตล์ของอินเทอร์เฟซจากตัวเลือกจำนวนมากด้วยการคลิกเพียงไม่กี่ครั้ง!

การตั้งค่าของคุณจะถูกจัดเก็บโดยอัตโนมัติในเครื่องดังนั้นคุณไม่จำเป็นต้องกังวลเกี่ยวกับการกำหนดค่าใหม่ทุกอย่างในแต่ละครั้งที่คุณเปิดเว็บไซต์อีกครั้ง

• รายการทั้งหมดของทุกที่ตั้งไว้ล่วงหน้าสามารถพบได้ที่นี่: presets.md
• ข้อมูลทั่วไปเกี่ยวกับการตั้งค่าสามารถดูได้ที่นี่: settings.md

การติดตั้ง

(หากคุณต้องการการสอนวิดีโอคลิกที่นี่)

ขั้นตอนที่ 1: สร้างแอพ Spotify

1. สร้างแอพบนแผงควบคุม Spotify Developers (คุณอาจต้องสร้างบัญชีก่อน)
2. คัดลอก รหัสลูกค้า และ ความลับของลูกค้า และบันทึกไว้ในภายหลัง
3. ไปที่ "ผู้ใช้และเข้าถึง" และเพิ่มบัญชีของคุณที่นั่น (ชื่อและที่อยู่อีเมล)

จากที่นี่คุณสามารถเลือกระหว่างหนึ่งในสองวิธีในการดำเนินการติดตั้งต่อไป

ขั้นตอนที่ 2 - ตัวแปร A: การติดตั้ง Java ด้วยตนเอง

1. หลังจากสร้างแอพ Spotify ให้คลิกที่ "แก้ไขการตั้งค่า" และเพิ่ม URI REDIARCT สำหรับแอพนี้: http://localhost:8183/login-callback (ตรวจสอบให้แน่ใจว่าคุณคลิกปุ่ม "เพิ่ม" สีเขียว "ก่อนที่จะบันทึก!)
2. ดาวน์โหลดรุ่นปัจจุบัน
3. วาง รหัสลูกค้า และ ความลับของลูกค้า ที่คุณบันทึกไว้ก่อนหน้านี้ลงในฟิลด์ที่เกี่ยวข้องในไฟล์ spotifybot.properties
4. เปิดเทอร์มินัลในโฟลเดอร์เดียวกันกับไฟล์ JAR (ทำได้ง่ายโดยถือกะและคลิกขวาจากนั้นเลือก "Open Terminal ที่นี่") จากนั้นเริ่มแอพด้วย java -jar SpotifyBigPicture.jar

ขั้นตอนที่ 2 - ตัวแปร B: ดึงภาพ Docker

1. หลังจากสร้างแอพ Spotify ให้คลิกที่ "แก้ไขการตั้งค่า" และเพิ่ม URI เปลี่ยนเส้นทางสำหรับแอพนี้ ขึ้นอยู่กับว่าคุณวางแผนที่จะเรียกใช้แอพคุณต้องจัดเตรียม URI ที่เข้าถึงได้จากภายนอก ตัวอย่างเช่น http://ip-of-docker-machine:8183/login-callback การโทรกลับเข้าสู่ระบบ จะต้อง จบลงด้วย /login-callback ! ตรวจสอบให้แน่ใจว่าคุณคลิกปุ่ม "เพิ่ม" สีเขียวเล็กน้อยก่อนบันทึก
2. ดึงภาพนักเทียบท่า: docker pull ghcr.io/selbi182/spotifybigpicture
3. เรียกใช้อิมเมจนักเทียบท่า แทรก รหัสลูกค้า ความลับของลูกค้า และ การเปลี่ยนเส้นทาง 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. หากทุกอย่างได้ผลคุณก็ทำเสร็จแล้ว! หากคุณเลือกตัวแปร A แอปจะพร้อมใช้งานภายใต้ http: // localhost: 8183/และถ้าคุณเลือกตัวแปร B มันจะเป็นเซิร์ฟเวอร์ที่คุณให้ไว้

ความต้องการ

• Java 11 หรือใหม่กว่า:
  • ดาวน์โหลดที่นี่ (จำเป็นต้องเห็นได้ชัดว่าหากคุณกำลังติดตั้ง Java ด้วยตนเอง)
• การตรวจสอบควรมีอัตราส่วน 16: 9:
  • ในขณะที่มีการตั้งค่าล่วงหน้าที่ดีที่สุดสำหรับโหมดแนวตั้งโดยเฉพาะแอพนี้ได้รับการปรับให้เหมาะสมที่สุดสำหรับโหมดภูมิทัศน์เป็นหลัก ในขณะที่อัตราส่วนแง่มุมใด ๆ ควรใช้งานได้ในทางทฤษฎี 16: 9 เป็นอัตราส่วนภาพเดียวที่ได้รับการสนับสนุนและทดสอบ 100%
• เบราว์เซอร์ที่ทันสมัย:
  • มีระฆังแฟนซีและนกหวีดมากมายติดอยู่กับแอพนี้ซึ่งไม่สามารถทำงานกับเบราว์เซอร์รุ่นเก่าได้ ฉันพัฒนาและปรับให้เหมาะสมเป็นหลักสำหรับ Mozilla Firefox แต่ก็ใช้ได้กับ Google Chrome ไม่ได้ทดสอบกับเบราว์เซอร์อื่น ๆ ดังนั้นฉันจะไม่รับประกันความมั่นคงเต็มรูปแบบที่นั่น
• Spotify Premium:
  • คุณยังสามารถใช้แอพนี้เป็นผู้ใช้ฟรี แต่คุณจะไม่ได้รับฟังก์ชั่นเต็มรูปแบบ ตัวอย่างเช่นการรับคิวปัจจุบันของคุณมีให้สำหรับผู้ใช้ Spotify Premium เท่านั้น สำหรับผู้ใช้ฟรีเท่านั้นที่สามารถแสดงเพลงปัจจุบันได้ สำหรับอัลบั้มมากกว่าการคาดเดาว่าเพลงใดที่มาต่อไปนั้นเป็นไปไม่ได้ที่จะเป็นไปไม่ได้

อินเทอร์เฟซไม่อัปเดต?

ข้อมูลจะถูกดึงมาจาก API ของ Spotify โดยการสำรวจครั้งเดียววินาที น่าเสียดายที่ไม่มีวิธีการ "เหมาะสม" ในการทำมันเนื่องจาก webhooks สำหรับการเปลี่ยนแปลงเพลง (เช่น Discord ใช้ตัวอย่างเช่น) ไม่สามารถใช้งานได้สำหรับ API สาธารณะ

เป็นผลให้การเชื่อมต่ออาจติดอยู่เป็นครั้งคราว แอพจะพยายามสร้างการเชื่อมต่อใหม่โดยอัตโนมัติเมื่อเป็นไปได้ซึ่งโดยปกติจะใช้เวลาเพียงไม่กี่วินาที เพื่อให้ลักษณะของอินเทอร์เฟซราบรื่นที่สุดเท่าที่จะเป็นไปได้ ตัวจับเวลาจะจำลองการเล่นโดยให้นับไม่กี่วินาทีด้วยตัวเอง ถ้าเพลงกำลังเล่นอยู่

อย่างไรก็ตามหากอินเทอร์เฟซไม่ตอบสนองอย่างสมบูรณ์ลองวิธีการเหล่านี้:

1. เปลี่ยนบริบทการเล่นปัจจุบัน (เช่นการเปลี่ยนจากเพลย์ลิสต์เป็นอัลบั้ม)

2. ด้วยเหตุผลที่แปลกประหลาดเพียงแค่คลิกที่ปุ่มอุปกรณ์ใน Spotify บนพีซีของคุณ (ไม่ได้เลือกอุปกรณ์ที่แตกต่างกันเพียงแค่เปิดตัวแบบเลื่อนลง) บางครั้งก็บังคับให้อินเทอร์เฟซติดตาม นี่เป็นสิ่งที่ฉันต้องไปแก้ไขหน้าจอที่ติดอยู่และทำงานได้ดีอย่างน่าประหลาดใจ:

สนับสนุน

หากคุณมีปัญหาใด ๆ ให้เขียนตั๋วปัญหาบน GitHub และฉันยินดีที่จะดูมัน :)

อีกทางเลือกหนึ่งส่งข้อความถึงฉันใน Discord ชื่อผู้ใช้ของฉันคือ: Selbi