- playing around with the spotify API

TobiasMue91 · TobiasMue91 · commit 3ea6bc8cd901 · 2025-02-16T13:18:27.000+01:00
diff --git a/tools/spotify_test.html b/tools/spotify_test.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Spotify Dev Player</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 2rem auto;
+            padding: 0 1rem;
+        }
+        .credentials {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            margin-bottom: 2rem;
+        }
+        input {
+            padding: 0.5rem;
+            width: 100%;
+        }
+        button {
+            padding: 0.5rem 1rem;
+            cursor: pointer;
+        }
+        .hidden {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+<div id="setup" class="credentials">
+    <input type="text" id="clientId" placeholder="Enter Spotify Client ID">
+    <input type="text" id="clientSecret" placeholder="Enter Spotify Client Secret">
+    <button onclick="startAuth()">Initialize Player</button>
+</div>
+
+<div id="player" class="hidden">
+    <button onclick="togglePlay()">Play/Pause</button>
+</div>
+
+<script src="https://sdk.scdn.co/spotify-player.js"></script>
+<script>
+    let playerInstance = null;
+    const redirectUri = 'http://gptgames.dev/tools/spotify_test.html';
+
+    async function startAuth() {
+        const clientId = document.getElementById('clientId').value;
+        const state = Math.random().toString(36).substring(7);
+        const scope = 'streaming user-read-email user-read-private';
+
+        const authUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=code&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${encodeURIComponent(scope)}&state=${state}`;
+        window.location.href = authUrl;
+    }
+
+    async function handleCallback() {
+        const urlParams = new URLSearchParams(window.location.search);
+        const code = urlParams.get('code');
+
+        if (code) {
+            const clientId = document.getElementById('clientId').value;
+            const clientSecret = document.getElementById('clientSecret').value;
+
+            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: new URLSearchParams({
+                    code: code,
+                    redirect_uri: redirectUri,
+                    grant_type: 'authorization_code',
+                    client_id: clientId
+                })
+            });
+
+            const data = await response.json();
+            initializePlayer(data.access_token);
+        }
+    }
+
+    function initializePlayer(token) {
+        document.getElementById('setup').classList.add('hidden');
+        document.getElementById('player').classList.remove('hidden');
+
+        window.onSpotifyWebPlaybackSDKReady = () => {
+            playerInstance = new Spotify.Player({
+                name: 'Development Player',
+                getOAuthToken: cb => { cb(token); },
+                volume: 0.5
+            });
+
+            playerInstance.addListener('ready', ({ device_id }) => {
+                console.log('Ready with Device ID', device_id);
+            });
+
+            playerInstance.connect();
+        };
+    }
+
+    function togglePlay() {
+        if (playerInstance) {
+            playerInstance.togglePlay();
+        }
+    }
+
+    if (window.location.search.includes('code=')) {
+        handleCallback();
+    }
+</script>
+</body>
+</html>
