Spotify ने लाखों गाने, एल्बम और प्लेलिस्ट वाले कैटलॉग के साथ संगीत को स्ट्रीम करने के तरीके को पूरी तरह से बदल दिया है।
इसके वेब एपीआई का उपयोग करके, आप अपना रिएक्ट संगीत खोज एप्लिकेशन बनाकर अपने Spotify अनुभवों को और भी मज़ेदार बना सकते हैं। एपीआई कई प्रकार के संगीत डेटा तक पहुंच प्रदान करता है जिसका उपयोग आप एक कस्टम संगीत ऐप बनाने और इसे अपने स्वाद के लिए वैयक्तिकृत करने के लिए कर सकते हैं।
डेवलपर्स के लिए Spotify
Spotify संगीत स्ट्रीमिंग सुविधाओं की एक विस्तृत श्रृंखला प्रदान करता है जैसे कि खोज, ऑफ़लाइन प्लेबैक और वैयक्तिकृत अनुशंसाएँ। डेवलपर्स प्लेटफॉर्म के लिए Spotify उन एपीआई और एसडीके तक पहुंच प्रदान करता है जो इन सुविधाओं को शक्ति प्रदान करते हैं। इस गाइड में, आप वेब एपीआई का पता लगाएंगे और सीखेंगे कि इसे अपने रिएक्ट एप्लिकेशन में कैसे एकीकृत किया जाए ताकि आप अपने पसंदीदा गाने खोज सकें।
एक खाते के लिए साइन अप करें
आरंभ करने के लिए, आपके पास एक Spotify खाता होना चाहिए। यदि आपके पास पहले से एक नहीं है, तो जाएँ
Spotify साइनअप पेज. हालाँकि, यदि आपके पास पहले से एक है, तो लॉग इन करें डेवलपर्स के लिए Spotify सांत्वना देना।अपना आवेदन पंजीकृत करें
एक बार जब आप डेवलपर कंसोल में लॉग इन कर लेते हैं, तो वेब एपीआई तक पहुंच प्राप्त करने के लिए अपने एप्लिकेशन को पंजीकृत करें। डैशबोर्ड पेज पर, क्लिक करें एक ऐप बनाएं बटन, नाम और विवरण भरें, और अंत में, एप्लिकेशन बनाने के लिए नियम और शर्तें स्वीकार करें।
अंत में, पर क्लिक करें विन्यास बदलें रीडायरेक्ट यूआरएल सेटिंग्स में बदलने के लिए बटन। चूंकि आपका एप्लिकेशन अभी भी डेवलपमेंट मोड में है, इसलिए जोड़ें http://localhost: आपके रीडायरेक्ट URL के रूप में 3000। यह वह URL है जिसे आप Spotify के साथ प्रमाणित करने के बाद उपयोगकर्ता को रीडायरेक्ट करना चाहते हैं।
अपना आवेदन पंजीकृत करने के बाद, Spotify आपकी विशिष्ट ग्राहक आईडी और ग्राहक रहस्य प्रदान करेगा जिसका आप उपयोग कर सकते हैं:
- अपने रिएक्ट एप्लिकेशन में अपने Spotify क्रेडेंशियल्स के साथ लॉग इन करने के लिए Spotify प्रमाणीकरण प्रवाह जोड़ें।
- ट्रैक या एल्बम जैसे डेटा की खोज सहित विभिन्न वेब एपीआई समापन बिंदुओं के लिए अनुरोध करने के लिए अपना विशिष्ट एक्सेस टोकन प्राप्त करें।
रिएक्ट क्लाइंट सेट करें
एक रिएक्ट एप्लिकेशन बनाएं और रूट डायरेक्टरी में नेविगेट करें और एक नई फाइल बनाएं, .env, कुछ पर्यावरण चर सेट करने के लिए। आप Spotify के डेवलपर डैशबोर्ड से अपनी क्लाइंट आईडी प्राप्त कर सकते हैं।
REACT_APP_SPOTIFY_CLIENT_ID = "आपकी क्लाइंट आईडी"
REACT_APP_SPOTIFY_REDIRECT_URI = " http://localhost: 3000"
REACT_APP_SPOTIFY_AUTH_ENDPOINT = " https://accounts.spotify.com/authorize"
REACT_APP_SPOTIFY_RESPONSE_TYPE = "टोकन"आप इस एप्लिकेशन का कोड इसमें पा सकते हैं गिटहब रिपॉजिटरी.
आवश्यक पैकेज स्थापित करें
एक्सियोस स्थापित करें। Spotify के वेब API के लिए HTTP अनुरोध करने के लिए आप इसके तरीकों का उपयोग करेंगे।
एनपीएम अक्षीय स्थापित करेंSpotify का ऑथेंटिकेशन वर्कफ़्लो जोड़ें
Spotify निर्दिष्ट करता है कि किसी भी वेब एपीआई एंडपॉइंट के सभी अनुरोधों के अनुरोध हेडर में एक वैध एक्सेस टोकन है। एक्सेस टोकन प्राप्त करने के लिए, आपके एप्लिकेशन को पहले Spotify के साथ प्रमाणित करना होगा।
Spotify कई का समर्थन करता है सत्यापन और प्राधिकरणएक प्राधिकरण कोड, क्लाइंट क्रेडेंशियल्स या निहित अनुदान विधियों जैसे तरीके।
लागू करने के लिए सबसे सरल अंतर्निहित अनुदान विधि है जिसके लिए आवश्यक है कि कोई एप्लिकेशन ऑथ एंडपॉइंट (आपने इसे ईएनवी फ़ाइल में जोड़ा है) के लिए अनुरोध करता है, आपकी क्लाइंट आईडी से गुजर रहा है। सफल प्रमाणीकरण पर, Spotify एक निर्दिष्ट अवधि में समाप्त होने वाले एक्सेस टोकन प्रदान करके प्रतिक्रिया देगा।
अपनी src/App.js फ़ाइल खोलें, बॉयलरप्लेट रिएक्ट कोड हटाएं, और नीचे कोड जोड़ें:
आयात प्रतिक्रिया, {useState, useEffect} से'प्रतिक्रिया';
आयात खोजकर्ता से'./घटक/खोजकर्ता';समारोहअनुप्रयोग() {
कॉन्स्ट CLIENT_ID=प्रक्रिया.env. REACT_APP_SPOTIFY_CLIENT_ID
कॉन्स्ट REDIRECT_URI = process.env. REACT_APP_SPOTIFY_REDIRECT_URI
कॉन्स्ट AUTH_ENDPOINT =प्रक्रिया.env. REACT_APP_SPOTIFY_AUTH_ENDPOINT
कॉन्स्ट RESPONSE_TYPE = प्रक्रिया.env। REACT_APP_SPOTIFY_RESPONSE_TYPEकॉन्स्ट [टोकन, सेटटोकन] = यूज़स्टेट ("");
उपयोग प्रभाव (() => {
कॉन्स्ट हैश = खिड़कीस्थान.हैश;
होने देना टोकन = खिड़की.लोकलस्टोरेज.getItem("टोकन");
अगर (हैश && हैश) {
टोकन = हैश। सबस्ट्रिंग (1)।विभाजित करना("&")।पाना(elem => हाथ से शुरू होता है ("एक्सेस टोकन"))।विभाजित करना("=")[1];
खिड़की.स्थान। हैश = "";
खिड़की.लोकलस्टोरेज.सेटआइटम ("टोकन", टोकन);
}सेटटोकन (टोकन)
}, [])कॉन्स्ट लॉगआउट = () => {
सेटटोकन("");
खिड़की.localStorage.removeItem ("टोकन");
}वापस करना (
"अनुप्रयोग">"ऐप-हेडर">
निर्यातगलती करना अनुप्रयोग;
आइए इसे तोड़ दें:
- एक्सेस टोकन होने पर यह घटक सशर्त रूप से खोज घटक और लॉगआउट बटन को प्रस्तुत करता है अन्यथा मौजूद है, यह एक लिंक के साथ एक div को प्रस्तुत करता है जो उपयोगकर्ता को Spotify प्राधिकरण के लिए निर्देशित करता है पृष्ठ। लिंक में क्वेरी पैरामीटर हैं जो CLIENT_ID, REDIRECT_URI और RESPONSE_TYPE मान निर्दिष्ट करते हैं।
- एक बार जब आप एक उपयोगकर्ता को प्रमाणित कर लेते हैं, तो घटक के आरोहित होने पर कोड ब्लॉक चलाने के लिए यूज़फेक्ट हुक को कॉल करें। यह कोड ब्लॉक URL हैश से एक्सेस टोकन को पुनः प्राप्त करता है और इसे टोकन स्टेट वेरिएबल के नए मान के रूप में सेट करता है। यह प्रमाणीकरण स्थिति को बनाए रखने के लिए टोकन को स्थानीय संग्रहण में भी संग्रहीत करता है।
- राज्य में संग्रहीत एक्सेस टोकन के साथ, यह Spotify के वेब एपीआई के लिए अनुरोध करने के लिए खोजकर्ता घटक के लिए एक सहारा के रूप में पारित किया गया है।
- लॉग आउट करने के लिए, कोड केवल स्थानीय भंडारण से एक्सेस टोकन को हटा देता है और टोकन स्थिति को एक खाली स्ट्रिंग पर सेट करता है।
खोज कार्यात्मकता लागू करें और परिणाम प्रस्तुत करें
/Src निर्देशिका में, एक नया फ़ोल्डर बनाएँ और इसे घटक नाम दें। इस फ़ोल्डर के अंदर, एक नई फ़ाइल बनाएँ: Searcher.js, और नीचे कोड जोड़ें।
आयात प्रतिक्रिया, {useState, useEffect} से'प्रतिक्रिया'
आयात axios से'अक्षीय';समारोहखोजकर्ता(रंगमंच की सामग्री) {
कॉन्स्ट [SearchKey, setSearchKey] = useState("")
कॉन्स्ट [ट्रैक्स, सेटट्रैक्स] = यूज़स्टेट ([])
कॉन्स्ट access_token = props.token
कॉन्स्ट सर्चआर्टिस्ट = async () => {
कॉन्स्ट {डेटा} = इंतजार axios.get(" https://api.spotify.com/v1/search", {
हेडर: {
'सामग्री प्रकार': "एप्लिकेशन/जेसन",
'प्राधिकरण': 'वाहक ${access_token}`
},
परम: {
क्यू: सर्चकी,
प्रकार: "कलाकार"
}
})
वर कलाकारआईडी = data.artists.items[0]।पहचानवर कलाकार ट्रैक्स = इंतजार axios.get(` https://api.spotify.com/v1/artists/${artistID}/top-tracks`, {
हेडर: {
प्राधिकरण: 'वाहक ${access_token}`
},
परम: {
सीमा: 10,
बाज़ार: 'हम'
}
})सेटट्रैक्स (artistTracks.data.tracks);
}वापस करना (
<>"खोज फ़ॉर्म">
वर्गनाम ="नाम"
टाइप ="मूलपाठ"
प्लेसहोल्डर ="कलाकार के नाम से खोजें ..."
onChange={(e) => {setSearchKey (e.target.value)}}
/>
निर्यातगलती करना खोजकर्ता
आइए इसे तोड़ दें:
- घटक access_token स्थिरांक को परिभाषित करता है जो इसे एक प्रोप के रूप में पारित टोकन संपत्ति पर सेट करता है। यह बाद में इस टोकन को एपीआई अनुरोध के हेडर में Spotify के खोज एपीआई समापन बिंदु पर पास करता है।
- दो अवस्थाओं को परिभाषित करें: सर्चकी और ट्रैक्स। SearchKey स्थिति खोज इनपुट का वर्तमान मान रखती है। ट्रैक स्थिति में कलाकार के लिए शीर्ष 10 ट्रैक की एक सरणी होती है जिसे Spotify खोज वापस कर देगी।
- searchArtist फ़ंक्शन, SearchKey मान के आधार पर कलाकारों के डेटा को खोजने के लिए Spotify API को GET अनुरोध करता है।
- यह तब प्रतिक्रिया डेटा से कलाकार की आईडी निकालता है और उस कलाकार के शीर्ष ट्रैक को पुनः प्राप्त करने के लिए एक और GET अनुरोध करता है। प्रतिक्रिया डेटा से, यह शीर्ष 10 ट्रैक निकालता है और ट्रैक चर सेट करता है।
- घटक एक इनपुट फ़ील्ड और एक खोज बटन देता है। जब कोई उपयोगकर्ता खोज बटन पर क्लिक करता है, तो वह किसी विशेष कलाकार के लिए शीर्ष ट्रैक लाने और प्रदर्शित करने के लिए searchArtist फ़ंक्शन को कॉल करता है। अंत में, यह सूची के रूप में ट्रैक ऐरे में शीर्ष पांच ट्रैक को रेंडर करने के लिए मैप फ़ंक्शन का उपयोग करता है।
परिवर्तनों को अद्यतन करने के लिए अपना विकास सर्वर चलाएँ, फिर जाएँ http://localhost: परिणाम देखने के लिए आपके ब्राउज़र में 3000।
Spotify की विशेषताओं के साथ अपने एप्लिकेशन को अनुकूलित करें
इस गाइड ने कलाकारों के संगीत डेटा की खोज के लिए Spotify के वेब एपीआई से अनुरोध करने के लिए आवश्यक कदमों पर प्रकाश डाला। हालाँकि, आप इसके SDKs और API द्वारा प्रदान की गई Spotify की सुविधाओं के साथ और अधिक कर सकते हैं जैसे कि इसके वेब प्लेबैक प्लेयर को Spotify के समान लुक और फील के साथ एकीकृत करना।
स्पॉटिफी के एसडीके और एपीआई का लाभ यह है कि वे फीचर समृद्ध हैं और आप उन्हें आसानी से किसी भी वेब या मोबाइल एप्लिकेशन में एकीकृत कर सकते हैं।
