שפר את חוויית התקשורת
אם אתה משתמש באפליקציית אינטרנט זו עם האנגלית או הגרמנית, תראה לחצן הפעלת שמע בראש המאמר. לחיצה על הכפתור מפעילה רצועת שמע שהוקראה לקול הטקסט הכתוב. ללא כל שינוי זה עובד מאוד נחמד, אבל חשבתי שאוכל לשפר את זה.
כדי לספק יותר נתונים ואפילו בקרות הפעלה, אתה יכול כעת להשתמש ב- API חדש הזמין לאפליקציות אינטרנט מתקדמות בשם "Media Session API". אם לדפדפן יש תמיכה בכך, היישום יכול לשפר את חוויית המדיה באופן משמעותי.
- לספק יצירות אמנות של אלבום
- לספק מידע נוסף על רצועת השמע כגון כותרת, שם אלבום או שם אמן
- לספק פקדי השמעה, כך שמשתמשים יכולים להשהות או לדלג על חלקים ממסלול האודיו מחוץ לאפליקציית האינטרנט שלך
פשוט נאמר, פשוט נעשה
היישום של ה- "Media Session API" הוא מאוד פשוט ודורש רק כמה שורות קוד.
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' }]
});
אם אתה משתמש ב- Typescript, קיימת גם חבילה עם הגדרות הסוג הקשורות הזמינות ב- NPM.
לאחר הוספת השינויים, באפשרותך לאמת את יישומך על ידי הפעלת רצועת השמע בדפדפן עם תמיכה ב- API, כגון Google Chrome. אם הכל מוגדר כהלכה, כעת חלון המדיה ב- Chrome יציג את השמות שסופקו, גרפיקה של האלבום וכן פקדים, בהתאם ליישום שלך.
מילות סיום
ה- "Media Session API" הוא תוספת פשוטה מאוד ל- PWA שלך, המאפשרת למשתמשים שלך לחוות שירים או סרטונים עם מטא-נתונים משופרים ופקדים. ממשק ה- API מסומן כרגע כניסיוני, אך ניתן כבר להשתמש בו ברוב הדפדפנים המודרניים.
