01
Importer
Collez n'importe quelle URL de playlist Spotify publique.
ÉTUDE DE CAS · PLATEFORME MUSICALE
Singuessr
Singuessr est une plateforme de blindtest musical dynamique construite pour les fans de tous genres. Elle combine deux API musicales : l'API Web Spotify (via un proxy Cloudflare Worker sur mesure et performant) fournit les métadonnées de playlist et les pochettes d'album, tandis que l'API Apple Music / iTunes Search livre les extraits audio de 30 secondes qui animent chaque manche. L'architecture serverless hybride gère les restrictions régionales d'API, la récupération récursive à forte concurrence, et la correspondance de titres entre catalogues.
reactserverlessspotify-apiapple-music-api
LE PROBLÈME
Les blindtests musicaux traditionnels sont statiques, prédéfinis et limités en portée.
Construit pour résoudre les limites du quiz musical statique. Singuessr utilise Spotify comme source de vérité pour les playlists et les pochettes (car c'est là que les utilisateurs organisent leur musique), mais route la lecture audio via le catalogue public de previews Apple Music / iTunes — accessible mondialement, non authentifié, et sans complexité OAuth.
- Les licences régionales bloquent les previews Spotify. Les serveurs cloud reçoivent des erreurs 403 des URLs de preview Spotify pour le contenu de la région UE — l'audio ne joue tout simplement pas pour la plupart des utilisateurs.
- Les blindtests statiques deviennent vite ennuyeux. Les listes de chansons prédéfinies ne scalent pas et perdent rapidement leur intérêt de rejouabilité après quelques sessions.
- Les grandes playlists sont lentes à charger. Récupérer 100+ titres depuis l'API paginée de Spotify crée une latence de chargement pénible.
Mélomanes & groupes d'amis
Toute personne qui veut lancer un blindtest en temps réel sur ses propres playlists Spotify organisées
∞
playlists jouables
<200ms
chargement grande playlist
0
blocages régionaux
LA SOLUTION
le blindtest dynamique ultime.
Une architecture serverless hybride : une SPA React pour l'UI et un Cloudflare Worker pour la couche proxy d'API. Le Worker gère l'OAuth2 Spotify, l'aplatissement récursif de playlist, et la correspondance entre catalogues via l'API publique iTunes Search pour résoudre l'URL de preview Apple Music de chaque titre. Le frontend gère la boucle audio interactive et alimente la file de manches directement depuis ces URLs de preview. Le déploiement est entièrement automatisé via le réseau edge de Cloudflare.
02
Résoudre
Le worker en périphérie aplatit les titres Spotify et fait correspondre chacun à sa preview Apple Music.
03
Jouer
Les previews Apple Music streament manche après manche, avec les pochettes de Spotify.
04
Score
La correspondance floue valide les devinettes de titres.
Avant
outils fragmentés · forte charge manuelle
Après
produit unifié unique · rapide et automatisé
FONCTIONNALITÉS CLÉS
Conçu autour de la façon dont mélomanes & groupes d'amis travaillent réellement.
FEATURE 01
Proxy Cloudflare Worker
Un Worker léger orchestre deux API : il interroge Spotify pour les données de playlist + pochettes d'album (avec les bons en-têtes de marché pour éviter les blocages régionaux), puis résout chaque titre vers son URL de preview Apple Music via iTunes Search.
- Résout les blocages régionaux 403 de Spotify de façon transparente pour le client
- Correspondance entre catalogues via iTunes Search pour trouver chaque URL de preview
- Gère le flux de token OAuth2 et l'orchestration des requêtes en périphérie
FEATURE 02
Aplatissement récursif de playlist
Un seul appel de récupération parcourt récursivement tous les endpoints paginés de Spotify, retournant un tableau de titres aplati — chacun enrichi de sa preview Apple Music correspondante — en un seul aller-retour.
- Gère la limite de 100 éléments par page de Spotify de façon transparente
- Moins de 200 ms pour les grandes playlists grâce à la colocalisation en périphérie
FEATURE 03
Gestion du cycle de vie audio
Une machine à états sur mesure précharge le prochain buffer de preview Apple Music pendant la manche active, éliminant la latence perçue entre les manches.
- Transitions de manche sans latence via préchargement en arrière-plan
- Gestion des conditions de concurrence pendant les séquences de devinette rapides
DÉFI TECHNIQUE
Problèmes difficiles résolus.
Le proxy utilise une stratégie « aplatir-et-mettre-en-cache » pour les métadonnées de playlist Spotify (pochettes + titres + artistes) et transmet chaque titre vers une recherche iTunes Search parallèle qui retourne une URL de preview Apple Music de 30 secondes. L'audio est ensuite joué dans la SPA React via l'API Audio HTML5 avec une machine à états sur mesure qui gère le chargement, la lecture, et les conditions de concurrence pendant les manches de devinette rapides.
Ce qui rendait la tâche difficile
- Concevoir un proxy Cloudflare Worker pour contourner les restrictions CORS et les verrous de licence régionaux lors de la récupération des données de playlist Spotify (injection d'en-têtes market=FR et gestion du rafraîchissement de token OAuth2 en périphérie).
- Faire correspondre chaque titre Spotify à son équivalent en preview Apple Music / iTunes à travers deux catalogues indépendants, avec une normalisation floue pour gérer les incohérences de nommage entre fournisseurs.
- Implémenter une récupération d'API récursive pour aplatir de larges playlists Spotify (100+ titres) en une seule charge JSON haute vitesse pour le frontend.
- Développer un algorithme de scoring « flou » qui normalise les titres de chansons, en retirant les métadonnées comme « - Remasterisé » ou « (Bonus Track) » pour garantir des devinettes justes.
- Optimiser le cycle de vie média en React pour précharger les prochains buffers audio Apple Music, garantissant une transition sans latence entre les manches.
architecture.ts
1 const frontend = [ "React", "Tailwind CSS", "API Audio HTML5" ];
2 const edge_/_backend = [ "Cloudflare Workers", "API Web Spotify", "API Apple Music / iTunes Search" ];
3 const algorithmes = [ "Normalisation regex", "Correspondance entre catalogues", "Correspondance floue", "Machine à états" ];
4 const monétisation = [ "A-Ads (respectueux de la vie privée)" ];
LA STACK
Technologies utilisées.
Frontend
ReactTailwind CSSAPI Audio HTML5
Edge / Backend
Cloudflare WorkersAPI Web SpotifyAPI Apple Music / iTunes Search
Algorithmes
Normalisation regexCorrespondance entre cataloguesCorrespondance floueMachine à états
Monétisation
A-Ads (respectueux de la vie privée)
CE QUE CELA PROUVE
Ce que Singuessr démontre.
Architecture serverless
Conçu et livré un Cloudflare Worker qui proxifie et orchestre deux API musicales en périphérie.
Contournement des restrictions régionales
Combiné Spotify (playlists + pochettes) avec Apple Music (previews accessibles mondialement) pour que l'audio joue pour chaque utilisateur, quelle que soit la région.
Ingénierie de performance
Atteint un chargement de grande playlist inférieur à 200 ms en colocalisant l'aplatissement des données et la correspondance entre catalogues en périphérie CDN.
Machine à états média
Construit un gestionnaire de cycle de vie audio robuste qui gère le préchargement et les conditions de concurrence dans un contexte de jeu rapide.
TRAVAILLER ENSEMBLE
Envie de construire quelque chose comme ça ?
Apportez-moi votre idée ou projet à moitié construit. Je le cadre, le conçois et le livre — avec le même workflow que derrière Singuessr.