Spotify, le service de streaming audio sur abonnement le plus populaire au monde, s'efforce continuellement d'améliorer la façon dont les utilisateurs consomment des contenus audio et vidéo. Avec sa vaste bibliothèque de musique, de podcasts et de livres audio, elle s'adresse à des millions d'utilisateurs chaque jour sur mobile, PC et d'autres plates-formes.
Spotify a récemment lancé le minilecteur Spotify pour ses clients de lecteur pour ordinateur et Web. Le minilecteur est conçu pour offrir les commandes de lecture essentielles dans une petite fenêtre compacte qui reste en haut de l'écran, offrant ainsi aux utilisateurs un accès constant à Spotify. Cette fonctionnalité, longtemps demandée, permet aux utilisateurs de réaliser plusieurs tâches en même temps dans différentes fenêtres et applications tout en profitant de leurs artistes, playlists et podcasts préférés sur Spotify.
Vous trouverez ci-dessous un aperçu détaillé du développement du minilecteur, du "hack de canevas" initial à la version plus avancée et plus conviviale basée sur la nouvelle API Picture-in-picture pour les documents.
"Canvas hack"
La première itération du minilecteur a été lancée en 2019 sur le lecteur Web de Spotify en tant que projet de bidouille. L'objectif était d'utiliser l'API Picture-in-picture (PiP) pour <video> du navigateur afin d'afficher la pochette de l'album dans une fenêtre toujours au premier plan. Toutefois, cette API était principalement conçue pour les éléments vidéo et il n'était pas possible d'afficher des images de pochettes d'albums. Spotify a contourné ce problème en affichant la pochette de l'album dans un élément Canvas et en utilisant la méthode captureStream() de HTMLCanvasElement pour obtenir un objet MediaStream en temps réel. Ce flux sert ensuite de source pour la vidéo utilisée pour l'API PiP. Cette approche est basée sur l'exemple "Playlist audio" de Google Chrome.
Spotify a combiné le canevas avec les gestionnaires d'actions appropriés définis dans l'API Media Session pour contrôler les commandes du lecteur qui s'affichent dans la fenêtre PIP. Les utilisateurs disposaient ainsi d'une fenêtre flottante avec la pochette de l'album et les commandes du lecteur, qu'ils pouvaient utiliser pour contrôler la lecture tout en se concentrant sur d'autres tâches.
Spotify a ainsi pu proposer un minilecteur de base. Toutefois, cette approche présentait plusieurs limites:
- Les sous-titres vidéo ne sont pas acceptés dans la fenêtre PiP. Spotify étant tenu de diffuser des sous-titres sur toutes les vidéos, il a été contraint de fermer la fenêtre PIP dès qu'une vidéo commençait à être lue.
- Les commandes du lecteur ne sont visibles que si la lecture se déroule localement. Spotify permet la lecture à distance à l'aide de Spotify Connect (et d'autres protocoles) et souhaite que l'utilisateur puisse également contrôler cette lecture.
- Il n'est pas possible de personnaliser l'apparence de la fenêtre PiP. Spotify ne pouvait afficher que des illustrations et utiliser les commandes du lecteur fournies par Chrome, ce qui l'empêchait d'ajouter le branding Spotify ou des commandes de lecteur supplémentaires.
Le manque de contrôle sur l'interface utilisateur et l'impossibilité d'ajouter des fonctionnalités spécifiques à Spotify (par exemple, aimer un titre) ont fait que cette approche ne convenait pas à leur client pour ordinateur.
Picture-in-picture pour les documents: l'évolution du minilecteur
Début 2023, Spotify a appris que Google Chrome avait de nouveau l'intention de lancer une nouvelle API permettant d'afficher du contenu HTML arbitraire dans la fenêtre PiP, appelée API Picture-in-Picture de document. Cette évolution était intéressante pour Spotify, car elle lui permettait de contrôler entièrement l'apparence de la fenêtre PIP. Spotify a collaboré avec l'équipe Chrome lors de son essai Origin pour développer un nouveau minilecteur basé sur l'API Picture-in-Picture de document.
L'API Document PiP vous permet d'ouvrir une nouvelle fenêtre toujours au premier plan à laquelle vous pouvez joindre des éléments. Étant donné que le lecteur Web Spotify est une application Web React, Spotify a utilisé la méthode createPortal() de ReactDOM pour afficher des composants personnalisés dans la fenêtre PiP à partir de l'application principale, ce qui lui permet de contrôler entièrement l'apparence et les fonctionnalités du minilecteur.
La nouvelle API Picture-in-Picture pour les documents a également résolu les problèmes précédents de Spotify:
- Les vidéos dans la fenêtre PIP sont des éléments vidéo standards et sont entièrement compatibles avec les sous-titres.
- Avec un contrôle total de l'interface utilisateur, les commandes du lecteur peuvent s'afficher même lorsque la lecture se fait à distance à l'aide de Spotify Connect.
- Spotify a pu intégrer son apparence et ses commandes de lecteur, ce qui a amélioré l'expérience utilisateur.
- Ils ont pu intégrer la prise en charge de l'API Document PiP au client pour ordinateur de bureau de Spotify, ce qui leur a permis de proposer le minilecteur à des millions d'utilisateurs de bureau.
Créer une fenêtre Picture-in-picture à l'aide de React
L'exemple suivant montre comment utiliser le mode Picture-in-Picture pour les documents dans React, comme l'a fait l'équipe Spotify. Vous allez créer deux composants React: MyFeature et PiPContainer.
Le composant MyFeature est chargé de gérer la fenêtre Picture-in-picture. Il affiche un bouton qui active/désactive la fenêtre Picture-in-picture et affiche le composant PiPContainer. Il s'abonne également à l'événement "pagehide" de la fenêtre Picture-in-picture pour mettre à jour l'état lorsque la fenêtre est fermée.
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>
</>
);
};
Le composant PiPContainer utilise la méthode createPortal() de ReactDOM pour afficher le contenu dans la fenêtre Picture-in-Picture.
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;
};
Étape suivante
Spotify continue d'innover et de progresser. L'entreprise s'engage à améliorer le Miniplayer et prévoit d'affiner ses fonctionnalités et son expérience utilisateur. Bien qu'il ne puisse pas encore s'engager sur des fonctionnalités spécifiques, il est enthousiaste quant aux futures possibilités du minilecteur.
L'API Picture-in-Picture pour les documents a fourni la flexibilité et le contrôle nécessaires pour créer un minilecteur plus intuitif et plus convivial. Nous espérons que les autres fournisseurs de navigateurs prendront note des opportunités offertes par cette API et envisageront de l'intégrer. Cela permettrait à Spotify de proposer une expérience cohérente et améliorée à tous les utilisateurs, quel que soit le navigateur qu'ils choisissent.
Remerciements
Merci à tous les membres de Spotify qui ont contribué à la création du mini-lecteur.
Spotify tient également à remercier l'équipe Google Chrome pour sa collaboration et pour avoir pris en compte les commentaires de Spotify concernant l'API Picture-in-Picture pour les documents.