- playing around with the spotify API

Author: TobiasMue91

tools/spotify_qr.html

@@ -30,9 +30,7 @@ <h1 class="text-2xl font-bold text-center mb-6 text-gray-800">Spotify Track QR G
         Generate QR Code
       </button>
 
-      <div id="qrOutput" class="flex justify-center">
-        <canvas id="qrcode" class="hidden"></canvas>
-      </div>
+      <div id="qrcode" class="flex justify-center"></div>
 
       <div id="downloadButton" class="text-center hidden">
         <a
@@ -70,7 +68,6 @@ <h1 class="text-2xl font-bold text-center mb-6 text-gray-800">Spotify Track QR G
       correctLevel: QRCode.CorrectLevel.H
     });
 
-    qrcode.classList.remove('hidden');
     downloadButton.classList.remove('hidden');
 
     setTimeout(() => {

tools/spotify_test.html

@@ -54,7 +54,7 @@
     <button class="setup-button" onclick="startAuth()">Initialize Player</button>
 </div>
 <div id="player" class="hidden">
-    <button id="playPauseButton">▐▐</button>
+    <button id="playPauseButton">▶</button>
 </div>
 
 <script>
@@ -67,7 +67,12 @@
         if (isPlaying) {
             playerInstance.pause();
         } else {
-            playerInstance.resume();
+            const trackId = getUrlParameter('track');
+            if (trackId) {
+                playTrackById(trackId);
+            } else {
+                playerInstance.resume();
+            }
         }
     }
 
@@ -114,6 +119,27 @@
         return hashParams;
     }
 
+    async function playTrackById(trackId) {
+        const token = localStorage.getItem('spotify_access_token');
+        try {
+            const response = await fetch('https://api.spotify.com/v1/me/player/play', {
+                method: 'PUT',
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    uris: [`spotify:track:${trackId}`]
+                })
+            });
+            if (response.status === 204) {
+                updatePlayPauseButton(true);
+            }
+        } catch (error) {
+            console.error('Error playing track:', error);
+        }
+    }
+
     function initializePlayer(token) {
         document.getElementById('setup').classList.add('hidden');
         document.getElementById('player').classList.remove('hidden');
@@ -140,9 +166,7 @@
             }
         });
 
-        let deviceReady = false;
         playerInstance.addListener('ready', async ({ device_id }) => {
-            deviceReady = true;
             try {
                 await fetch('https://api.spotify.com/v1/me/player', {
                     method: 'PUT',
@@ -155,22 +179,6 @@
                         play: false
                     })
                 });
-
-                const trackId = getUrlParameter('track');
-                if (trackId) {
-                    await new Promise(resolve => setTimeout(resolve, 1000));
-                    await fetch('https://api.spotify.com/v1/me/player/play', {
-                        method: 'PUT',
-                        headers: {
-                            'Authorization': `Bearer ${token}`,
-                            'Content-Type': 'application/json'
-                        },
-                        body: JSON.stringify({
-                            uris: [`spotify:track:${trackId}`]
-                        })
-                    });
-                    updatePlayPauseButton(true);
-                }
             } catch (error) {
                 console.error('Error during player initialization:', error);
             }