मीडिया सत्र एपीआई

मीडिया के अनुभव को बढ़ाएं

यदि आप इस वेब ऐप का उपयोग अंग्रेजी या जर्मन भाषा के साथ कर रहे हैं, तो आपको लेख के शीर्ष पर एक ऑडियो प्लेबैक बटन दिखाई देगा। बटन पर क्लिक करने से लिखित पाठ के लिए एक जोर से पढ़ने वाला ऑडियो ट्रैक शुरू हो जाता है। किसी भी संशोधन के बिना, यह बहुत अच्छा काम करता है, लेकिन मैंने सोचा कि मैं इसमें सुधार कर सकता हूं।

अधिक डेटा और यहां तक कि प्लेबैक नियंत्रण प्रदान करने के लिए, अब आप "मीडिया सत्र एपीआई" नामक प्रगतिशील वेब ऐप्स के लिए उपलब्ध एक नए एपीआई का उपयोग कर सकते हैं। यदि किसी ब्राउज़र के पास इसके लिए समर्थन है, तो एप्लिकेशन मीडिया के अनुभव को महत्वपूर्ण रूप से बढ़ा सकता है।

• एक एल्बम कलाकृति प्रदान करें
• ऑडियो ट्रैक के बारे में अधिक जानकारी प्रदान करें जैसे शीर्षक, एल्बम का नाम या कलाकार का नाम
• प्लेबैक नियंत्रण प्रदान करें, ताकि उपयोगकर्ता आपके वेब ऐप के बाहर ऑडियो ट्रैक के कुछ हिस्सों को रोक सकें या छोड़ सकें

सीधे शब्दों में कहा, बस किया

"मीडिया सत्र एपीआई" का कार्यान्वयन बहुत सीधा है और इसके लिए कोड की केवल कुछ पंक्तियों की आवश्यकता होती है।

function setMediaSessionMetaData(props){
  // Progressive enhancement of your PWA,
  // which means we have to check if the
  // new API is available.
  if(!('mediaSession' in navigator)){
    return;
  }
  
  navigator.mediaSession.metadata = new MediaMetadata({
    title: props.title,
    artist: props.artist
    album: props.album,
    artwork: props.artwork
  });
  
  // Add action handlers, if any.
  // For a complete list, check out the
  // MDN-link in the addendum.
  if(props.play){
    navigator.mediaSession.setActionHandler('play', function() { /* Code excerpted. */ });
  }
}

// ... Later in your code ...

setMediaSessionMetaData({
  title: "Song name",
  artist: "Artist name",
  album: "Album name",
  artwork: [{ 
    src: 'https://dummyimage.com/512x512',
    sizes: '512x512',
    type: 'image/png' }]
});

यदि आप टाइपस्क्रिप्ट का उपयोग कर रहे हैं, तो एनपीएम पर उपलब्ध संबंधित प्रकार की परिभाषाओं वाला एक पैकेज भी है।

परिवर्तन जोड़े जाने के बाद, आप Google Chrome जैसे API के समर्थन वाले ब्राउज़र में ऑडियो ट्रैक चलाकर अपने कार्यान्वयन को सत्यापित कर सकते हैं। अगर सब कुछ सही तरीके से सेट किया गया है, तो क्रोम में मीडिया विंडो अब आपके कार्यान्वयन के आधार पर दिए गए नाम, एल्बम आर्टवर्क और साथ ही नियंत्रण दिखाएगा।

समापन शब्द

"मीडिया सत्र एपीआई" आपके पीडब्लूए के लिए एक बहुत ही सरल जोड़ है, जो आपके उपयोगकर्ताओं को उन्नत मेटाडेटा और नियंत्रण के साथ गाने या वीडियो का अनुभव करने की अनुमति देता है। एपीआई वर्तमान में प्रयोगात्मक के रूप में चिह्नित है, लेकिन अधिकांश आधुनिक ब्राउज़रों के साथ पहले से ही इसका उपयोग किया जा सकता है।