Enzora Music — musiqa striming interfeysi
Enzora Music — bizning ichki demo loyihamiz: qidiruv, pleyer, pleylistlar va sevimlilarga ega Spotify uslubidagi musiqa striming interfeysi. Demo to'g'ridan-to'g'ri brauzerda ochiq iTunes katalogi bilan ishlaydi, animatsiyalar esa 60 FPS'da.
Vazifa
Enzora Music — bizning ichki mahsulot demo loyihamiz, tijoriy servis ham, mijoz buyurtmasi ham emas. Bu qidiruv, ijrochilar kartochkalari, pleyer, pleylistlar va sevimlilarga ega musiqa striming veb-interfeysi. Spotify faqat uslub bo'yicha mo'ljal bo'lgan va loyiha bilan bog'liq emas, demo esa murakkab interaktiv interfeyslarni qanday yig'ishimizni ko'rsatadi.
Oldimizga birinchi qarashdanoq tanish servis sifatida qabul qilinadigan musiqa striming interfeysini yig'ishni maqsad qilib qo'ydik. Uslub bo'yicha mo'ljal Spotify bo'ldi: yon navigatsiya, muqovalar to'ri va ekran pastiga mahkamlangan pleyer. Ko'pchilik bu joylashuvni yoddan biladi, shuning uchun chekinishlar, bloklar tartibi yoki tugmalar xatti-harakatidagi har qanday farq darhol ko'zga tashlanadi.
Musiqasiz interfeys shunchaki rasm bo'lib qoladi. Demo haqiqiy ijrochilar va treklarni topishi, muqovalarni ko'rsatishi va qo'shiqlar parchalarini ijro etishi, shu bilan birga o'z serveri, ma'lumotlar bazasi va musiqa kutubxonasisiz ishlashi kerak edi: butun loyiha — bitta statik sahifa.
Pleyer — bunday mahsulotning markazi. Ijro, o'tkazish, ovoz balandligi va taymer tugmalari darhol javob berishi, kartochkalar, menyu va oynalar esa silliq harakatlanishi lozim. Animatsiyadagi eng kichik uzilish yoki «sakraydigan» taymer, qolgan hamma narsa puxta qilingan bo'lsa ham, jonli servis hissini buzadi.
Nihoyat, yon panel va pastki pleyerli joylashuv keng ekranga mo'ljallangan. Noutbuk, planshet va telefonda panel, qidiruv satri va pleyer joy talasha boshlaydi, shuning uchun interfeysni qidiruvdan pleylistlarni boshqarishgacha birorta ssenariyni yo'qotmasdan bosqichma-bosqich qayta qurish kerak edi.
Yechim
Demoni uch zonali bir sahifali ilova sifatida yig'dik: chapda navigatsiya va kutubxona, markazda qidiruv, ijrochilar va treklar to'ri, pastda esa muqova va nomi ko'rinib turadigan doimiy pleyer. Qorong'i palitra va yashil urg'u uslubiy referensni takrorlaydi, interfeysdagi barcha yozuvlar esa rus tilida.
Demo ochilishi bilan mashhur treklarni yuklaydi. Qidiruv qo'shiqlar va ijrochilarni topadi, ijrochi kartochkasi uning treklari va ular bo'yicha qidiruvga ega oynani ochadi, istalgan trekni esa ijro etish, yurakcha bilan belgilash yoki pleylistga qo'shish mumkin. Pleylistlar va sevimlilar ro'yxatdan o'tmasdan brauzerda saqlanadi, kirish, ro'yxatdan o'tish hamda «Siz uchun» va «Yangiliklar» bo'limlari esa ochiqchasiga «Funksiya ishlab chiqilmoqda» oynasini ko'rsatadi.
Demo freymvorklarsiz sof HTML, CSS va JavaScript'da yozilgan va Vercel'da joylashtirilgan. Katalog ochiq iTunes API'dan ikkita proksi orqali keladi: birinchisi 15 soniya ichida javob bermasa, so'rov ikkinchisiga o'tadi. Animatsiyalar CSS-transformatsiyalarga qurilgan, pleyer taymeri esa brauzer kadrlari bilan hamohang yangilanadi.
Striming interfeysi joylashuvi
«Asosiy», «Siz uchun», «Yangiliklar», «Qidiruv», «Pleylistlar» va «Sevimlilar» bo'limlariga ega yon panel, markazdagi muqovalar to'ri va pastki pleyer aynan kutilgan joyda turadi. Qorong'i fondagi yashil urg'u asosiy harakat — ijroni ajratib ko'rsatadi.
Haqiqiy treklar katalogi
Demo ochiq iTunes API'ga murojaat qiladi: boshida mashhur treklar yuklanadi, qidiruv bir martada 24 tagacha qo'shiq va 12 ta ijrochini qaytaradi, «Yana yuklash» tugmasi esa keyingi qismni qo'shadi. Faqat prevyu-parchasi bor treklar ko'rsatiladi, shuning uchun bo'sh kartochkalar yo'q.
To'liq boshqaruvli pleyer
Pleyer treklarni oldinga va orqaga almashtiradi, progress bilan to'ladigan shkala bo'ylab o'tkazadi, joriy vaqt va davomiylikni ko'rsatadi hamda ovoz balandligini sozlaydi. Trek tugagach, keyingisi avtomatik boshlanadi, probel tugmasi esa kursor qidiruv maydonida bo'lmasa, ijroni pauzaga qo'yadi.
Ro'yxatdan o'tmasdan pleylistlar
Pleylistlar bir-ikki bosishda yaratiladi, qayta nomlanadi va o'chiriladi, trek mavjud ro'yxatga yoki darhol yangisiga qo'shiladi, bitta trekni pleylistga ikki marta qo'shish esa bloklanadi. Sevimlilar va pleylistlar brauzerda saqlanadi, shuning uchun sahifa qayta yuklanganda ham kutubxona joyida qoladi.
Ijrochilar va treklar qidiruvi
Ijrochilar kartochkalarida ism va janr ko'rsatiladi. Bosilganda ijrochining treklari va qo'shiq yoki albom nomi bo'yicha alohida qidiruvga ega oyna ochiladi, u yerdan trekni darhol ijro etish, sevimlilarga yoki pleylistga qo'shish mumkin.
Har qanday kenglik uchun maket
Maket to'qqizta breakpointda qayta quriladi: yon panel 260 dan 220 va 80 pikselgacha torayadi, telefonda esa chiqib keladigan menyuga aylanadi. 1500 pikseldan tor ekranlarda qidiruv satri to'liq ekranli oynaga ega ikonkaga yig'iladi, tugmalar yozuvlari esa yashirinib, faqat ikonkalar qoladi.
Natijalar
Loyihaning asosiy natijalari raqamlarda.
- 60 FPSInterfeys silliqligi
Kartochkalar, menyu va pleyer CSS-transformatsiyalar bilan animatsiya qilinadi, shuning uchun demodagi harakat silliq qoladi.
- 1:1Referensga aniqlik
Yon navigatsiya, muqovalar to'ri va pastki pleyer uslubiy referensdagidek joylashgan.
- 9Maket breakpointlari
Interfeys ekranning to'qqizta kengligida — 1500 dan 550 pikselgacha qayta quriladi.
- 12 kunG'oyadan demogacha
Interfeys, pleyer, kutubxona va katalogni ulash o'n ikki kun davom etdi.
Loyiha texnologiyalari
Mijozning vazifasi uchun yechimni qurganimiz stek.
- Vercel
- HTML5
- CSS3
- JavaScript
O'xshash keyslar
Keyingi keys bo'lishga tayyormisiz?
Vazifani ayting — menejer jamoa yig'adi, smeta hisoblaydi va so'rovingizdan keyingi birinchi soat ichida taklif yuboradi. Majburiyatlarsiz va xat tarqatishsiz.