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