Spotify, der weltweit beliebteste Abodienst für Audiostreaming, arbeitet ständig daran, die Art und Weise zu verbessern, wie Nutzer Audio- und Videoinhalte konsumieren. Es bietet eine umfangreiche Mediathek an Musik, Podcasts und Hörbüchern und bedient jeden Tag Millionen von Nutzern auf Mobilgeräten, PCs und anderen Plattformen.
Spotify hat vor Kurzem den Spotify-Miniplayer für Computer und Webplayer veröffentlicht. Der Miniplayer ist so konzipiert, dass die wichtigsten Steuerelemente für die Wiedergabe in einem kleinen, kompakten Fenster im oberen Bereich angezeigt werden, sodass Nutzer ständig auf Spotify zugreifen können. Diese Funktion wurde schon lange gewünscht. Sie ermöglicht Nutzern, nahtlos in verschiedenen Fenstern und Apps zu wechseln und gleichzeitig ihre Lieblingskünstler, Playlists und Podcasts auf Spotify zu genießen.
Im Folgenden findest du einen detaillierten Einblick in die Entwicklung des Miniplayers – vom ersten „Canvas-Hack“ bis hin zur nutzerfreundlicheren Version, die auf der neuen Document Picture-in-Picture API basiert.
Canvas-Hack
Die erste Version des Miniplayers wurde 2019 im Web Player von Spotify als Hack-Projekt veröffentlicht. Ziel war es, die Picture-in-Picture (BiP) API für <video> des Browsers zu verwenden, um Albumcover in einem Always-on-Top-Fenster anzuzeigen. Diese API wurde jedoch hauptsächlich für Videoelemente entwickelt und es war nicht möglich, Albumcover-Bilder anzuzeigen. Dies wurde umgangen, indem das Albumcover in ein Canvas-Element gerendert und mit der captureStream()-Methode HTMLCanvasElement ein MediaStream-Echtzeitobjekt abgerufen wurde. Dieser Stream dient dann als Quelle für das Video, das für die BiB API verwendet wird. Dieser Ansatz basierte auf dem Google Chrome-Beispiel "Audio Playlist".
Spotify kombinierte den Canvas mit den entsprechenden Aktions-Handlern, die in der Media Session API festgelegt wurden, um zu steuern, welche Steuerelemente des Videoplayers im BiB-Fenster angezeigt werden. So erhielten die Nutzer ein unverankertes Fenster mit Albumcover und Steuerelementen des Players, über das sie die Wiedergabe steuern und sich gleichzeitig auf andere Aufgaben konzentrieren konnten.
Dadurch konnte Spotify einen einfachen Miniplayer nutzen. Dieser Ansatz hatte jedoch einige Einschränkungen:
- Videountertitel werden im BiB-Fenster nicht unterstützt. Da Spotify bei allen Videos Untertitel einblenden musste, musste das BiB-Fenster geschlossen werden, sobald ein Video abgespielt wurde.
- Die Steuerelemente des Videoplayers sind nur sichtbar, wenn die Wiedergabe lokal stattfindet. Spotify ermöglicht die Remote-Wiedergabe über Spotify Connect (und andere Protokolle) und möchte, dass der Nutzer auch diese Wiedergabe steuern kann.
- Das Anpassen des Erscheinungsbilds des BiB-Fensters wird nicht unterstützt. Spotify konnte nur Grafiken anzeigen und die von Chrome bereitgestellten Player-Steuerelemente verwenden, sodass das Spotify-Branding oder zusätzliche Player-Steuerelemente nicht hinzugefügt werden können.
Aufgrund der mangelnden Kontrolle über die Benutzeroberfläche und der mangelnden Kontrolle über die Benutzeroberfläche und der Möglichkeit, Spotify-spezifische Funktionen hier hinzuzufügen (z. B. einen Titel mit „Mag ich“ zu bewerten), war das Team der Meinung, dass dieser Ansatz nicht gut für den Desktop-Client des Unternehmens geeignet war.
Bild im Bild dokumentieren: Die Weiterentwicklung des Miniplayers
Anfang 2023 erfuhr Spotify von dem erneuten Interesse von Google Chrome an der Einführung einer neuen API, mit der beliebige HTML-Inhalte im BiB-Fenster angezeigt werden können. Diese wird als Document Picture-in-Picture API bezeichnet. Diese Entwicklung war für Spotify aufregend, da sie damit die vollständige Kontrolle über das Erscheinungsbild des BiB-Fensters erhielt. Im Rahmen des Ursprungstests hat Spotify mit dem Chrome-Team zusammengearbeitet, um einen neuen Miniplayer zu entwickeln, der auf der Document Picture-in-Picture API basiert.
Mit der Document BiB API können Sie ein neues Always-on-Top-Fenster öffnen, an das Sie Elemente anhängen können. Da der Spotify-Webplayer eine React-Webanwendung ist, nutzte Spotify die createPortal()-Methode von ReactDOM, um benutzerdefinierte Komponenten von der Hauptanwendung aus im BiB-Fenster zu rendern. So haben Sie die volle Kontrolle über das Erscheinungsbild und die Funktionen des Miniplayers.
Die neue Document Picture-in-Picture API ging auch auf die früheren Probleme von Spotify ein:
- Videos im BiB-Fenster sind normale Videoelemente und bieten vollständige Unterstützung für Untertitel.
- Durch die vollständige Kontrolle über die Benutzeroberfläche können die Steuerelemente des Players auch dann angezeigt werden, wenn die Wiedergabe über Spotify Connect erfolgt.
- Spotify konnte das Design und die Steuerelemente des Videoplayers integrieren, um die Nutzererfahrung zu verbessern.
- Das Unternehmen konnte die Document BiB API im Desktop-Client von Spotify unterstützen und damit Millionen von Desktop-Nutzern den Miniplayer zur Verfügung stellen.
Mit React ein Bild-im-Bild-Fenster erstellen
Das folgende Beispiel zeigt, wie Sie „Dokument im Bild“ in React verwenden können, genau wie das Spotify-Team. Du erstellst zwei React-Komponenten: MyFeature und PiPContainer.
Die Komponente „MyFeature“ ist für die Verwaltung des Bild-im-Bild-Fensters verantwortlich. Damit wird eine Schaltfläche gerendert, mit der das Bild-im-Bild-Fenster umgeschaltet und die Komponente PiPContainer gerendert werden kann. Außerdem abonniert sie das "pagehide"-Ereignis des Bild-im-Bild-Fensters, um den Status beim Schließen des Fensters zu aktualisieren.
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>
</>
);
};
Die Komponente PiPContainer verwendet die Methode createPortal() von ReactDOM, um Inhalte im Bild-im-Bild-Fenster zu rendern.
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;
};
Nächste Schritte
Spotify arbeitet kontinuierlich daran, den Miniplayer zu verbessern, und plant, die Funktionen und die Nutzererfahrung weiter zu optimieren. Sie können sich zwar noch nicht auf bestimmte Funktionen festlegen, sind aber gespannt auf die zukünftigen Möglichkeiten, die der Miniplayer bietet.
Die Document Picture-in-Picture API bietet die Flexibilität und die Steuerungsmöglichkeiten für einen intuitiveren und nutzerfreundlicheren Miniplayer. Die Hoffnung ist, dass andere Browseranbieter die Möglichkeiten, die diese API bietet, zur Kenntnis nehmen und gegebenenfalls Support dafür integrieren. Dadurch kann Spotify allen Nutzenden unabhängig vom verwendeten Browser ein einheitliches und verbessertes Erlebnis bieten.
Danksagungen
Vielen Dank an alle bei Spotify, die an der Entwicklung des Miniplayers beteiligt waren.
Spotify möchte sich auch bei dem Google Chrome-Team für die Zusammenarbeit und für die Berücksichtigung des Feedbacks von Spotify für die Document Picture-in-Picture API bedanken.