rehber, Spotify Embed & iFrame

Selam, nasılsın? Bugün sana Spotify embed ve iframe kullanımlarından bahsedeceğim. Spotify’dan bir çalma listesini, albümü ya da şarkıyı web sitene nasıl ekleyebileceğini anlatacağım. Baştan söyleyeyim, çok kolay.

Başlangıç için Spotify’da paylaşmak istediğin içeriği bul. verdiğim eklere göre ilerle. (bkz: ek 1, ek 1.2) Ardından verilen iframe kodunu kopyala ve web sitenin uygun bir yerine yapıştır. Eğer HTML konusunda çok tecrübeli değilsen, yine de bu işlemi kolayca halledebilirsin.

Ben örnek gösterim için arım balım peteğim ile yaptığımız listemizi aşağıya bırakıyorum. Her şey bittiğinde elinde böyle bir iFrame olmalı.

Iframe kullanımı bazı platformlarda sorun yaratabilir. Mesela, WordPress gibi içerik yönetim sistemleri iframe eklemeye bazen izin vermez. Eğer böyle bir durumla karşılaşırsan, daha teknik bir çözüm olan Spotify API’sini kullanmayı düşünebilirsin. Bu biraz daha detaylı bir yöntem ama esneklik sağlar. API kullanımıyla ilgili de seni bilgilendireyim.

Spotify API, dinamik içerik göstermek ya da Spotify hesabındaki bilgilere erişmek için kullanılabilecek bir araçtır. Örneğin, sitende anlık olarak dinlediğin şarkıyı göstermek istiyorsan API tam sana göre. Başlamak için şu sayfaya git ve bir uygulama oluştur. Bu işlem sonunda sana bir Client ID ve Client Secret verilecek. Bunlar, API ile iletişim kurarken kimliğini doğrulamak için gereklidir.

Bir sonraki adımda, API isteklerini göndermek için bir token alman gerekiyor. Spotify’ın sunduğu Authorization Code Flow gibi yöntemlerden birini kullanarak bu token’ı alabilirsin. Aşağıda basit bir örnekle token alımını ve bir API isteği yapmayı gösterdim.

const clientId = 'YOUR_CLIENT_ID';
const clientSecret = 'YOUR_CLIENT_SECRET';

async function getToken() {
    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;
}

async function getCurrentlyPlaying() {
    const token = await getToken();
    const response = await fetch('https://api.spotify.com/v1/me/player/currently-playing', {
        headers: {
            'Authorization': 'Bearer ' + token
        }
    });
    if (response.status === 200) {
        const data = await response.json();
        console.log(data);
    } else {
        console.log('Currently not playing any track.');
    }
}

getCurrentlyPlaying();

Bu kod, Spotify hesabında o an çalan şarkıyı getirir. Dikkat et, kişisel bilgilerine erişmek istiyorsan kullanıcıdan izin alman gerekiyor. Bunun için scope parametresi eklemeyi unutma.

Spotify API ile yapabileceklerin iframe’den çok daha fazlasını sunar. Dinleme geçmişi, çalma listeleri ya da sanatçı bilgileri gibi birçok veriye erişebilirsin. API’yi kullanarak siteni daha interaktif ve kişiselleştirilmiş bir hale getirebilirsin.

Zor veya karışık gelebilir. İnan bana “girince alışıyorsun” terimi yazılım için en doğru terimlerden biri. Hırsını kaybetme, seni bekliyor olacağım.

Başka bir yazıda tekrar görüşmek üzere.

kendine iyi bak, iyi şanslar.