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 (متعدد المنصات) أو 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 .
كيفية القيام بذلك: كما قلت ، أول شيء هو إنشاء معرف العميل ( Create a Client ID ) على لوحة معلومات مطور Spotify. اكتب اسم التطبيق الخاص بك في حقل النص App or Hardware name ، ووصفه على App or Hardware description . في What are you building ? القسم ، أشر إلى النظام الأساسي الذي تقوم بإنشائه للتطبيق ، ثم انقر فوق الزر NEXT . أجب على سؤال التكامل التجاري ، واستمر. إذا لزم الأمر ، املأ النموذج وتحقق من جميع الصناديق في المرحلة الثالثة وكنت مستعدًا للذهاب. تم الإعلان عن تطبيقك في لوحة معلومات مطور Spotify!
الآن بعد أن أصبح لديك تطبيقك ، لديك بعض التعديلات التي يمكنك القيام بها في ملف واحد: .env . (إذا لم يكن موجودًا ، انسخ example.env .env
تحرير هذه القيم:
YOUR_CLIENT_ID بواسطة معرف العميل الخاص بك المتاح على لوحة التطبيق ،YOUR_CLIENT_SECRET من قبل Client Secret المتاح من خلال النقر على زر Show Client Secret الموجود على نفس صفحة الويب مثل معرف العميل الخاص بك ،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> .
أعلام موقع Freepik من موقع www.flaticon.com تحت رخصة Creative Commons بواسطة 3.0.
