Spotify เป็นบริการสตรีมมิงเสียงที่ต้องสมัครใช้งานที่ได้รับความนิยมมากที่สุดในโลก โดยมุ่งมั่นที่จะปรับปรุงวิธีใช้เนื้อหาเสียงและวิดีโอของผู้ใช้อย่างต่อเนื่อง โดยให้บริการคลังเพลง พอดแคสต์ และหนังสือเสียงที่ครอบคลุมแก่ผู้ใช้หลายล้านคนทุกวันบนอุปกรณ์เคลื่อนที่ พีซี และแพลตฟอร์มอื่นๆ
เมื่อเร็วๆ นี้ Spotify ได้เปิดตัว มินิเพลเยอร์ของ Spotify สำหรับไคลเอ็นต์เพลเยอร์บนเดสก์ท็อปและเว็บ มินิเพลย์เยอร์ออกแบบมาเพื่อมอบการควบคุมการเล่นที่จำเป็นในหน้าต่างขนาดเล็กกะทัดรัดที่แสดงอยู่ด้านบน ซึ่งช่วยให้ผู้ใช้เข้าถึง Spotify ได้อย่างราบรื่น ฟีเจอร์นี้เป็นฟีเจอร์ที่ผู้ใช้เรียกร้องมาอย่างยาวนาน ซึ่งจะช่วยให้ผู้ใช้ทำงานหลายอย่างในหน้าต่างและแอปต่างๆ ได้อย่างราบรื่นไปพร้อมกับเพลิดเพลินไปกับศิลปิน เพลย์ลิสต์ และพอดแคสต์โปรดใน Spotify
ต่อไปนี้เป็นรายละเอียดการพัฒนามินิเพลเยอร์ ตั้งแต่ "การแฮ็ก Canvas" ขั้นต้นไปจนถึงเวอร์ชันขั้นสูงที่ใช้งานง่ายยิ่งขึ้นซึ่งสร้างขึ้นจาก Document Picture-in-Picture API ใหม่
"Canvas Hack"
เวอร์ชันแรกเริ่มของมินิเพลเยอร์เปิดตัวในปี 2019 ในเว็บเพลเยอร์ของ 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 ในช่วงการทดลองใช้เวอร์ชัน Origin เพื่อพัฒนามินิเพลเยอร์ใหม่ที่สร้างขึ้นจาก Document Picture-in-Picture API
Document PiP API ช่วยให้คุณเปิดหน้าต่างใหม่ที่แสดงอยู่ด้านบนเสมอเพื่อแนบองค์ประกอบได้ เนื่องจากเว็บเพลเยอร์ของ Spotify เป็นเว็บแอปพลิเคชัน React Spotify จึงใช้เมธอด createPortal() ของ ReactDOM เพื่อแสดงผลคอมโพเนนต์ที่กำหนดเองในหน้าต่าง PiP จากแอปพลิเคชันหลัก ซึ่งช่วยให้ควบคุมลักษณะที่ปรากฏและฟีเจอร์ของมินิเพลเยอร์ได้อย่างเต็มที่
Document Picture-in-Picture API ใหม่ยังช่วยแก้ปัญหาก่อนหน้านี้ของ Spotify ได้ด้วย
- วิดีโอในหน้าต่าง PiP เป็นองค์ประกอบวิดีโอปกติและรองรับคำบรรยายอย่างเต็มรูปแบบ
- การควบคุม UI อย่างเต็มรูปแบบช่วยให้ตัวควบคุมเพลเยอร์แสดงได้แม้ขณะที่เล่นจากระยะไกลโดยใช้ Spotify Connect
- Spotify สามารถใช้รูปลักษณ์และการควบคุมเพลเยอร์ของตัวเองได้ ซึ่งช่วยปรับปรุงประสบการณ์ของผู้ใช้
- ทีมนี้สามารถรองรับ Document PiP API ในไคลเอ็นต์เดสก์ท็อปของ Spotify ซึ่งทำให้ผู้ใช้เดสก์ท็อปหลายล้านคนได้ใช้งานมินิเพลเยอร์
สร้างหน้าต่างการแสดงภาพซ้อนภาพโดยใช้ React
ตัวอย่างต่อไปนี้แสดงวิธีใช้ฟีเจอร์ภาพในภาพในเอกสารใน React เช่นเดียวกับทีม Spotify คุณจะต้องสร้างคอมโพเนนต์ React 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 ยังคงมุ่งมั่นที่จะปรับปรุงมินิเพลเยอร์และวางแผนที่จะปรับแต่งฟีเจอร์และประสบการณ์ของผู้ใช้ให้ดียิ่งขึ้นต่อไป แม้จะพัฒนาและสร้างสรรค์สิ่งใหม่ๆ อย่างต่อเนื่อง แม้ว่าจะยังไม่สามารถให้สัญญาเกี่ยวกับฟีเจอร์ที่เจาะจง แต่ทีมก็ตื่นเต้นกับศักยภาพในอนาคตของมินิเพลเยอร์
Document Picture-in-Picture API ให้ความยืดหยุ่นและการควบคุมในการสร้างมินิเพลเยอร์ที่ใช้งานง่ายและเข้าใจง่ายยิ่งขึ้น เราหวังว่าผู้ให้บริการเบราว์เซอร์รายอื่นๆ จะคว้าโอกาสที่ API นี้มอบให้และพิจารณารองรับ API นี้ ซึ่งจะช่วยให้ Spotify มอบประสบการณ์การใช้งานที่สอดคล้องกันและมีประสิทธิภาพยิ่งขึ้นให้แก่ผู้ใช้ทุกคน ไม่ว่าจะใช้เบราว์เซอร์ใดก็ตาม
ขอขอบคุณ
ขอขอบคุณทุกคนที่ Spotify ที่ได้มีส่วนร่วมในการสร้างมินิเพลเยอร์
นอกจากนี้ Spotify ยังอยากขอบคุณทีม Google Chrome สำหรับการร่วมมือและพิจารณาความคิดเห็นของ Spotify สำหรับ Document Picture-in-Picture API