Integración Spotify - MetalTech Dominion

1

Registra tu aplicación en Spotify

Ve al Dashboard de Spotify y crea una nueva aplicación.

⚠️ Importante: Guarda tu Client ID y Client Secret en un lugar seguro. Nunca los expongas en el frontend de producción.

2

Obtén el token de acceso

Usa el flujo de Client Credentials para obtener un token:

// Obtener token de acceso
async function getSpotifyToken() {
    const clientId = 'TU_CLIENT_ID';
    const clientSecret = 'TU_CLIENT_SECRET';
    
    const response = await fetch('https://accounts.spotify.com/api/token', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Authorization': 'Basic ' + btoa(clientId + ':' + clientSecret)
        },
        body: 'grant_type=client_credentials'
    });
    
    const data = await response.json();
    return data.access_token;
}

// Uso
const token = await getSpotifyToken();
console.log('Token:', token);
                    

3

Realiza tu primera búsqueda

Busca canciones, artistas o álbumes usando el token:

// Buscar en Spotify
async function searchSpotify(query, type = 'track', limit = 10) {
    const token = await getSpotifyToken();
    
    const response = await fetch(
        `https://api.spotify.com/v1/search?q=${encodeURIComponent(query)}&type=${type}&limit=${limit}`,
        {
            headers: {
                'Authorization': `Bearer ${token}`
            }
        }
    );
    
    if (!response.ok) {
        throw new Error(`Error: ${response.status} ${response.statusText}`);
    }
    
    return await response.json();
}

// Ejemplos de uso
searchSpotify('Metallica', 'artist', 5)
    .then(data => console.log('Artistas:', data.artists.items));

searchSpotify('Master of Puppets', 'track', 10)
    .then(data => console.log('Canciones:', data.tracks.items));
                    

4

Reproduce previews de 30 segundos

Los tracks de Spotify incluyen URLs de preview que puedes reproducir directamente:

// Reproductor de previews
class SpotifyPlayer {
    constructor() {
        this.audio = new Audio();
        this.currentTrack = null;
    }

    playPreview(track) {
        if (track.preview_url) {
            this.currentTrack = track;
            this.audio.src = track.preview_url;
            this.audio.play();
            return true;
        } else {
            console.log('No hay preview disponible para esta canción');
            return false;
        }
    }

    pause() {
        this.audio.pause();
    }

    stop() {
        this.audio.pause();
        this.audio.currentTime = 0;
    }
}

// Uso
const player = new SpotifyPlayer();

// Buscar y reproducir
searchSpotify('Enter Sandman', 'track', 1)
    .then(data => {
        const track = data.tracks.items[0];
        if (track && track.preview_url) {
            console.log('Reproduciendo:', track.name, 'de', track.artists[0].name);
            player.playPreview(track);
        }
    });
                    

5

Manejo de errores y rate limits

Implementa manejo robusto de errores para las llamadas a la API:

// Manejo robusto de errores
async function safeSpotifyCall(apiCall, retries = 3) {
    for (let i = 0; i < retries; i++) {
        try {
            const result = await apiCall();
            return result;
        } catch (error) {
            console.error(`Intento ${i + 1} fallido:`, error);
            
            // Si es un error 429 (rate limit), esperar
            if (error.message.includes('429')) {
                const waitTime = Math.pow(2, i) * 1000; // Backoff exponencial
                console.log(`Rate limited, esperando ${waitTime}ms...`);
                await new Promise(resolve => setTimeout(resolve, waitTime));
            } else if (i === retries - 1) {
                throw error;
            }
        }
    }
}

// Uso con manejo de errores
async function getTrackWithPreview(trackId) {
    return await safeSpotifyCall(async () => {
        const token = await getSpotifyToken();
        const response = await fetch(`https://api.spotify.com/v1/tracks/${trackId}`, {
            headers: { 'Authorization': `Bearer ${token}` }
        });
        
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        
        return await response.json();
    });
}
                    

🎧 Integración Spotify en 5 Minutos

📋 ¿Qué aprenderás?

🚀 Guía Paso a Paso

Registra tu aplicación en Spotify

Obtén el token de acceso

Realiza tu primera búsqueda

Reproduce previews de 30 segundos

Manejo de errores y rate limits

🎯 Demo en Vivo

💡 Mejores Prácticas

🚀 Próximos Pasos