NowPlaying for Spotify
v2.1 - Mini player
นี่คือการอัปเดตแบบเรียลไทม์ Spotify Connect Visualizer ซึ่งมีฐานข้อมูลฐานในครึ่งวัน
โครงการนี้ได้รับใบอนุญาตภายใต้ใบอนุญาต GNU GPL-3.0
มีให้ที่ nowplayi.ng
เครื่องกำเนิดเครื่องเล่นขนาดเล็ก
หน้าสถานะ
v2.0.x
- Use of localStorage
- Added GNU GPL-3.0 license
- Updated Index page design
- Updated French and English sentences
- Compatibility with Dark Reader
- Better UI consistency / CSS tweaks
- More languages
- .env support (thanks @finnie2006!)
- Added playback support (Premium account should be needed)
- Added playback information
- Added pause button (#17)
- CSS improvements added for better responsive (#15 #16)
- SEO improvements (#16)
- Minor CSS improvements
- Advertisements are recognized
- Multiple artists are recognized
- Experimental theme switcher
- Now playing device name and type is showing
- Cursor is hidden after a couple of seconds
- Fullscreen button
HTML, Tailwindcss, JS / AlpineJS, PHP
Spotify Web API PHP โดย JWILSSON เพื่อรับโทเค็นและรีเฟรชโทเค็น, Spotify Web API JS โดย JMPerez เพื่อดึงและแสดงเพลงที่กำลังเล่นอยู่ในปัจจุบัน
คุณสามารถใช้ XAMPP (Multi-Platform) หรือ Wampserver (Windows เท่านั้น) แต่เว็บเซิร์ฟเวอร์ใด ๆ ที่มี PHP 7.0 หรือมากกว่านั้นใช้งานได้ดีกับโมดูล php-curl
- หากคุณอยู่ใน NGINX คุณต้องเพิ่มสิ่งนี้ลงในการกำหนดค่าของคุณมิฉะนั้น. ENV ของคุณจะสัมผัสกับอินเทอร์เน็ต !!!
location /.env {
allow [YourIP]; # Allow your IP if you want to, if not delete this line.
deny all;
}
คุณควรมีแอพที่ประกาศไว้ในแดชบอร์ดนักพัฒนาของ Spotify เพื่อรับ Client ID
วิธีการทำเช่นนี้: อย่างที่ฉันพูดสิ่งแรกคือการสร้าง ID ไคลเอนต์ ( Create a Client ID ) บนแดชบอร์ดนักพัฒนาของ Spotify พิมพ์ชื่อแอพของคุณในฟิลด์ข้อความ App or Hardware name และคำอธิบายบน App or Hardware description คำอธิบายข้อความ ใน What are you building ? ส่วนระบุแพลตฟอร์มที่คุณกำลังสร้างแอพจากนั้นคลิกที่ปุ่ม NEXT ตอบคำถามการรวมเชิงพาณิชย์และดำเนินการต่อ หากจำเป็นให้กรอกแบบฟอร์มและตรวจสอบกล่องทั้งหมดในขั้นตอนที่ 3 และคุณพร้อมที่จะไป แอพของคุณประกาศในแผงควบคุมของนักพัฒนา Spotify!
ตอนนี้คุณมีแอพของคุณแล้วคุณมีการแก้ไขบางอย่างที่ต้องทำในไฟล์เดียว: .env (หากไม่มีอยู่ให้คัดลอก example.env ถึง .env )
แก้ไขค่าเหล่านั้น:
YOUR_CLIENT_ID โดยรหัสไคลเอนต์ของคุณมีอยู่ในแผงแอปของคุณYOUR_CLIENT_SECRET โดย Client Secret ของคุณมีให้โดยคลิกที่ปุ่ม Show Client Secret ซึ่งตั้งอยู่บนหน้าเว็บเดียวกันกับ ID ไคลเอนต์ของคุณYOUR_DOMAIN โดย URL การเปลี่ยนเส้นทางของคุณในกรณีของโฮสติ้งท้องถิ่นแทนที่ด้วย http://localhost/token.php ในกรณีส่วนใหญ่ Basicaly เป็น URL ที่เข้าถึงได้สำหรับหน้า token.php กลับไปที่แผงแอปของเรากันเถอะ คุณต้องประกาศ URL ที่หน้า token.php ตั้งอยู่สำหรับโฮสติ้งท้องถิ่นมันจะเป็นในกรณีส่วนใหญ่ http://localhost/token.php คลิกที่ปุ่ม Edit settings เขียวที่ตั้งอยู่ด้านบนของหน้าจากนั้นในฟิลด์ข้อความ Redirect URIs ระบุของคุณ ความสนใจ : สิ่งที่คุณพิมพ์ควร จะ เหมือนกับสิ่งที่คุณเขียนในไฟล์แบบอย่างสองไฟล์! จากนั้นคลิกที่ปุ่ม SAVE ที่ด้านล่างสุดของแบบฟอร์ม แอพของคุณได้รับการประกาศและพร้อมใช้งาน!
คุณสามารถรวมสคริปต์การวิเคราะห์ทางเลือกโดยใช้ตัวแปรสภาพแวดล้อม ANALYTICS_SCRIPT
หากตั้งค่าตัวแปรนี้จะรวมอยู่ในส่วน <head> ของทุกหน้า ตัวแปรนี้น่าจะเป็นสตริงที่มีแท็ก <script>
Flags โดย Freepik ของเว็บไซต์ www.flaticon.com ภายใต้ Creative Commons โดยใบอนุญาต 3.0
