Donner aux utilisateurs le contrôle: l'API de session multimédia

Imaginez ceci: une piste Killer Kendrick Lamar explose de l'un de vos nombreux onglets de navigateur. Vous groove, mais quelqu'un entre et vous devez le faire une pause. Quel onglet? Les navigateurs offrent une aide limitée; Vous pourriez mue tout audio, mais le contrôle direct ne serait-il pas meilleur?

L'API de session multimédia résout cela. Il étend les contrôles de lecture multimédia au-delà de l'onglet de jeu, offrant l'accès via:

• Zones de notification des appareils mobiles
• Portables
• Centres de supports de bureau

En outre, il permet le contrôle à l'aide de clés multimédias et d'assistants vocaux (Siri, Google Assistant, Bixby, Alexa).

Comprendre l'API de la session des médias

L'API se concentre sur deux interfaces:

• MediaMetadata : Fournit les détails des médias (titre, album, œuvre d'art, artiste - Kendrick Lamar, dans notre exemple).
• MediaSession : gère la fonctionnalité de lecture.

Avant la mise en œuvre, vérifiez toujours le support du navigateur:

 if ('MediaSession' dans Navigator) {
  // code API de session multimédia ici
}

Interface MediaMetadata

MediaMetadata.MediaMetadata() crée un objet MediaMetadata . Les propriétés clés comprennent:

• MediaMetadata.title : titre de média.
• MediaMetadata.artist : artiste ou groupe.
• MediaMetadata.album : Nom de l'album.
• MediaMetadata.artwork : tableau d'objets MediaImage (URL d'image, tailles, types MIME).

Exemple pour "bien" de Kendrick Lamar:

 if ('MediaSession' dans Navigator) {
  navigator.mediasession.metadata = new MediaMetadata ({
    Titre: 'bien',
    Artiste: «Kendrick Lamar»,
    Album: «To Pimp a Butterfly»,
    œuvre d'art: [
      {src: 'https: // mytechnicalarticle / kendrick-Lamar / to----PIMP-a-butterfly / alright / 96x96', tailles: '96x96', type: 'image / png'},
      {src: 'https: // mytechnicalarticle / kendrick-Lamar / to----PIMP-a-butterfly / alright / 128x128', tailles: '128x128', type: 'image / png'},
      // Ajouter plus de tailles (192x192, 256x256, etc.)
    ]]
  });
}

Interface MediaSession

Cette interface fournit un contrôle de lecture de l'utilisateur:

• play() : commence la lecture.
• pause() : la lecture de pause.
• previoustrack() : joue la piste précédente.
• nexttrack() : joue la piste suivante.
• seekbackward() : cherche en arrière (par un décalage spécifié).
• seekforward() : cherche en avant.
• seekto() : cherche à une période spécifique.
• stop() : arrête la lecture.
• skipad() : sauter les publicités (détails d'implémentation omis ici pour brièveté).

setActionHandler() enregistre les gestionnaires de ces actions. Exemple de jeu / pause:

 Laissez bien = nouveau Audio (); // Utilisez l'audio au lieu de HtmlAudioElement

if ('MediaSession' dans Navigator) {
  navigator.mediasession.setActionHandler ('play', () => alright.play ());
  navigator.mediasession.setActionHandler ('pause', () => alright.pause ());
}

Des gestionnaires similaires sont mis en œuvre pour previoustrack , nexttrack , seekbackward , seekforward , seekto et stop . seekbackward et seekforward utilisent un décalage par défaut de 10 secondes si details.seekOffset . seekto à gérer à la fois la recherche standard et rapide. Le gestionnaire stop s'arrête et réinitialise le temps de lecture.

N'oubliez pas de mettre à jour l'état de lecture à l'aide de setPositionState() après chaque action:

 if ('MediaSession' dans Navigator) {
  navigator.mediasession.setPositionState ({{
    Durée: bien.
    playbackrate: bien.Playbackrate,
    Position: d'accord.
  });
}

La gestion des erreurs est cruciale; Enveloppant setActionHandler appelle dans un try...catch Block pour gérer gracieusement les actions non étayées.

Un exemple complet incorporant la gestion des erreurs et les mises à jour d'état est fourni dans l'article d'origine. N'oubliez pas de remplacer les URL de l'image d'image d'espace réservé par des URL réelles. La démo présente les fonctionnalités de l'API sur divers appareils et plateformes. Envisagez d'implémenter cette API dans vos applications riches en médias pour une expérience utilisateur améliorée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!