Spotify, दुनिया की सबसे लोकप्रिय ऑडियो स्ट्रीमिंग सदस्यता सेवा है. इसका मकसद, उपयोगकर्ताओं को ऑडियो और वीडियो कॉन्टेंट सुनने का बेहतर अनुभव देना है. इस ऐप्लिकेशन में संगीत, पॉडकास्ट, और ऑडियो बुक की एक बड़ी लाइब्रेरी उपलब्ध है. इसकी मदद से, मोबाइल, पीसी, और अन्य प्लैटफ़ॉर्म पर रोज़ाना लाखों लोग संगीत सुनते हैं.
हाल ही में, Spotify ने अपने डेस्कटॉप और वेब प्लेयर क्लाइंट के लिए, Spotify का मिनीप्लेयर रिलीज़ किया है. मिनी प्लेयर को इस तरह से डिज़ाइन किया गया है कि यह गाने चलाने के ज़रूरी कंट्रोल को एक छोटी और कॉम्पैक्ट विंडो में दिखा सके. यह विंडो हमेशा सबसे ऊपर दिखती है, ताकि उपयोगकर्ता Spotify को लगातार ऐक्सेस कर सकें. इस सुविधा का अनुरोध लंबे समय से किया जा रहा था. इसकी मदद से, उपयोगकर्ता Spotify पर अपने पसंदीदा कलाकारों, प्लेलिस्ट, और पॉडकास्ट का आनंद लेते हुए, अलग-अलग विंडो और ऐप्लिकेशन में आसानी से कई काम कर सकते हैं.
यहां मिनीप्लेयर के डेवलपमेंट के बारे में पूरी जानकारी दी गई है. इसमें शुरुआती "कैनवस हैक" से लेकर, दस्तावेज़ के लिए पिक्चर में पिक्चर वाले नए एपीआई पर आधारित, ज़्यादा बेहतर और उपयोगकर्ता के हिसाब से बनाए गए वर्शन के बारे में बताया गया है.
"कैनवस हैक"
मिनीप्लेयर का शुरुआती वर्शन, 2019 में Spotify के वेब प्लेयर पर हैक प्रोजेक्ट के तौर पर लॉन्च किया गया था. इसका मकसद, ब्राउज़र के <video> के लिए पिक्चर में पिक्चर (PiP) एपीआई का इस्तेमाल करके, एल्बम आर्ट को हमेशा-ऊपर-विंडो में दिखाना था. हालांकि, इस एपीआई को मुख्य रूप से वीडियो एलिमेंट के लिए डिज़ाइन किया गया था. इससे एल्बम आर्ट की इमेज नहीं दिखाई जा सकती थीं. Spotify ने एल्बम आर्ट को कैनवस एलिमेंट में रेंडर करके और रीयल-टाइम MediaStream ऑब्जेक्ट पाने के लिए HTMLCanvasElement captureStream() तरीका इस्तेमाल करके, इस समस्या को हल किया. इसके बाद, यह स्ट्रीम PiP API के लिए इस्तेमाल किए जाने वाले वीडियो के सोर्स के तौर पर काम करती है. यह तरीका, Google Chrome के "ऑडियो प्लेलिस्ट" सैंपल पर आधारित था.
Spotify ने कैनवस को Media Session API में सेट किए गए सही ऐक्शन हैंडलर के साथ जोड़ा, ताकि यह कंट्रोल किया जा सके कि पीआईपी विंडो में कौनसे प्लेयर कंट्रोल दिखेंगे. इससे उपयोगकर्ताओं को एल्बम आर्ट और प्लेयर कंट्रोल वाली फ़्लोटिंग विंडो मिलती है. इसका इस्तेमाल करके, वे दूसरे कामों पर फ़ोकस करते हुए भी वीडियो चला सकते हैं.
इससे Spotify में एक बुनियादी मिनीप्लेयर जोड़ा जा सका. हालांकि, इस तरीके की कई सीमाएं थीं:
- पिन किए गए वीडियो की विंडो में, वीडियो के सबटाइटल दिखते नहीं हैं. Spotify को सभी वीडियो पर सबटाइटल दिखाने की ज़रूरत थी. इसलिए, वीडियो चलने के साथ ही उन्हें पिन किए गए वीडियो की विंडो बंद करनी पड़ती थी.
- प्लेयर कंट्रोल सिर्फ़ तब दिखते हैं, जब वीडियो को स्थानीय स्टोरेज में सेव करके चलाया जा रहा हो. Spotify, Spotify Connect (और अन्य प्रोटोकॉल) का इस्तेमाल करके, किसी दूसरे डिवाइस से संगीत चलाने की सुविधा देता है. साथ ही, वह चाहता है कि उपयोगकर्ता इस संगीत को कंट्रोल भी कर सके
- PiP विंडो के लुक-एंड-फ़ील को पसंद के मुताबिक बनाने की सुविधा उपलब्ध नहीं है. Spotify सिर्फ़ आर्टवर्क दिखा सकता था और Chrome के दिए गए प्लेयर कंट्रोल का इस्तेमाल कर सकता था. इससे, Spotify ब्रैंडिंग या प्लेयर के अन्य कंट्रोल जोड़ने से रोका जा सकता था.
उपयोगकर्ता इंटरफ़ेस पर कंट्रोल न होने और Spotify की खास सुविधाओं को यहां जोड़ने में समस्या होने की वजह से, उन्हें लगा कि यह तरीका उनके डेस्कटॉप क्लाइंट के लिए सही नहीं है. उदाहरण के लिए, किसी ट्रैक को पसंद करना.
दस्तावेज़ के लिए 'पिक्चर में पिक्चर' मोड: मिनीप्लेयर का नया वर्शन
साल 2023 की शुरुआत में, Spotify को पता चला कि Google Chrome एक नया एपीआई लॉन्च करने में दिलचस्पी रखता है. इस एपीआई की मदद से, PiP विंडो में मनमुताबिक HTML कॉन्टेंट दिखाया जा सकेगा. इसे दस्तावेज़ के लिए पिक्चर में पिक्चर एपीआई कहा जाता है. Spotify के लिए यह एक अहम कदम था, क्योंकि इससे उन्हें पीआईपी विंडो के दिखने के तरीके पर पूरा कंट्रोल मिल जाता. Spotify ने ऑरिजिन ट्रायल के दौरान, Chrome की टीम के साथ मिलकर काम किया. इसका मकसद, दस्तावेज़ के लिए पिक्चर में पिक्चर (पीआईपी) वाले एपीआई पर आधारित नया मिनीप्लेयर बनाना था.
Document PiP API की मदद से, हमेशा-शीर्ष पर रहने वाली नई विंडो खोली जा सकती है. इसमें एलिमेंट अटैच किए जा सकते हैं. Spotify वेब प्लेयर, React वेब ऐप्लिकेशन है. इसलिए, Spotify ने मुख्य ऐप्लिकेशन से PiP विंडो में कस्टम कॉम्पोनेंट रेंडर करने के लिए, ReactDOM के createPortal() तरीके का इस्तेमाल किया. इससे, Miniplayer के दिखने के तरीके और सुविधाओं पर पूरा कंट्रोल मिलता है.
दस्तावेज़ के लिए पीआईपी मोड वाले नए API की मदद से, Spotify की पिछली समस्याओं को भी हल किया गया है:
- पीआईपी विंडो में मौजूद वीडियो, सामान्य वीडियो एलिमेंट होते हैं. साथ ही, इनमें सबटाइटल की सुविधा पूरी तरह से काम करती है.
- यूज़र इंटरफ़ेस (यूआई) पर पूरा कंट्रोल होने पर, Spotify Connect का इस्तेमाल करके रिमोट से संगीत चलाने पर भी प्लेयर कंट्रोल दिखाए जा सकते हैं.
- Spotify ने अपने प्लेयर को बेहतर बनाने के लिए, अपने स्टाइल और प्लेयर कंट्रोल को शामिल किया.
- उन्होंने Spotify के डेस्कटॉप क्लाइंट में, Document PiP API के लिए सहायता उपलब्ध कराई. इससे, वे डेस्कटॉप पर Spotify इस्तेमाल करने वाले लाखों लोगों के लिए, मिनीप्लेयर की सुविधा उपलब्ध करा पाए.
React का इस्तेमाल करके, पिक्चर में पिक्चर विंडो बनाना
यहां दिए गए उदाहरण में, Spotify की टीम की तरह ही React में दस्तावेज़ के लिए पिक्चर में पिक्चर (पीआईपी) मोड का इस्तेमाल करने का तरीका बताया गया है. आपको दो React कॉम्पोनेंट बनाने होंगे: MyFeature और PiPContainer.
पिक्चर में पिक्चर विंडो को मैनेज करने की ज़िम्मेदारी MyFeature कॉम्पोनेंट की है. यह एक बटन रेंडर करता है, जो पिक्चर में पिक्चर विंडो को टॉगल करता है और PiPContainer कॉम्पोनेंट को रेंडर करता है. यह पिक्चर में पिक्चर विंडो के "pagehide" इवेंट की भी सदस्यता लेता है, ताकि विंडो बंद होने पर उसकी स्थिति अपडेट की जा सके.
const MyFeature = () => {
const [pipWindow, setPiPWindow] = useState<Window | null>(
documentPictureInPicture.window
);
const handleClick = useCallback(async () => {
if (pipWindow) {
pipWindow.close();
} else {
const newWindow = await documentPictureInPicture.requestWindow();
setPiPWindow(newWindow);
}
}, [pipWindow]);
useEffect(() => {
const handleWindowClose = (): void => {
setPiPWindow(null);
};
pipWindow?.addEventListener("pagehide", handleWindowClose);
return () => {
pipWindow?.removeEventListener("pagehide", handleWindowClose);
};
}, [pipWindow]);
return (
<>
<button onClick={handleClick}>
{pipWindow ? "Close PiP Window" : "Open PiP Window"}
</button>
<PiPContainer pipWindow={pipWindow}>Hello World 👋!</PiPContainer>
</>
);
};
PiPContainer कॉम्पोनेंट, पिक्चर में पिक्चर विंडो में कॉन्टेंट को रेंडर करने के लिए, ReactDOM के createPortal() तरीके का इस्तेमाल करता है.
type Props = PropsWithChildren<{
pipWindow: Window | null;
}>;
const PiPContainer = ({ pipWindow, children }: Props) => {
useEffect(() => {
if (pipWindow) {
cloneStyles(window.document, pipWindow.document);
}
}, [pipWindow]);
return pipWindow ? createPortal(children, pipWindow.document.body) : null;
};
आगे क्या करना है
Spotify लगातार नए-नए प्रयोग कर रहा है और उसे बेहतर बना रहा है. इसलिए, वह मिनीप्लेयर को बेहतर बनाने के लिए लगातार काम कर रहा है. साथ ही, उसकी सुविधाओं और उपयोगकर्ता अनुभव को और बेहतर बनाने की कोशिश कर रहा है. हालांकि, हम अभी तक किसी खास सुविधा के बारे में नहीं बता सकते, लेकिन हम आने वाले समय में मिनीप्लेयर की सुविधाओं को बेहतर बनाने के लिए काम कर रहे हैं.
Document Picture-in-Picture API की मदद से, ज़्यादा आसान और उपयोगकर्ता के हिसाब से बने मिनीप्लेयर को बनाने में मदद मिलती है. हमें उम्मीद है कि अन्य ब्राउज़र वेंडर, इस एपीआई से मिलने वाले अवसरों का ध्यान रखेंगे और इसकी सहायता को शामिल करने पर विचार करेंगे. इससे Spotify, सभी उपयोगकर्ताओं को एक जैसा और बेहतर अनुभव दे पाएगा. भले ही, वे किसी भी ब्राउज़र का इस्तेमाल कर रहे हों.
आभार
Spotify में उन सभी लोगों को धन्यवाद जिन्होंने मिनीप्लेयर बनाने में मदद की.
Spotify, Google Chrome की टीम को भी धन्यवाद देना चाहता है. इस टीम ने साथ मिलकर काम किया है और Document Picture-in-Picture API के लिए, Spotify के सुझावों को ध्यान में रखा है.