Βελτιώστε την εμπειρία πολυμέσων
Εάν χρησιμοποιείτε αυτήν την εφαρμογή ιστού με τα αγγλικά ή γερμανικά τοπικά, θα δείτε ένα κουμπί αναπαραγωγής ήχου στην κορυφή του άρθρου. Κάνοντας κλικ στο κουμπί ξεκινά ένα ηχητικό κομμάτι για το γραπτό κείμενο. Χωρίς τροποποιήσεις, αυτό λειτουργεί πολύ ωραίο, αλλά σκέφτηκα ότι θα μπορούσα να το βελτιώσω.
Για να παρέχετε περισσότερα δεδομένα και ακόμη και ελέγχους αναπαραγωγής, μπορείτε τώρα να χρησιμοποιήσετε ένα νέο 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 έχει σήμανση ως πειραματικό, αλλά μπορεί ήδη να χρησιμοποιηθεί με τα περισσότερα σύγχρονα προγράμματα περιήγησης.
