TechPrufer
Get started
Spotify
Spotify logoSpotify · Feature trail

Web Player Architecture and Performance

1 post · Feb 2019

What this trail covers

Spotify's web player has undergone a significant architectural overhaul, moving from an iframe-based, multi-library approach to a unified Single Page Application (SPA) built with React + Redux. This rewrite addressed performance issues, improved maintainability, and enabled faster iteration and experimentation. The new player leverages HTML5 standards, Encrypted Media Extensions (EME) for playback, and modern CI/CD pipelines for immediate user updates. This evolution has led to improved user engagement metrics and the ability to introduce new features like Daily Mixes and Connect more effectively.

All Spotify trails
  1. Building Spotify’s New Web PlayerThis post details the complete rewrite of Spotify's web player. It describes the architectural limitations of the previous iframe-based, multi-library approach, which led to long load times and maintenance challenges. The new architecture is a Single Page Application (SPA) using React + Redux, inspired by the Spotify TV application. Key technical decisions included adopting HTML5 standards and EME for playback, embracing well-known open-source solutions over custom libraries for faster onboarding, and implementing fast CI/CD pipelines. The rewrite resulted in a faster, simpler player that outperformed the old version in key metrics and enabled the introduction of new features.