Spotify ซึ่งเป็นบริการสตรีมมิงเสียงที่ได้รับความนิยมมากที่สุดในโลก มุ่งมั่นอย่างต่อเนื่องที่จะปรับปรุงวิธีที่ผู้ใช้บริโภคเนื้อหาเสียงและวิดีโอ ด้วยคลังเพลง พอดแคสต์ และหนังสือเสียงจำนวนมาก จึงรองรับผู้ใช้หลายล้านคนทุกวันบนอุปกรณ์เคลื่อนที่ คอมพิวเตอร์ และแพลตฟอร์มอื่นๆ
เมื่อเร็วๆ นี้ Spotify ได้เปิดตัว Spotify Miniplayer สำหรับไคลเอ็นต์บนเดสก์ท็อปและเว็บเพลเยอร์ Miniplayer ออกแบบมาเพื่อควบคุมการเล่นที่จำเป็นในหน้าต่างขนาดเล็กขนาดกะทัดรัดที่อยู่เหนือได้ ซึ่งให้ผู้ใช้เข้าถึง Spotify ได้อย่างต่อเนื่อง เนื่องจากเป็นฟีเจอร์ที่มีการร้องขอกันมาเป็นเวลานาน ทั้งยังช่วยให้ผู้ใช้ทำงานหลายอย่างพร้อมกันได้อย่างราบรื่นในหน้าต่างและแอปต่างๆ ในขณะเดียวกันก็ได้เพลิดเพลินกับศิลปิน เพลย์ลิสต์ และพอดแคสต์ที่ชื่นชอบใน Spotify
ต่อไปนี้เป็นรายละเอียดเกี่ยวกับการพัฒนามินิเพลเยอร์ ตั้งแต่ "การแฮก Canvas" ไปจนถึงเวอร์ชันขั้นสูงและใช้งานง่ายซึ่งสร้างขึ้นใน Document Picture-in-Picture API ใหม่
"แฮ็ก Canvas"
การทำซ้ำครั้งแรกของ Miniplayer เปิดตัวเมื่อปี 2019 บน Web Player ของ Spotify โดยเป็นโครงการแฮ็ก วัตถุประสงค์คือการใช้ Picture-in-Picture (PiP) API ของเบราว์เซอร์สำหรับ <video> เพื่อแสดงปกอัลบั้มในหน้าต่างที่เปิดตลอดเวลา อย่างไรก็ตาม API นี้ออกแบบมาสำหรับองค์ประกอบวิดีโอเป็นหลัก และไม่สามารถแสดงภาพปกอัลบั้มได้ Spotify หลีกเลี่ยงปัญหานี้โดยการแสดงภาพปกอัลบั้มเป็นองค์ประกอบ Canvas และใช้เมธอด HTMLCanvasElement captureStream() เพื่อรับออบเจ็กต์ MediaStream แบบเรียลไทม์ จากนั้นสตรีมนี้จะทำหน้าที่เป็นแหล่งที่มาสำหรับวิดีโอที่ใช้สำหรับ PIP API แนวทางนี้อิงจากตัวอย่าง "เพลย์ลิสต์เสียง" ของ Google Chrome
Spotify ได้รวม Canvas เข้ากับเครื่องจัดการการดำเนินการที่เหมาะสมซึ่งตั้งค่าไว้ใน Media Session API เพื่อควบคุมว่าจะให้ตัวควบคุมวิดีโอเพลเยอร์ใดปรากฏในหน้าต่าง PIP ทำให้ผู้ใช้มีหน้าต่างแบบลอยที่มีปกอัลบั้มและตัวควบคุมวิดีโอเพลเยอร์ ซึ่งสามารถใช้เพื่อควบคุมการเล่นพร้อมไปกับการมุ่งความสนใจไปที่งานอื่นๆ ได้
การดำเนินการนี้ช่วยให้ Spotify มีมินิเพลเยอร์พื้นฐานได้ อย่างไรก็ตาม วิธีการดังกล่าวมีข้อจำกัดหลายประการ ดังนี้
- ไม่รองรับคำบรรยายวิดีโอในหน้าต่าง PIP เนื่องจากกำหนดให้ Spotify แสดงคำบรรยายในวิดีโอทั้งหมด จึงต้องปิดหน้าต่าง PIP ทันทีที่วิดีโอเริ่มเล่น
- ตัวควบคุมวิดีโอเพลเยอร์จะปรากฏก็ต่อเมื่อการเล่นเกิดขึ้นในเครื่องเท่านั้น Spotify อนุญาตให้เล่นจากระยะไกลโดยใช้ Spotify Connect (และโปรโตคอลอื่นๆ) และต้องการให้ผู้ใช้ควบคุมการเล่นนี้ได้ด้วยเช่นกัน
- ระบบไม่รองรับการปรับแต่งรูปลักษณ์ของหน้าต่าง PIP Spotify สามารถแสดงได้เฉพาะอาร์ตเวิร์กและใช้ตัวควบคุมวิดีโอเพลเยอร์ที่ Chrome มีให้เท่านั้น จึงไม่สามารถเพิ่มการสร้างแบรนด์ Spotify หรือตัวควบคุมวิดีโอเพลเยอร์เพิ่มเติม
การไม่สามารถควบคุมอินเทอร์เฟซผู้ใช้และไม่สามารถเพิ่มฟีเจอร์บางอย่างของ Spotify ได้ที่นี่ (เช่น การกดชอบแทร็ก) ทำให้ทีมรู้สึกว่าวิธีนี้ไม่เหมาะกับไคลเอ็นต์บนเดสก์ท็อป
การแสดงภาพซ้อนภาพในเอกสาร: วิวัฒนาการของมินิเพลเยอร์
ในช่วงต้นปี 2023 Spotify ทราบเกี่ยวกับความสนใจที่ Google Chrome ต่ออายุใหม่ซึ่งจะมีการเปิดตัว API ใหม่ซึ่งจะอนุญาตให้แสดงเนื้อหา HTML ที่กำหนดเองภายในหน้าต่าง PIP หรือที่เรียกว่า Document Picture-in-Picture API การพัฒนานี้เป็นเรื่องที่น่าตื่นเต้นสำหรับ Spotify เนื่องจากช่วยให้ควบคุมรูปลักษณ์ของหน้าต่าง PIP ได้อย่างเต็มที่ Spotify ทำงานร่วมกับทีม Chrome ในช่วงช่วงทดลองใช้จากต้นทางเพื่อพัฒนามินิเพลเยอร์ใหม่ที่สร้างขึ้นบน Document Picture-in-Picture API
Document PIP API จะช่วยให้คุณเปิดหน้าต่างที่เปิดตลอดเวลาขึ้นมาใหม่เพื่อให้คุณแนบองค์ประกอบได้ เนื่องจาก Spotify Web Player เป็นเว็บแอปพลิเคชัน React ระบบของ Spotify จึงใช้วิธี createPortal() ของ ReactDOM ในการแสดงผลคอมโพเนนต์ที่กำหนดเองจากแอปพลิเคชันหลักลงในหน้าต่าง PIP เพื่อให้ควบคุมลักษณะและฟีเจอร์ของ Miniplayer ได้อย่างสมบูรณ์
Document Picture-in-Picture API ใหม่ยังช่วยแก้ปัญหาที่ผ่านมาของ Spotify ด้วย
- วิดีโอในหน้าต่าง PIP เป็นองค์ประกอบปกติของวิดีโอและรองรับคำบรรยายอย่างเต็มรูปแบบ
- การควบคุม UI โดยสมบูรณ์จะช่วยให้แสดงตัวควบคุมวิดีโอเพลเยอร์ได้ แม้ว่าจะการเล่นจากระยะไกลโดยใช้ Spotify Connect ก็ตาม
- Spotify สามารถผสานรวมภาพลักษณ์และการควบคุมโปรแกรมเล่น ช่วยปรับปรุงประสบการณ์ของผู้ใช้
- บริษัทสามารถรองรับ Document PiP API ในไคลเอ็นต์บนเดสก์ท็อปของ Spotify ซึ่งช่วยอำนวยความสะดวกในการใช้งาน Miniplayer สำหรับผู้ใช้เดสก์ท็อปหลายล้านคน
สร้างหน้าต่างการแสดงภาพซ้อนภาพโดยใช้ React
ตัวอย่างต่อไปนี้แสดงวิธีใช้งานฟีเจอร์การแสดงภาพซ้อนภาพในเอกสารใน React เช่นเดียวกับทีม Spotify คุณจะสร้างคอมโพเนนต์รีแอ็กชัน 2 รายการ ได้แก่ MyFeature และ PiPContainer
คอมโพเนนต์ MyFeature มีหน้าที่จัดการหน้าต่างการแสดงภาพซ้อนภาพ ซึ่งจะแสดงปุ่มที่สลับหน้าต่างการแสดงภาพซ้อนภาพและแสดงผลคอมโพเนนต์ PiPContainer และยังสมัครรับข้อมูลเหตุการณ์ "pagehide" ของหน้าต่างการแสดงภาพซ้อนภาพเพื่ออัปเดตสถานะเมื่อหน้าต่างปิดอยู่ด้วย
const MyFeature = () => {
const [pipWindow, setPiPWindow] = useState<Window | null>(
documentPictureInPicture.window
);
const handleClick = useCallback(async () => {
if (pipWindow) {
pipWindow.close();
} else {
const newWindow = await documentPictureInPicture.requestWindow();
setPiPWindow(newWindow);
}
}, [pipWindow]);
useEffect(() => {
const handleWindowClose = (): void => {
setPiPWindow(null);
};
pipWindow?.addEventListener("pagehide", handleWindowClose);
return () => {
pipWindow?.removeEventListener("pagehide", handleWindowClose);
};
}, [pipWindow]);
return (
<>
<button onClick={handleClick}>
{pipWindow ? "Close PiP Window" : "Open PiP Window"}
</button>
<PiPContainer pipWindow={pipWindow}>Hello World 👋!</PiPContainer>
</>
);
};
คอมโพเนนต์ PiPContainer จะใช้เมธอด createPortal() ของ ReactDOM เพื่อแสดงผลเนื้อหาในหน้าต่างการแสดงภาพซ้อนภาพ
type Props = PropsWithChildren<{
pipWindow: Window | null;
}>;
const PiPContainer = ({ pipWindow, children }: Props) => {
useEffect(() => {
if (pipWindow) {
cloneStyles(window.document, pipWindow.document);
}
}, [pipWindow]);
return pipWindow ? createPortal(children, pipWindow.document.body) : null;
};
ขั้นตอนถัดไป
เนื่องจาก Spotify ได้พัฒนาและสร้างสรรค์สิ่งใหม่ๆ อย่างต่อเนื่อง บริษัทยังคงมุ่งมั่นที่จะปรับปรุง Miniplayer และวางแผนที่จะปรับแต่งฟีเจอร์และประสบการณ์ของผู้ใช้เพิ่มเติม แม้ว่าจะยังพัฒนาฟีเจอร์บางอย่างไม่ได้ แต่ก็ตื่นเต้นกับความเป็นไปได้ในอนาคตของมินิเพลเยอร์
Document Picture-in-Picture API ให้ความยืดหยุ่นและการควบคุมในการสร้างมินิเพลเยอร์ที่เป็นมิตรกับผู้ใช้และใช้งานง่ายยิ่งขึ้น เราหวังว่าผู้ให้บริการเบราว์เซอร์รายอื่นๆ จะทราบถึงโอกาสในการที่ API นี้มีและพิจารณาที่จะให้การสนับสนุนสำหรับ API นี้ ซึ่งจะทำให้ Spotify มอบประสบการณ์การใช้งานที่สม่ำเสมอและดียิ่งขึ้นสำหรับผู้ใช้ทุกคน ไม่ว่าจะใช้เบราว์เซอร์ใดก็ตาม
กิตติกรรมประกาศ
ขอขอบคุณทุกคนที่ Spotify ที่มีส่วนร่วมในการสร้าง Miniplayer
Spotify ขอขอบคุณทีม Google Chrome ที่ให้ความร่วมมือและช่วยนำความคิดเห็นของ Spotify มาพิจารณาสำหรับ Document Picture-in-Picture API