Geben Sie den Benutzern die Kontrolle: die Mediensitzungs -API

Stellen Sie sich Folgendes vor: Ein Killer Kendrick Lamar Track blastet aus einem Ihrer vielen Browser -Registerkarten. Du bist öfter, aber jemand tritt ein und du musst es pausieren. Welche Registerkarte? Browser bieten begrenzte Hilfe; Sie könnten alle Audio stumm schalten, aber wäre die direkte Kontrolle nicht besser?

Die Mediensitzungs -API löst dies. Es erweitert die Medien -Wiedergabesteuerungen über die Registerkarte "Spielen" und bieten Zugriff über:

• Benachrichtigungsbereiche für mobile Geräte
• Wearables
• Desktop -Medienzentren

Darüber hinaus ermöglicht es die Steuerung mithilfe von Medienschlüssel und Sprachassistenten (Siri, Google Assistant, Bixby, Alexa).

Verständnis der Mediensitzungs -API

Die API konzentriert sich auf zwei Schnittstellen:

• MediaMetadata : Bietet Mediendetails (Titel, Album, Kunstwerk, Künstler - Kendrick Lamar, in unserem Beispiel).
• MediaSession : Verwaltung der Wiedergabefunktionalität.

Überprüfen Sie vor der Implementierung immer den Browserunterstützung:

 if ('Mediensession' im Navigator) {
  // Mediensitzungs -API -Code hier
}

MediaMetadata -Schnittstelle

MediaMetadata.MediaMetadata() erstellt ein MediaMetadata -Objekt. Zu den wichtigsten Eigenschaften gehören:

• MediaMetadata.title : Medientitel.
• MediaMetadata.artist : Künstler oder Gruppe.
• MediaMetadata.album : Albumname.
• MediaMetadata.artwork : Array von MediaImage -Objekten (Bild -URLs, Größen, MIME -Typen).

Beispiel für Kendrick Lamars "in Ordnung":

 if ('Mediensession' im Navigator) {
  Navigator.MediaSession.metadata = new MediaMetadata ({{{{
    Titel: 'Okay',,
    Künstler: 'Kendrick Lamar',
    Album: 'to Pimp a Butterfly',
    Kunstwerk: [
      {src: 'https: // mytechnicalArticle/kendrick-lamar/to-pimp-a-butterfly/alright/96x96', Größen: '96x96', Typ: 'Image/png'},
      {src: 'https: // mytechnicalArticle/kendrick-lamar/to-pimp-a-butterfly/alright/128x128', Größen: '128x128', Typ: 'Image/png'},
      // Weitere Größen hinzufügen (192x192, 256x256 usw.)
    ]
  });
}

MediaSession

Diese Schnittstelle bietet Benutzer -Wiedergabesteuerung:

• play() : Startet die Wiedergabe.
• pause() : Pausen der Wiedergabe.
• previoustrack() : Spielt den vorherigen Track.
• nexttrack() : spielt den nächsten Track.
• seekbackward() : sucht rückwärts (durch einen bestimmten Offset).
• seekforward() : sucht vorwärts.
• seekto() : Versuchen Sie zu einer bestimmten Zeit.
• stop() : stoppt die Wiedergabe.
• skipad() : Überspringt Anzeigen (Implementierungsdetails hier für die Kürze weggelassen).

setActionHandler() registriert Handler für diese Aktionen. Beispiel für Spiel/Pause:

 lass alright = new audio (); // Audio anstelle von htmlaudioelement verwenden

if ('Mediensession' im Navigator) {
  Navigator.MediaSession.setActionHandler ('Play', () => alright.play ());
  Navigator.MediaSession.setActionHandler ('pause', () => alright.pause ());
}

Ähnliche Handler werden für previoustrack , nexttrack , seekbackward , seekforward , seekto und stop . seekbackward und seekforward verwenden einen Standardversatz von 10 Sekunden, wenn details.seekOffset ist nicht verfügbar. seekto um sowohl Standard als auch schnelle Suche. Der stop -Handler macht eine Pause und setzt die Wiedergabezeit zurück.

Denken Sie daran, den Wiedergabestatus mithilfe von setPositionState() nach jeder Aktion zu aktualisieren:

 if ('Mediensession' im Navigator) {
  Navigator.MediaSession.setPositionState ({{{
    Dauer: Okay.Duration,
    PlaybackRate: Okay.Playbackrate,
    Position: Okay.CurrentTime
  });
}

Fehlerbehandlung ist entscheidend; Wrap setActionHandler -Anrufe ruft einen try...catch Block auf, um nicht unterstützte Aktionen anmutig zu erledigen.

Im ursprünglichen Artikel finden Sie ein vollständiges Beispiel für Fehlerbehandlungen und Statusaktualisierungen. Denken Sie daran, die URLs von Platzhaltern image durch tatsächliche URLs zu ersetzen. Die Demo zeigt die Funktionalität der API über verschiedene Geräte und Plattformen hinweg. Erwägen Sie, diese API in Ihren medienreichen Anwendungen für erweiterte Benutzererfahrungen zu implementieren.

Das obige ist der detaillierte Inhalt vonGeben Sie den Benutzern die Kontrolle: die Mediensitzungs -API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!