Spotify, dịch vụ thuê bao nghe nhạc trực tuyến phổ biến nhất thế giới, vẫn liên tục hướng đến việc cải thiện cách người dùng thưởng thức nội dung âm thanh và video. Cung cấp một thư viện nhạc, podcast và sách nói khổng lồ, phục vụ hàng triệu người dùng mỗi ngày trên thiết bị di động, máy tính và các nền tảng khác.
Gần đây, Spotify đã phát hành Spotify Miniplayer cho các ứng dụng trình phát trên web và máy tính để bàn của họ. Trình phát thu nhỏ được thiết kế nhằm cung cấp các nút điều khiển chế độ phát cần thiết trong một cửa sổ nhỏ gọn nằm ở trên cùng, giúp người dùng truy cập liên tục vào Spotify. Đây là một tính năng được yêu cầu từ lâu và cho phép người dùng làm nhiều việc cùng lúc một cách liền mạch trên nhiều cửa sổ và ứng dụng, đồng thời thưởng thức nghệ sĩ, danh sách phát và podcast mà họ yêu thích trên Spotify.
Sau đây là thông tin chi tiết về quá trình phát triển của Trình phát thu nhỏ, từ phiên bản "canvas hack" ban đầu cho đến phiên bản cao cấp hơn, thân thiện với người dùng được xây dựng trên API Hình trong hình tài liệu mới.
"Tin tặc"
Phiên bản ban đầu của Trình phát thu nhỏ được ra mắt vào năm 2019 trên Trình phát trên web của Spotify dưới dạng một dự án xâm nhập. Mục tiêu là sử dụng API Hình trong hình (PiP) của trình duyệt cho <video> để hiển thị ảnh bìa đĩa nhạc trong cửa sổ luôn bật. Tuy nhiên, API này chủ yếu được thiết kế cho các thành phần video và không thể hiển thị ảnh bìa đĩa nhạc. Spotify tránh xa điều này bằng cách kết xuất ảnh bìa đĩa nhạc vào phần tử canvas và sử dụng phương thức HTMLCanvasElement captureStream() để lấy đối tượng MediaStream theo thời gian thực. Luồng phát này sẽ đóng vai trò là nguồn của video dùng cho API PiP. Phương pháp này dựa trên mẫu "Danh sách phát âm thanh" của Google Chrome.
Spotify kết hợp canvas với các trình xử lý hành động thích hợp được thiết lập trong Media Session API (API Phiên nội dung đa phương tiện) để kiểm soát những nút điều khiển trình phát sẽ xuất hiện trong cửa sổ Hình trong hình. Nhờ vậy, người dùng có thể thấy một cửa sổ nổi có ảnh bìa đĩa nhạc và các nút điều khiển trình phát. Họ có thể dùng chế độ này để điều khiển quá trình phát trong khi tập trung làm các công việc khác.
Điều này cho phép Spotify có một Trình phát thu nhỏ cơ bản. Tuy nhiên, phương pháp này có một số hạn chế:
- Phụ đề video không được hỗ trợ bên trong cửa sổ Hình trong hình. Vì Spotify bắt buộc phải hiển thị phụ đề trên tất cả video nên họ buộc phải đóng cửa sổ Hình trong hình ngay khi video bắt đầu phát.
- Các nút điều khiển trình phát chỉ hiển thị nếu quá trình phát diễn ra trên thiết bị. Spotify cho phép phát từ xa bằng Spotify Connect (và các giao thức khác) và muốn người dùng cũng có thể điều khiển quá trình phát này
- Chúng tôi không hỗ trợ tính năng tuỳ chỉnh giao diện của cửa sổ PiP. Spotify chỉ có thể hiển thị hình minh hoạ và sử dụng các nút điều khiển trình phát do Chrome cung cấp. Điều này ngăn họ thêm thương hiệu Spotify hoặc các nút điều khiển trình phát bổ sung.
Việc thiếu quyền kiểm soát giao diện người dùng và không thể thêm các tính năng dành riêng cho Spotify ở đây (ví dụ: thích một bản nhạc) đồng nghĩa với việc họ cảm thấy cách tiếp cận này không phù hợp với ứng dụng dành cho máy tính để bàn của họ.
Tính năng Hình trong hình ghi lại: Quá trình phát triển của Trình phát thu nhỏ
Vào đầu năm 2023, Spotify được biết rằng Google Chrome cũng đang quan tâm đến việc ra mắt một API mới cho phép hiển thị nội dung HTML tuỳ ý bên trong cửa sổ PiP, còn được gọi là API Hình trong hình của tài liệu. Sự phát triển này rất thú vị đối với Spotify vì nó sẽ cấp cho họ toàn quyền kiểm soát giao diện của cửa sổ Hình trong hình. Spotify cộng tác với nhóm Chrome trong Bản dùng thử theo nguyên gốc để phát triển một Trình phát thu nhỏ mới, xây dựng dựa trên API hình trong hình của tài liệu.
API Document PiP cho phép bạn mở một cửa sổ luôn bật (luôn bật) mới để bạn có thể đính kèm các phần tử. Vì Spotify Web Player là một ứng dụng web React, nên Spotify đã sử dụng phương thức createPortal() của ReactDOM để kết xuất các thành phần tuỳ chỉnh vào cửa sổ PiP từ ứng dụng chính, giúp bạn có toàn quyền kiểm soát giao diện và các tính năng của Trình phát thu nhỏ.
API Tài liệu Hình trong hình mới cũng giải quyết các vấn đề trước đó của Spotify:
- Video bên trong cửa sổ Hình trong hình là các thành phần video thông thường và hỗ trợ đầy đủ phụ đề.
- Khi có toàn quyền kiểm soát giao diện người dùng, các nút điều khiển trình phát có thể hiển thị ngay cả khi quá trình phát đang diễn ra từ xa qua Spotify Connect.
- Spotify có thể kết hợp giao diện và các nút điều khiển trình phát để nâng cao trải nghiệm người dùng.
- Họ có thể hỗ trợ API Document PiP cho ứng dụng Máy tính của Spotify, cho phép họ đưa Trình phát thu nhỏ đến với hàng triệu người dùng Máy tính.
Tạo cửa sổ Hình trong hình bằng React
Ví dụ sau minh hoạ cách bạn có thể sử dụng tính năng Hình trong hình cho tài liệu trong React, giống như nhóm Spotify. Bạn sẽ tạo 2 thành phần React: MyFeature và PiPContainer.
Thành phần MyFeature chịu trách nhiệm quản lý cửa sổ Hình trong hình. Thao tác này sẽ hiển thị một nút bật/tắt cửa sổ Hình trong hình và hiển thị thành phần PiPContainer. Tệp này cũng đăng ký sự kiện "pagehide" của cửa sổ Hình trong hình để cập nhật trạng thái khi cửa sổ này đóng.
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>
</>
);
};
Thành phần PiPContainer sử dụng phương thức createPortal() của ReactDOM để kết xuất nội dung vào cửa sổ Hình trong hình.
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;
};
Bước tiếp theo
Trong quá trình tiếp tục phát triển và đổi mới, Spotify vẫn cam kết cải thiện Trình phát thu nhỏ và dự định tinh chỉnh thêm các tính năng cũng như trải nghiệm người dùng. Mặc dù chưa thể cam kết sử dụng một số tính năng cụ thể, nhưng họ rất hào hứng về những khả năng trong tương lai của Trình phát thu nhỏ.
API Hình trong hình của tài liệu mang đến sự linh hoạt và khả năng kiểm soát để tạo Trình phát thu nhỏ trực quan và thân thiện với người dùng hơn. Hy vọng rằng các nhà cung cấp trình duyệt khác sẽ lưu ý đến các cơ hội mà API này mang lại và cân nhắc việc kết hợp hỗ trợ cho API này. Điều này sẽ cho phép Spotify cung cấp trải nghiệm nhất quán và nâng cao cho tất cả người dùng, bất kể họ đã chọn trình duyệt nào.
Xác nhận
Cảm ơn mọi người tại Spotify đã tham gia xây dựng Trình phát thu nhỏ.
Spotify cũng muốn cảm ơn nhóm Google Chrome vì đã cộng tác và xem xét ý kiến phản hồi của Spotify về API Hình trong hình của Tài liệu.