Raspberry Pi Spotify Status

โครงการสุดท้ายของ Harvard CS50: สถานะ Spotify

วิดีโอสาธิต: https://youtu.be/yc1qeze1bso

คำอธิบาย:

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

ภาพหน้าจอ:

การดำเนินการ:

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

ฉันคำนวณจานสีโดยใช้ไลบรารี JavaScript ที่เรียกว่า ColorTheief ซึ่งคว้าสีที่โดดเด่นสำหรับพื้นหลังและสีอื่นที่ตัดกันจากจานสีสำหรับข้อความ สีข้อความไม่ได้เป็นเพียงสีดำหรือสีขาว แต่แทนที่จะเก็บตัวอย่างสีสำรองสองสามสีเพื่อสร้างจานสีทั้งหมดและพบสีจากจานสีที่ตรงกันข้ามกับสีพื้นหลังที่เลือก

ฉันใช้สัญลักษณ์วัสดุของ Google สำหรับไอคอนการควบคุมการเล่น สิ่งนี้ช่วยให้การปรับขนาดได้ง่ายขึ้นกับขนาดหน้าจอที่แตกต่างกันโดยไม่จำเป็นต้องใช้ภาพแยกต่างหาก

ความยากลำบากและการดิ้นรน:

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

วิธีโฮสต์ด้วยตัวเอง:

มีหลายวิธีที่คุณสามารถโฮสต์ Webapp นี้ได้ ฉันใช้ fly.io โดยส่วนตัว คุณจะต้องตั้งค่าแอปพลิเคชันนักพัฒนา Spotify เพื่อรับรหัสไคลเอนต์ Spotify และความลับของลูกค้า

สร้างบัญชีนักพัฒนา Spotify หากคุณไม่มีและสร้างแอพใหม่ คุณจะต้องจดบันทึกรหัสลูกค้าและความลับของลูกค้า โฮสต์ WebApp โดยใช้หนึ่งใน 3 ตัวเลือกต่อไปนี้:

หากต้องการใช้ fly.io (โฮสต์ฟรีแนะนำ):

• ดาวน์โหลด repo
• ตั้งค่าบัญชี fly.io ของคุณและสร้างแอพใหม่
• จดบันทึกชื่อโฮสต์/ที่อยู่แอปของคุณโฮสต์ที่
• ป้อน ID ไคลเอนต์ความลับของไคลเอนต์และเปลี่ยนเส้นทาง URI (ซึ่งเป็นที่อยู่ของคุณ WebApp เป็นโฮสต์ที่) เป็นตัวแปรสภาพแวดล้อม spotipy_client_id, spotipy_client_secret และ spotipy_redirect_uri

โฮสติ้งในพื้นที่ (สำหรับการดีบัก):

• ติดตั้ง Python3 และการพึ่งพาสำหรับโครงการนี้บนคอมพิวเตอร์ของคุณ ใช้ตัวแปรสภาพแวดล้อมของคอมพิวเตอร์ของคุณเพื่อตั้งค่ารหัสไคลเอนต์ความลับของลูกค้าและเปลี่ยนเส้นทาง URI การเปลี่ยนเส้นทาง URI จะเป็น 'http://127.0.0.1:5000' สำหรับการทดสอบในท้องถิ่น

เพื่อเป็นเจ้าภาพที่อื่น:

• คุณสามารถโฮสต์ในทุกสิ่งที่สามารถเรียกใช้ Python3 และตั้งค่าตัวแปรสภาพแวดล้อม เพิ่งรู้ที่อยู่ที่คุณกำลังโฮสต์นั่นจะเป็น URI ที่เปลี่ยนเส้นทางของคุณ

จากนั้นกลับไปที่แผงควบคุม Spotify Developer และเข้าสู่ URI เปลี่ยนเส้นทาง ตรวจสอบให้แน่ใจว่าได้ลบสแลชต่อท้าย มันควรจะใช้งานได้!

มีข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าตัวแปรสภาพแวดล้อมและโฮสต์ในพื้นที่ในความคิดเห็นขนาดใหญ่ที่ด้านบนของ App.py

เป้าหมายที่ผ่านมาและแผนการในอนาคต:

เดิมทีนี่เป็นโครงการสำหรับหลักสูตร Harvard CS50 ตั้งแต่นั้นมาฉันได้เพิ่มคุณสมบัติของฉันเอง คุณสามารถดูรุ่น CS50 ดั้งเดิมในสาขาแยกต่างหาก ตั้งแต่นั้นมาฉันได้ปรับปรุงอัลกอริทึมการตรวจจับสีอย่างหนาแน่น นอกจากนี้ยังมีสาขา "Raspi" ที่กำหนดซึ่งมีรหัสเพิ่มเติมเพื่อเรียกเว็บเซิร์ฟเวอร์ท้องถิ่นเพื่อปิดหน้าจอของ Raspberry Pi เมื่อเพลงไม่ได้เล่น

ฉันยังคงตั้งใจที่จะอัปเดตสิ่งนี้เพื่อแก้ไขข้อบกพร่องด้วยการตรวจจับสีและการปรับขนาดหน้าจอและอีกสองปุ่มและคุณสมบัติโบนัสและอื่น ๆ