API Spotify Now Playing

1Crear Aplicación en Spotify

2Configurar Variables de Entorno

# Variables de entorno necesarias (.env.local)
SPOTIFY_CLIENT_ID=tu_client_id_aqui
SPOTIFY_CLIENT_SECRET=tu_client_secret_aqui  
SPOTIFY_REFRESH_TOKEN=tu_refresh_token_aqui

3Obtener Refresh Token

'use client'

import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { FaSpotify, FaHeadphones, FaPause, FaPlay, FaVolumeUp, FaExclamationTriangle } from 'react-icons/fa';
import Image from 'next/image';

interface SpotifyData {
  isPlaying: boolean;
  title?: string;
  artist?: string;
  album?: string;
  albumImageUrl?: string;
  songUrl?: string;
  progress?: number;
  duration?: number;
  error?: string;
  timestamp?: string;
}

const formatTime = (ms: number): string => {
  const seconds = Math.floor((ms / 1000) % 60);
  const minutes = Math.floor((ms / 1000 / 60) % 60);
  return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
};

// Función para obtener la URL correcta del API
const getApiUrl = () => {
  const isGitHubPages = window.location.hostname.includes('github.io');
  if (isGitHubPages) {
    return `${window.location.origin}/api/spotify`;
  }
  return '/api/spotify';
};

const SpotifyNowPlaying: React.FC = () => {
  const [data, setData] = useState<SpotifyData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [progress, setProgress] = useState(0);
  const [clientProgress, setClientProgress] = useState(0);

  useEffect(() => {
    const fetchSpotifyData = async () => {
      try {
        setLoading(true);
        setError(null);
        
        const res = await fetch(getApiUrl(), {
          method: 'GET',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          },
          cache: 'no-store'
        });
        
        if (!res.ok) {
          throw new Error(`API responded with status: ${res.status}`);
        }
        
        const newData: SpotifyData = await res.json();
        
        if (newData.error) {
          setError(newData.error);
        } else {
          setData(newData);
          
          if (newData.isPlaying && newData.progress && newData.duration) {
            setProgress((newData.progress / newData.duration) * 100);
            setClientProgress(newData.progress);
          }
        }
      } catch (error) {
        setError('No se pudieron cargar los datos de Spotify');
      } finally {
        setLoading(false);
      }
    };

    fetchSpotifyData();
    // Actualización cada 30 segundos
    const interval = setInterval(fetchSpotifyData, 30000);
    return () => clearInterval(interval);
  }, []);

  // Progreso en tiempo real
  useEffect(() => {
    let intervalId: NodeJS.Timeout;
    
    if (data?.isPlaying && data.duration) {
      intervalId = setInterval(() => {
        setClientProgress(prev => {
          if (prev >= data.duration!) return prev;
          const newProgress = prev + 1000;
          setProgress((newProgress / data.duration!) * 100);
          return newProgress;
        });
      }, 1000);
    }
    
    return () => {
      if (intervalId) clearInterval(intervalId);
    };
  }, [data]);

  if (loading) {
    return (
      <div className="flex items-center space-x-2 text-sm text-gray-400">
        <FaSpotify className="text-emerald-400 animate-pulse" />
        <span>Conectando con Spotify...</span>
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex flex-col">
        <div className="flex items-center space-x-2 text-sm text-red-400">
          <FaExclamationTriangle className="text-red-400" />
          <span>Error al conectar con Spotify</span>
        </div>
        <p className="text-xs text-gray-500 mt-1">{error}</p>
      </div>
    );
  }

  if (!data || !data.isPlaying) {
    return (
      <div className="flex flex-col">
        <div className="flex items-center space-x-2 text-sm text-gray-400">
          <FaHeadphones className="text-gray-400" />
          <span>No escucho nada ahora</span>
        </div>
        <p className="text-xs text-gray-500 mt-1">
          La música aparecerá aquí cuando reproduzca algo en Spotify
        </p>
      </div>
    );
  }

  return (
    <motion.div className="flex flex-col">
      <div className="flex items-center mb-2">
        <motion.div 
          animate={{ scale: [1, 1.2, 1], rotate: [0, 5, -5, 0] }}
          transition={{ duration: 2, repeat: Infinity, repeatType: "reverse" }}
          className="mr-2"
        >
          <FaSpotify className="text-lg text-green-500" />
        </motion.div>
        <span className="text-sm font-medium text-emerald-400">Escuchando ahora</span>
      </div>
      
      <div className="relative overflow-hidden rounded-lg bg-gradient-to-br from-neutral-800 to-neutral-900">
        <div 
          className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-green-500 to-emerald-400"
          style={{ transform: `scaleX(${progress / 100})`, transformOrigin: 'left' }}
        />
        
        <div className="p-3">
          <div className="flex space-x-3 items-center">
            {data.albumImageUrl && (
              <div className="relative w-14 h-14 min-w-[56px] rounded-md overflow-hidden shadow-lg">
                <Image 
                  src={data.albumImageUrl} 
                  alt={`${data.album} cover`}
                  className="w-full h-full object-cover"
                  width={56}
                  height={56}
                />
                <div className="absolute bottom-1 right-1 bg-black/60 rounded-full p-1">
                  <FaPlay className="text-white text-[8px]" />
                </div>
              </div>
            )}
            
            <div className="flex flex-col overflow-hidden flex-1">
              <a 
                href={data.songUrl} 
                target="_blank" 
                rel="noopener noreferrer"
                className="font-medium text-white truncate hover:text-emerald-300 transition-colors text-sm"
              >
                {data.title}
              </a>
              <p className="text-gray-400 text-xs truncate">
                {data.artist}
              </p>
              
              <div className="flex justify-between items-center mt-1 text-[10px] text-gray-500">
                <span>
                  {data.progress && formatTime(clientProgress)}
                </span>
                <span className="flex items-center">
                  <FaVolumeUp className="mr-1" size={8} />
                  {data.duration && formatTime(data.duration)}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </motion.div>
  );
};

export default SpotifyNowPlaying;

📍 Ubicación en el Proyecto

📦 Dependencias Utilizadas

// API Route: /app/api/spotify/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
  const CLIENT_ID = process.env.SPOTIFY_CLIENT_ID;
  const CLIENT_SECRET = process.env.SPOTIFY_CLIENT_SECRET;
  const REFRESH_TOKEN = process.env.SPOTIFY_REFRESH_TOKEN;
  
  if (!CLIENT_ID || !CLIENT_SECRET || !REFRESH_TOKEN) {
    return NextResponse.json({
      isPlaying: false,
      error: 'Missing Spotify credentials',
    });
  }

  try {
    // 1. Obtener token de acceso usando refresh token
    const authResponse = await fetch('https://accounts.spotify.com/api/token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Authorization': `Basic ${Buffer.from(`${CLIENT_ID}:${CLIENT_SECRET}`).toString('base64')}`
      },
      body: new URLSearchParams({
        grant_type: 'refresh_token',
        refresh_token: REFRESH_TOKEN
      })
    });

    const authData = await authResponse.json();

    // 2. Obtener estado actual de reproducción
    const nowPlayingResponse = await fetch(
      'https://api.spotify.com/v1/me/player/currently-playing',
      {
        headers: {
          'Authorization': `Bearer ${authData.access_token}`
        }
      }
    );

    // 3. Manejar respuestas vacías o errores
    if (nowPlayingResponse.status === 204 || nowPlayingResponse.status > 400) {
      return NextResponse.json({
        isPlaying: false,
        timestamp: new Date().toISOString()
      });
    }

    const nowPlaying = await nowPlayingResponse.json();
    
    if (!nowPlaying.is_playing) {
      return NextResponse.json({
        isPlaying: false,
        timestamp: new Date().toISOString()
      });
    }

    // 4. Formatear respuesta
    return NextResponse.json({
      isPlaying: nowPlaying.is_playing,
      title: nowPlaying.item.name,
      artist: nowPlaying.item.artists.map(artist => artist.name).join(', '),
      album: nowPlaying.item.album.name,
      albumImageUrl: nowPlaying.item.album.images[0].url,
      songUrl: nowPlaying.item.external_urls.spotify,
      progress: nowPlaying.progress_ms,
      duration: nowPlaying.item.duration_ms,
      timestamp: new Date().toISOString()
    }, {
      headers: {
        'Cache-Control': 'no-cache, no-store, must-revalidate',
        'Access-Control-Allow-Origin': '*'
      }
    });
  } catch (error) {
    return NextResponse.json({
      isPlaying: false,
      error: 'Error processing Spotify request',
      details: String(error)
    });
  }
}

🔧 Características del API Route

📊 Estados de Respuesta