Tune by Mozaiklabs

Connecter Spotify à Tune

Spotify ne fournit pas de clé toute faite à Tune : vous créez une petite application Spotify à vous, gratuitement, et vous donnez son Client ID à Tune. Cette page décrit tout le parcours, y compris l'étape qui surprend tout le monde quand Tune tourne sur une autre machine : une page qui « ne se charge pas ». C'est prévu, et le remède prend dix secondes.

Ce qu'il vous faut

  • Un compte Spotify pour créer l'application. Les règles de Spotify pour les applications en mode développement peuvent exiger un compte Premium pour son propriétaire. Lire des titres Spotify dans Tune exige aussi Premium (voir la section Spotify de Services de streaming).
  • Tune 1.0.0-rc2 ou plus récent, où le Client ID se saisit dans l'interface.
  • L'adresse de votre serveur Tune, telle que vous l'ouvrez dans le navigateur.

Le principe, en deux phrases

Une fois connecté, Spotify renvoie votre navigateur vers une adresse de redirection que Tune lui a indiquée : http://127.0.0.1:8888/api/v1/streaming/spotify/callback?code=… (8888 est le port par défaut de Tune ; si vous l'avez changé, c'est le port affiché par Tune qui compte). L'adresse 127.0.0.1 veut toujours dire « cet ordinateur-ci » : elle ne marche que si le navigateur et Tune sont sur la même machine.

Si Tune tourne ailleurs (NAS, Docker, Raspberry Pi, Tune OS), le navigateur cherche Tune chez lui, ne trouve rien et affiche une page blanche ou « page Web non valide ». Ce n'est pas un bug. L'adresse dans la barre d'adresse contient toujours le code délivré par Spotify : vous la copiez et la collez dans Tune.

Pas à pas

  1. Ouvrez la carte Spotify dans Tune. Allez dans Réglages › Accès et jetons › Services de streaming et repérez Spotify. Si le serveur n'a pas encore de Client ID, la carte affiche le champ Client ID de votre application Spotify. Dessous, la ligne URI de redirection à déclarer, à l'identique, dans votre application Spotify (tableau de bord développeur) donne l'adresse à copier à l'étape 3.
  2. Créez l'application chez Spotify. Cliquez sur Ouvrir le tableau de bord Spotify (ou allez sur developer.spotify.com/dashboard), connectez-vous avec votre compte Spotify, puis cliquez sur Create app. Renseignez App name (par exemple « Tune ») et App description (par exemple « Serveur de musique Tune »). Cochez Web API si Spotify demande quelles API vous comptez utiliser, et acceptez les conditions d'utilisation pour développeurs de Spotify. Le tableau de bord Spotify est en anglais.
  3. Déclarez l'adresse de redirection. Dans le champ Redirect URIs, collez l'adresse affichée par Tune, à l'identique, puis cliquez sur Add et Save. Elle ressemble à http://127.0.0.1:8888/api/v1/streaming/spotify/callback. Pas localhost, pas l'adresse IP de votre serveur (voir « Erreurs courantes »).
  4. Ajoutez-vous aux utilisateurs de l'application. Une nouvelle application Spotify démarre en mode développement : seuls les utilisateurs que vous listez peuvent s'en servir. Sur la page de l'application, ouvrez User Management et ajoutez votre nom Spotify et l'adresse e-mail de votre compte Spotify. Sans cette étape, la connexion échoue, ou Spotify répond par des erreurs plus tard.
  5. Copiez le Client ID. Sur la page de l'application, ouvrez Settings (Basic Information) : le Client ID est une suite de 32 caractères. Copiez-le. Le Client Secret ne sert jamais : Tune ne l'utilise pas.
  6. Collez-le dans Tune. Dans la carte Spotify, collez-le dans Client ID de votre application Spotify et cliquez sur Enregistrer. Le message « Client ID enregistré : vous pouvez maintenant vous connecter » apparaît.
  7. Connectez-vous. Cliquez sur Se connecter, puis sur Ouvrir la page de connexion. Spotify vous demande d'autoriser l'application : acceptez.
  8. Tune sur le même ordinateur que le navigateur : la page qui s'ouvre affiche une courte ligne de texte (authenticated: true et votre nom), et la carte indique connecté avec votre nom. C'est terminé.
    Tune sur une autre machine : la page qui s'ouvre ne se charge pas (« page Web non valide », « impossible de se connecter à ce site », page blanche) : c'est normal. Copiez l'adresse complète de la barre d'adresse : elle commence par http://127.0.0.1: et contient ?code= suivi d'une longue suite de caractères. Revenez dans Tune : sous le lien de connexion, un champ apparaît, dont le texte commence par « Tune tourne sur une autre machine… ». Collez l'adresse dedans et cliquez sur Valider. La carte indique connecté.

Avec Safari, la barre d'adresse n'affiche que le nom d'hôte tant qu'on ne clique pas dedans : cliquez dedans, puis copiez. N'attendez pas trop entre l'autorisation et le collage, et ne rechargez pas la page : un code ne sert qu'une fois.

Depuis un téléphone ou une tablette, Tune sert aussi une page simple qui fait la même chose sans l'interface de Tune : http://<adresse du serveur>:8888/api/v1/streaming/spotify/connect. Elle montre le lien vers Spotify et un champ pour coller l'adresse.

Erreurs courantes

Ce que vous voyezCause et remède
La page après la connexion ne se charge pas (« page Web non valide »)Normal quand Tune est sur une autre machine. Copiez l'adresse complète et collez-la dans Tune (étape 8).
Spotify répond redirect_uri: Insecure, ou « Spotify refuse cette URI » sous la carteSpotify n'accepte http:// que pour 127.0.0.1. Une adresse comme http://192.168.1.20:8888/… ou un nom d'hôte est refusée. Déclarez http://127.0.0.1:<port>/api/v1/streaming/spotify/callback, ou une adresse HTTPS.
localhost refuséSpotify n'accepte plus localhost. Écrivez 127.0.0.1.
INVALID_CLIENT: Invalid redirect URI sur la page de Spotify, ou redirect_uri non conformeL'adresse déclarée dans le tableau de bord n'est pas identique à celle que Tune envoie. Comparez caractère par caractère (port, chemin, pas de barre finale) avec celle affichée par Tune dans la carte, puis enregistrez dans le tableau de bord.
« L'adresse collée ne contient pas de code »Vous avez collé l'adresse de redirection sans ?code=…, ou la page du tableau de bord. Collez l'adresse complète de la page ouverte après l'autorisation.
« Ceci est un Client ID, pas l'adresse de retour »Vous avez collé le Client ID (32 caractères) dans le champ de l'adresse de retour. Le Client ID va dans le premier champ ; collez ici la longue adresse qui commence par http://127.0.0.1.
« Cette adresse de retour vient d'une autre tentative de connexion », ou « aucune connexion en cours »Le serveur a redémarré, ou vous avez lancé une autre connexion depuis. Cliquez de nouveau sur Se connecter et utilisez la nouvelle adresse. Un code ne sert qu'une fois.
Autorisation refusée par Spotify (access_denied), ou connexion impossible avec votre compteVous avez cliqué sur « Annuler » chez Spotify, ou votre compte n'est pas dans User Management de l'application (étape 4) : ajoutez l'adresse e-mail de votre compte Spotify.
Aucun Client ID sur ce serveurSaisissez-le comme à l'étape 6. Si le champ n'est pas proposé, une variable TUNE_SPOTIFY_CLIENT_ID est déjà définie sur le serveur et elle l'emporte.

Changer de port ou de compte

  • Si vous changez le port de Tune (TUNE_PORT), l'adresse de redirection change avec lui : déclarez la nouvelle dans le tableau de bord et reconnectez-vous.
  • Pour utiliser un autre compte Spotify, déconnectez-vous dans la carte Spotify puis reconnectez-vous. Pour changer le Client ID, utilisez Modifier ou Effacer à côté.

Voir aussi : Services de streaming et Dépannage.