Berikan Pengguna Kawalan: API Sesi Media

Bayangkan ini: Pembunuh Kendrick Lamar trek letupan dari salah satu tab pelayar anda. Anda mengasyikkan, tetapi seseorang memasuki, dan anda perlu menjeda. Tab mana? Pelayar menawarkan bantuan terhad; Anda mungkin membisukan semua audio, tetapi tidak akan mengawal secara langsung?

API sesi media menyelesaikan ini. Ia memanjangkan kawalan main balik media di luar tab Bermain, menawarkan akses melalui:

• Kawasan Pemberitahuan Peranti Mudah Alih
• Wearables
• Hab media desktop

Selain itu, ia membolehkan kawalan menggunakan kunci media dan pembantu suara (Siri, Pembantu Google, Bixby, Alexa).

Memahami API Sesi Media

Pusat API di dua antara muka:

• MediaMetadata : Menyediakan butiran media (tajuk, album, karya seni, artis - Kendrick Lamar, dalam contoh kami).
• MediaSession : Menguruskan fungsi main balik.

Sebelum pelaksanaan, selalu periksa sokongan penyemak imbas:

 jika ('MediaSession' dalam Navigator) {
  // Kod API sesi media di sini
}

Antara muka MediaMetadata

MediaMetadata.MediaMetadata() mencipta objek MediaMetadata . Ciri -ciri utama termasuk:

• MediaMetadata.title : Tajuk Media.
• MediaMetadata.artist : artis atau kumpulan.
• MediaMetadata.album : Nama Album.
• MediaMetadata.artwork : pelbagai objek MediaImage (URL imej, saiz, jenis mime).

Contoh untuk "Baiklah" Kendrick Lamar:

 jika ('MediaSession' dalam Navigator) {
  navigator.mediasession.metadata = mediametadata baru ({
    Tajuk: 'Baiklah',
    Artis: 'Kendrick Lamar',
    Album: 'To Pimp a Butterfly',
    Karya Seni: [
      {src: 'https: // mytechnicalarticle/kendrick-lamar/to-pimp-a-butterfly/alright/96x96', saiz: '96x96', type: 'image/png'}.
      {src: 'https: // mytechnicalarticle/kendrick-lamar/to-pimp-a-butterfly/alright/128x128', saiz: '128x128', jenis: 'image/png'},
      // Tambah lebih banyak saiz (192x192, 256x256, dan lain -lain)
    ]
  });
}

Antara muka MediaSession

Antara muka ini menyediakan kawalan main balik pengguna:

• play() : Memulakan main balik.
• pause() : Jeda main balik.
• previoustrack() : Memainkan trek sebelumnya.
• nexttrack() : Memainkan trek seterusnya.
• seekbackward() : mencari ke belakang (oleh offset yang ditentukan).
• seekforward() : mencari ke hadapan.
• seekto() : mencari masa tertentu.
• stop() : Berhenti main balik.
• skipad() : Melangkau iklan (butiran pelaksanaan yang ditinggalkan di sini untuk keringkasan).

setActionHandler() mendaftarkan pengendali untuk tindakan ini. Contoh untuk bermain/jeda:

 biarkan baik -baik saja = audio baru (); // Gunakan audio dan bukannya htmlaudioelement

jika ('MediaSession' dalam Navigator) {
  Navigator.MediasSsion.SetActionHandler ('Play', () => Alright.play ());
  navigator.mediassion.setActionHandler ('jeda', () => alright.pause ());
}

Pengendali yang sama dilaksanakan untuk previoustrack , nexttrack , seekbackward , seekforward , seekto , dan stop . seekbackward dan seekforward Gunakan offset 10 saat lalai jika details.seekOffset tidak tersedia. seekto mengendalikan kedua -dua standard dan cepat mencari. Pengendali stop menjeda dan menetapkan semula masa main balik.

Ingatlah untuk mengemas kini keadaan main balik menggunakan setPositionState() selepas setiap tindakan:

 jika ('MediaSession' dalam Navigator) {
  navigator.mediasession.setPositionState ({
    Tempoh: Alright.Duration,
    Playbackrate: Alright.playbackrate,
    Kedudukan: Alright.Currenttime
  });
}

Pengendalian ralat adalah penting; Balut setActionHandler panggilan dalam try...catch blok untuk mengendalikan tindakan yang tidak disokong dengan anggun.

Contoh lengkap yang menggabungkan pengendalian ralat dan kemas kini negeri disediakan dalam artikel asal. Ingatlah untuk menggantikan URL imej letak dengan URL sebenar. Demo mempamerkan fungsi API di pelbagai peranti dan platform. Pertimbangkan untuk melaksanakan API ini dalam aplikasi kaya media anda untuk pengalaman pengguna yang dipertingkatkan.

Atas ialah kandungan terperinci Berikan Pengguna Kawalan: API Sesi Media. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!