تعزيز تجربة وسائل الإعلام
إذا كنت تستخدم تطبيق الويب هذا مع اللغة الإنجليزية أو الألمانية ، فسترى زر تشغيل الصوت أعلى المقالة. يؤدي النقر فوق الزر إلى بدء مسار صوتي للقراءة بصوت عالٍ للنص المكتوب. بدون أي تعديلات ، هذا يعمل بشكل جيد للغاية ، لكنني اعتقدت أنه يمكنني تحسينه.
لتوفير المزيد من البيانات وحتى عناصر التحكم في التشغيل ، يمكنك الآن استخدام واجهة برمجة تطبيقات جديدة متاحة لتطبيقات الويب التقدمية تسمى "واجهة برمجة تطبيقات جلسة الوسائط". إذا كان المستعرض يدعمه ، يمكن للتطبيق تحسين تجربة الوسائط بشكل كبير.
- تقديم عمل فني للألبوم
- توفير مزيد من المعلومات حول المسار الصوتي مثل العنوان أو اسم الألبوم أو اسم الفنان
- توفير عناصر تحكم في التشغيل ، بحيث يمكن للمستخدمين إيقاف أو تخطي أجزاء من مسار الصوت خارج تطبيق الويب الخاص بك
قال ببساطة ، وببساطة
يعد تنفيذ "واجهة برمجة تطبيقات جلسة الوسائط" واضحًا جدًا ولا يتطلب سوى بضعة أسطر من التعليمات البرمجية.
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.
بعد إضافة التغييرات ، يمكنك التحقق من التنفيذ عن طريق تشغيل المسار الصوتي في متصفح يدعم واجهة برمجة التطبيقات ، مثل Google Chrome. إذا تم إعداد كل شيء بشكل صحيح ، فستعرض نافذة الوسائط في Chrome الآن الأسماء المقدمة ، والعمل الفني للألبوم ، بالإضافة إلى عناصر التحكم ، اعتمادًا على التنفيذ.
كلمات ختامية
تعد "واجهة برمجة تطبيقات جلسة الوسائط" إضافة بسيطة جدًا إلى PWA الخاص بك ، والتي تتيح للمستخدمين تجربة الأغاني أو مقاطع الفيديو باستخدام بيانات وصفية وعناصر تحكم محسّنة. تم وضع علامة API حاليًا على أنها تجريبية ، ولكن يمكن استخدامها بالفعل مع معظم المتصفحات الحديثة.