วิธีผสานรวมกับคีย์สื่อฮาร์ดแวร์ ปรับแต่งการแจ้งเตือนสื่อ และอื่นๆ
เพื่อแจ้งให้ผู้ใช้ทราบว่ากำลังเล่นอะไรอยู่ในเบราว์เซอร์ของตนและควบคุมได้ โดยไม่ต้องกลับไปยังหน้าที่เปิด 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