ปรับแต่งการแจ้งเตือนสื่อและการควบคุมการเล่นด้วย Media Session API

วิธีผสานรวมกับคีย์สื่อฮาร์ดแวร์ ปรับแต่งการแจ้งเตือนสื่อ และอื่นๆ

François Beaufort

เพื่อแจ้งให้ผู้ใช้ทราบว่ากำลังเล่นอะไรอยู่ในเบราว์เซอร์ของตนและควบคุมได้ โดยไม่ต้องกลับไปยังหน้าที่เปิด Media Session API เปิดตัว ซึ่งช่วยให้นักพัฒนาเว็บปรับแต่งประสบการณ์นี้ได้โดยใช้ ข้อมูลเมตาในการแจ้งเตือนสื่อที่กำหนดเอง เหตุการณ์สื่อ เช่น การเล่น การหยุดชั่วคราว การกรอวิดีโอ ติดตามการเปลี่ยนแปลง และกิจกรรมการประชุมทางวิดีโอ เช่น การปิดเสียง/เปิดเสียง ไมโครโฟน, เปิด/ปิดกล้อง และวางสาย การปรับแต่งเหล่านี้ พร้อมให้ใช้งานในหลายบริบท ซึ่งรวมถึงฮับสื่อบนเดสก์ท็อป การแจ้งเตือนสื่อ บนอุปกรณ์เคลื่อนที่ และแม้แต่บนอุปกรณ์ที่สวมใส่ได้ ฉันจะอธิบายการปรับแต่งเหล่านี้ใน บทความนี้

วันที่

เกี่ยวกับ Media Session API

Media session API มีประโยชน์และความสามารถหลายอย่าง ดังนี้

• รองรับคีย์สื่อฮาร์ดแวร์
• การแจ้งเตือนสื่อได้รับการปรับแต่งบนอุปกรณ์เคลื่อนที่ เดสก์ท็อป และอุปกรณ์ที่สวมใส่ได้ที่จับคู่ไว้
• ฮับสื่อมีให้บริการบนเดสก์ท็อป
• การควบคุมสื่อในหน้าจอล็อกมีให้ใช้งานใน ChromeOS และอุปกรณ์เคลื่อนที่
• การควบคุมหน้าต่างการแสดงภาพซ้อนภาพจะใช้ได้กับการเล่นเสียง การประชุมทางวิดีโอและการนำเสนอสไลด์
• การผสานรวม Assistant บนอุปกรณ์เคลื่อนที่พร้อมใช้งาน

ตัวอย่างที่จะช่วยให้คุณเห็นบางประเด็นเหล่านี้

ตัวอย่างที่ 1: หากผู้ใช้กด "แทร็กถัดไป" แป้นสื่อของแป้นพิมพ์ นักพัฒนาเว็บสามารถจัดการการดำเนินการของผู้ใช้นี้ได้ไม่ว่าเบราว์เซอร์จะอยู่ในเบื้องหน้า หรือพื้นหลัง

ตัวอย่างที่ 2: หากผู้ใช้ฟังพอดแคสต์บนเว็บขณะที่ใช้อุปกรณ์อยู่ ล็อกหน้าจอ ผู้ใช้ก็ยังสามารถ "ดูย้อนหลัง" ได้ ไอคอนจากแม่กุญแจ การควบคุมสื่อบนหน้าจอ เพื่อให้นักพัฒนาเว็บเลื่อนเวลาการเล่นย้อนกลับทีละน้อย วินาที

ตัวอย่างที่ 3: หากผู้ใช้มีแท็บเล่นเสียง ผู้ใช้จะหยุดได้ง่ายๆ ที่เล่นจากฮับสื่อบนเดสก์ท็อป เพื่อให้นักพัฒนาเว็บมีโอกาส ล้างสถานะ

ตัวอย่างที่ 4: ถ้าผู้ใช้อยู่ในการติดต่อวิดีโอ ก็สามารถกดปุ่ม "สลับ" ไมโครโฟน" ในหน้าต่างการแสดงภาพซ้อนภาพเพื่อหยุดไม่ให้เว็บไซต์ กำลังรับข้อมูลไมโครโฟน

ซึ่งทำผ่านอินเทอร์เฟซ 2 แบบที่แตกต่างกัน ได้แก่ อินเทอร์เฟซ MediaSession และอินเทอร์เฟซของ MediaMetadata ข้อแรกทำให้ผู้ใช้สามารถควบคุม กำลังเล่น วิธีที่ 2 คือวิธีที่คุณบอก MediaSession ว่าต้องควบคุมสิ่งใด

เพื่อให้เห็นภาพ ภาพด้านล่างแสดงให้เห็นว่า อินเทอร์เฟซเหล่านี้เกี่ยวข้องกับ ในสื่อ โดยในกรณีนี้คือการแจ้งเตือนสื่อบนอุปกรณ์เคลื่อนที่

วันที่

แจ้งให้ผู้ใช้ทราบว่ากำลังเล่นอะไรอยู่

เมื่อเว็บไซต์เล่นเสียงหรือวิดีโอ ผู้ใช้จะได้รับสื่อโดยอัตโนมัติ การแจ้งเตือนในถาดการแจ้งเตือนบนอุปกรณ์เคลื่อนที่หรือในฮับสื่อ บนเดสก์ท็อป เบราว์เซอร์จะพยายามอย่างดีที่สุดเพื่อแสดงข้อมูลที่เหมาะสมโดยใช้ ชื่อเอกสาร และรูปภาพไอคอนที่ใหญ่ที่สุดเท่าที่พบได้ ด้วยเซสชันสื่อ API ช่วยให้คุณปรับแต่งการแจ้งเตือนสื่อได้ด้วยสื่อที่สมบูรณ์ยิ่งขึ้น เช่น ชื่อ ชื่อศิลปิน ชื่ออัลบั้ม และอาร์ตเวิร์กดังที่แสดงด้านล่าง

Chrome ส่งคำขอ "เต็ม" โฟกัสเสียงเพื่อแสดงการแจ้งเตือนสื่อเฉพาะเมื่อ ระยะเวลาของสื่ออย่างน้อย 5 วินาที ซึ่งช่วยให้แน่ใจว่าเสียงที่เกิดขึ้นเอง เช่น dings ไม่แสดงการแจ้งเตือน

// After media (video or audio) starts playing
await document.querySelector("video").play();

if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Never Gonna Give You Up',
    artist: 'Rick Astley',
    album: 'Whenever You Need Somebody',
    artwork: [
      { src: 'https://via.placeholder.com/96',   sizes: '96x96',   type: 'image/png' },
      { src: 'https://via.placeholder.com/128', sizes: '128x128', type: 'image/png' },
      { src: 'https://via.placeholder.com/192', sizes: '192x192', type: 'image/png' },
      { src: 'https://via.placeholder.com/256', sizes: '256x256', type: 'image/png' },
      { src: 'https://via.placeholder.com/384', sizes: '384x384', type: 'image/png' },
      { src: 'https://via.placeholder.com/512', sizes: '512x512', type: 'image/png' },
    ]
  });

  // TODO: Update playback state.
}

เมื่อเล่นจบ ไม่จำเป็นต้อง "ปล่อย" เซสชันสื่ออย่าง การแจ้งเตือนจะหายไปโดยอัตโนมัติ โปรดทราบว่า ระบบจะใช้ navigator.mediaSession.metadata เมื่อเริ่มเล่นครั้งถัดไป อย่างไรก็ตาม นี่เป็นเหตุผลที่คุณควรอัปเดตเมื่อแหล่งที่มาของการเล่นสื่อ เพื่อให้แน่ใจว่าข้อมูลที่เกี่ยวข้องจะแสดงในการแจ้งเตือนสื่อ

สิ่งที่ควรทราบเกี่ยวกับข้อมูลเมตาของสื่อมีดังนี้

• อาร์เรย์การแจ้งเตือนรองรับ URL ของ Blob และ URL ข้อมูล
• หากไม่ได้กำหนดอาร์ตเวิร์กและมีรูปภาพไอคอน (ระบุโดยใช้ <link rel=icon>) ในขนาดที่ต้องการ การแจ้งเตือนสื่อจะใช้อาร์ตเวิร์กดังกล่าว
• ขนาดเป้าหมายของอาร์ตเวิร์กการแจ้งเตือนใน Chrome สำหรับ Android คือ 512x512 สำหรับ อุปกรณ์ระดับโลว์เอนด์ ราคา 256x256
• ใช้แอตทริบิวต์ title ขององค์ประกอบ HTML ของสื่อใน "กำลังเล่น" วิดเจ็ต macOS
• หากทรัพยากรสื่อฝังอยู่ (เช่น ใน iframe) Media Session API ต้องตั้งค่าข้อมูลจากบริบทที่ฝังไว้ ดูตัวอย่างด้านล่าง

<iframe id="iframe">
  <video>...</video>
</iframe>
<script>
  iframe.contentWindow.navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Never Gonna Give You Up',
    ...
  });
</script>

นอกจากนี้ คุณยังเพิ่มข้อมูลของบทแต่ละบทได้ด้วย เช่น ชื่อส่วน การประทับเวลา และภาพหน้าจอลงในข้อมูลเมตาของสื่อ ซึ่งจะช่วยให้ผู้ใช้ไปยังเนื้อหาของสื่อได้

navigator.mediaSession.metadata = new MediaMetadata({
  // title, artist, album, artwork, ...
  chapterInfo: [{
    title: 'Chapter 1',
    startTime: 0,
    artwork: [
      { src: 'https://via.placeholder.com/128', sizes: '128x128', type: 'image/png' },
      { src: 'https://via.placeholder.com/512', sizes: '512x512', type: 'image/png' },
    ]
  }, {
    title: 'Chapter 2',
    startTime: 42,
    artwork: [
      { src: 'https://via.placeholder.com/128', sizes: '128x128', type: 'image/png' },
      { src: 'https://via.placeholder.com/512', sizes: '512x512', type: 'image/png' },
    ]
  }]
});

อนุญาตให้ผู้ใช้ควบคุมรายการที่กำลังเล่น

การกระทำในเซสชันสื่อคือการกระทำ (เช่น "เล่น" หรือ "หยุดชั่วคราว") ที่เว็บไซต์สามารถ แฮนเดิลเมื่อผู้ใช้โต้ตอบกับการเล่นสื่อปัจจุบัน การดำเนินการคือ คล้ายกับเหตุการณ์และทำงานคล้ายกับเหตุการณ์ต่างๆ เช่นเดียวกับเหตุการณ์ การดำเนินการต่างๆ ติดตั้งโดยการตั้งค่าเครื่องจัดการในอ็อบเจกต์ที่เหมาะสม อินสแตนซ์ของ MediaSession ในกรณีนี้ ระบบจะทริกเกอร์การดำเนินการบางอย่างเมื่อผู้ใช้กด ปุ่มจากชุดหูฟัง อุปกรณ์ระยะไกลเครื่องอื่น แป้นพิมพ์ หรือโต้ตอบกับ การแจ้งเตือนสื่อ

วันที่

เนื่องจากระบบอาจไม่รองรับการทำงานบางอย่างของเซสชันสื่อ เราจึงขอแนะนำให้ ใช้บล็อก try…catch เมื่อตั้งค่า

const actionHandlers = [
  ['play',          () => { /* ... */ }],
  ['pause',         () => { /* ... */ }],
  ['previoustrack', () => { /* ... */ }],
  ['nexttrack',     () => { /* ... */ }],
  ['stop',          () => { /* ... */ }],
  ['seekbackward',  (details) => { /* ... */ }],
  ['seekforward',   (details) => { /* ... */ }],
  ['seekto',        (details) => { /* ... */ }],
  /* Video conferencing actions */
  ['togglemicrophone', () => { /* ... */ }],
  ['togglecamera',     () => { /* ... */ }],
  ['hangup',           () => { /* ... */ }],
  /* Presenting slides actions */
  ['previousslide', () => { /* ... */ }],
  ['nextslide',     () => { /* ... */ }],
];

for (const [action, handler] of actionHandlers) {
  try {
    navigator.mediaSession.setActionHandler(action, handler);
  } catch (error) {
    console.log(`The media session action "${action}" is not supported yet.`);
  }
}

การยกเลิกการตั้งค่าเครื่องจัดการเซสชันสื่อเป็นเรื่องง่ายเหมือนกับการตั้งค่าเป็น null

try {
  // Unset the "nexttrack" action handler at the end of a playlist.
  navigator.mediaSession.setActionHandler('nexttrack', null);
} catch (error) {
  console.log(`The media session action "nexttrack" is not supported yet.`);
}

เมื่อตั้งค่าแล้ว เครื่องจัดการเซสชันสื่อจะยังคงอยู่ผ่านการเล่นสื่อ รูปแบบนี้คล้ายกับรูปแบบ Listener เหตุการณ์ เว้นแต่ว่าการจัดการเหตุการณ์ หมายความว่าเบราว์เซอร์จะหยุดดำเนินการที่เป็นค่าเริ่มต้น และใช้เป็น เป็นสัญญาณว่าเว็บไซต์ดังกล่าวสนับสนุนการใช้สื่อ ดังนั้น การควบคุมการใช้สื่อ จะไม่แสดงจนกว่าจะมีการตั้งค่าเครื่องจัดการการดำเนินการที่เหมาะสม

วันที่

เล่น / หยุดชั่วคราว

การดำเนินการ "play" บ่งชี้ว่าผู้ใช้ต้องการเล่นสื่อต่อ ในขณะที่ "pause" บ่งชี้ความประสงค์ที่จะหยุดไว้ชั่วคราว

ปุ่ม "เล่น/หยุดชั่วคราว" จะแสดงในการแจ้งเตือนสื่อและไอคอนที่เกี่ยวข้อง เบราว์เซอร์จะจัดการเหตุการณ์สื่อโดยอัตโนมัติ วิธีลบล้างค่าเริ่มต้น พฤติกรรม แฮนเดิล "เล่น" และ "หยุดชั่วคราว" การดำเนินการกับสื่อดังที่แสดงด้านล่าง

เบราว์เซอร์อาจพิจารณาไม่ให้เว็บไซต์เล่นสื่อเมื่อกรอวิดีโอหรือ เช่น การโหลด ในกรณีนี้ ให้ลบล้างลักษณะการทำงานนี้โดยตั้งค่า navigator.mediaSession.playbackStateไปยัง "playing" หรือ "paused" เพื่อให้แน่ใจ UI ของเว็บไซต์ซิงค์กับส่วนควบคุมการแจ้งเตือนสื่ออยู่เสมอ

const video = document.querySelector('video');

navigator.mediaSession.setActionHandler('play', async () => {
  // Resume playback
  await video.play();
});

navigator.mediaSession.setActionHandler('pause', () => {
  // Pause active playback
  video.pause();
});

video.addEventListener('play', () => {
  navigator.mediaSession.playbackState = 'playing';
});

video.addEventListener('pause', () => {
  navigator.mediaSession.playbackState = 'paused';
});

แทร็กก่อนหน้า

การดำเนินการ "previoustrack" บ่งชี้ว่าผู้ใช้ต้องการเริ่มต้น การเล่นสื่อปัจจุบันตั้งแต่ต้น ถ้าการเล่นสื่อมีแนวคิด เริ่มเล่น หรือย้ายไปยังรายการก่อนหน้าในเพลย์ลิสต์หากการเล่นสื่อ คิดว่าน่าจะเกี่ยวกับเพลย์ลิสต์

navigator.mediaSession.setActionHandler('previoustrack', () => {
  // Play previous track.
});

แทร็กถัดไป

การดำเนินการ "nexttrack" บ่งชี้ว่าผู้ใช้ต้องการย้ายการเล่นสื่อไปยัง รายการถัดไปในเพลย์ลิสต์หากการเล่นสื่อมีเนื้อหาเกี่ยวกับเพลย์ลิสต์

navigator.mediaSession.setActionHandler('nexttrack', () => {
  // Play next track.
});

หยุด

การดำเนินการ "stop" บ่งชี้ว่าผู้ใช้ต้องการหยุดเล่นสื่อและ ล้างสถานะนี้ตามความเหมาะสม

navigator.mediaSession.setActionHandler('stop', () => {
  // Stop playback and clear state if appropriate.
});

กรอกลับ / ไปข้างหน้า

การดำเนินการ "seekbackward" บ่งชี้ว่าผู้ใช้ต้องการย้ายสื่อ ระยะเวลาการเล่นย้อนหลังเป็นช่วงสั้นๆ ขณะที่ "seekforward" บ่งชี้ถึงความต้องการ เพื่อเลื่อนเวลาการเล่นสื่อไปข้างหน้าในช่วงเวลาสั้นๆ ในทั้ง 2 กรณี ระยะเวลาสั้นๆ หมายถึง 2-3 วินาที

ค่า seekOffset ที่ระบุไว้ในเครื่องจัดการการดำเนินการคือเวลาในหน่วยวินาทีเพื่อ เลื่อนเวลาเล่นสื่อตาม หากไม่ได้ระบุ (เช่น undefined) คุณควรใช้เวลาที่เหมาะสม (เช่น 10-30 วินาที)

const video = document.querySelector('video');
const defaultSkipTime = 10; /* Time to skip in seconds by default */

navigator.mediaSession.setActionHandler('seekbackward', (details) => {
  const skipTime = details.seekOffset || defaultSkipTime;
  video.currentTime = Math.max(video.currentTime - skipTime, 0);
  // TODO: Update playback state.
});

navigator.mediaSession.setActionHandler('seekforward', (details) => {
  const skipTime = details.seekOffset || defaultSkipTime;
  video.currentTime = Math.min(video.currentTime + skipTime, video.duration);
  // TODO: Update playback state.
});

กรอไปยังเวลาที่เจาะจง

การดำเนินการ "seekto" บ่งชี้ว่าผู้ใช้ต้องการย้ายการเล่นสื่อ ไปจนถึงเวลาที่เฉพาะเจาะจง

ค่า seekTime ที่ระบุไว้ในเครื่องจัดการการดำเนินการคือเวลาในหน่วยวินาทีเพื่อ เลื่อนเวลาเล่นสื่อไปที่

บูลีน fastSeek ที่ให้ไว้ในเครื่องจัดการการดำเนินการเป็นจริงหากการดำเนินการคือ ถูกเรียกหลายครั้งในลำดับและนี่ไม่ใช่การโทรครั้งสุดท้าย ในลำดับนั้น

const video = document.querySelector('video');

navigator.mediaSession.setActionHandler('seekto', (details) => {
  if (details.fastSeek && 'fastSeek' in video) {
    // Only use fast seek if supported.
    video.fastSeek(details.seekTime);
    return;
  }
  video.currentTime = details.seekTime;
  // TODO: Update playback state.
});

กำหนดตำแหน่งการเล่น

การแสดงตำแหน่งการเล่นสื่อในการแจ้งเตือนให้ถูกต้องแม่นยำนั้นทำได้ง่ายๆ เพื่อตั้งค่าสถานะตำแหน่งในเวลาที่เหมาะสม ดังต่อไปนี้ สถานะตำแหน่งเป็นการผสมผสานระหว่างอัตราการเล่นสื่อ ระยะเวลา และ เวลาปัจจุบัน

วันที่

ต้องระบุระยะเวลาและเป็นบวก ตำแหน่งต้องเป็นค่าบวกและ น้อยกว่าระยะเวลาทั่วไป อัตราการเล่นต้องมากกว่า 0

const video = document.querySelector('video');

function updatePositionState() {
  if ('setPositionState' in navigator.mediaSession) {
    navigator.mediaSession.setPositionState({
      duration: video.duration,
      playbackRate: video.playbackRate,
      position: video.currentTime,
    });
  }
}

// When video starts playing, update duration.
await video.play();
updatePositionState();

// When user wants to seek backward, update position.
navigator.mediaSession.setActionHandler('seekbackward', (details) => {
  /* ... */
  updatePositionState();
});

// When user wants to seek forward, update position.
navigator.mediaSession.setActionHandler('seekforward', (details) => {
  /* ... */
  updatePositionState();
});

// When user wants to seek to a specific time, update position.
navigator.mediaSession.setActionHandler('seekto', (details) => {
  /* ... */
  updatePositionState();
});

// When video playback rate changes, update position state.
video.addEventListener('ratechange', (event) => {
  updatePositionState();
});

การรีเซ็ตสถานะตำแหน่งทำได้ง่ายเพียงแค่ตั้งค่าเป็น null

// Reset position state when media is reset.
navigator.mediaSession.setPositionState(null);

การดำเนินการสำหรับการประชุมทางวิดีโอ

เมื่อผู้ใช้เริ่มวิดีโอคอลไปยังหน้าต่างการแสดงภาพซ้อนภาพ เบราว์เซอร์อาจแสดงตัวควบคุมไมโครโฟนและกล้อง และสำหรับวางสาย เมื่อผู้ใช้คลิก เว็บไซต์จะจัดการกับผู้ใช้เหล่านั้นผ่านวิดีโอ การดำเนินการการประชุมด้านล่าง ดูตัวอย่างได้ที่ตัวอย่างการประชุมทางวิดีโอ

วันที่

เปิด/ปิดไมโครโฟน

การดำเนินการ "togglemicrophone" บ่งชี้ว่าผู้ใช้ต้องการปิดเสียงหรือเปิดเสียง ไมโครโฟน เมธอด setMicrophoneActive(isActive) จะบอกเบราว์เซอร์ เว็บไซต์พิจารณาว่าไมโครโฟนทำงานอยู่หรือไม่

let isMicrophoneActive = false;

navigator.mediaSession.setActionHandler('togglemicrophone', () => {
  if (isMicrophoneActive) {
    // Mute the microphone.
  } else {
    // Unmute the microphone.
  }
  isMicrophoneActive = !isMicrophoneActive;
  navigator.mediaSession.setMicrophoneActive(isMicrophoneActive);
});

สลับกล้อง

การดำเนินการ "togglecamera" บ่งชี้ว่าผู้ใช้ต้องการเปิดใช้งาน กล้องเป็นเปิดหรือปิด เมธอด setCameraActive(isActive) จะระบุว่า จะถือว่าเว็บไซต์นั้นทำงานอยู่

let isCameraActive = false;

navigator.mediaSession.setActionHandler('togglecamera', () => {
  if (isCameraActive) {
    // Disable the camera.
  } else {
    // Enable the camera.
  }
  isCameraActive = !isCameraActive;
  navigator.mediaSession.setCameraActive(isCameraActive);
});

วางสาย

การดำเนินการ "hangup" บ่งชี้ว่าผู้ใช้ต้องการวางสาย

navigator.mediaSession.setActionHandler('hangup', () => {
  // End the call.
});

การนำเสนอการทำงานของสไลด์

เมื่อผู้ใช้นำสไลด์การนำเสนอลงในหน้าต่างการแสดงภาพซ้อนภาพ เบราว์เซอร์อาจแสดงตัวควบคุมการไปยังสไลด์ต่างๆ เมื่อผู้ใช้ เมื่อคลิก เว็บไซต์จะจัดการกับการเข้าชมเหล่านั้นผ่าน Media Session API สำหรับ ตัวอย่างเช่น โปรดดูตัวอย่างการนำเสนอสไลด์

สไลด์ก่อนหน้า

การดำเนินการ "previousslide" บ่งชี้ว่าผู้ใช้ต้องการกลับไปที่ สไลด์ก่อนหน้าเมื่อนำเสนอสไลด์

navigator.mediaSession.setActionHandler('previousslide', () => {
  // Show previous slide.
});

สไลด์ถัดไป

การดำเนินการ "nextslide" ระบุว่าผู้ใช้ต้องการไปที่สไลด์ถัดไป เมื่อนำเสนอสไลด์

navigator.mediaSession.setActionHandler('nextslide', () => {
  // Show next slide.
});

ตัวอย่าง

ลองดูตัวอย่างเซสชันสื่อที่เกี่ยวข้องกับ Blender Foundation และ งานของ Jan Morgenstern

แหล่งข้อมูล

• ข้อกำหนดเซสชันสื่อ: wicg.github.io/mediasession
• ปัญหาเกี่ยวกับข้อมูลจำเพาะ github.com/WICG/mediasession/issues
• ข้อบกพร่องของ Chrome: crbug.com