modified: app.py

modified: templates/quiz.html
2025-05-16 12:08:54 +02:00
parent 20509d212d
commit 287f8d5e3e
2 changed files with 142 additions and 10 deletions
--- a/templates/quiz.html
+++ b/templates/quiz.html
@@ -1,13 +1,103 @@
 <!DOCTYPE html>
 <html>
-<head><title>Musik Quiz</title></head>
+<head>
+  <title>Musik Quiz</title>
+  <!-- Spotify Web Playback SDK -->
+  <script src="https://sdk.scdn.co/spotify-player.js"></script>
+  <script>
+    window.onSpotifyWebPlaybackSDKReady = () => {
+      const token = '{{ access_token }}';
+      const player = new Spotify.Player({
+        name: 'Musik Quiz Player',
+        getOAuthToken: cb => { cb(token); },
+        volume: 0.5
+      });
+
+      // Error handling
+      player.addListener('initialization_error', ({ message }) => { console.error(message); });
+      player.addListener('authentication_error', ({ message }) => { console.error(message); });
+      player.addListener('account_error', ({ message }) => { console.error(message); });
+      player.addListener('playback_error', ({ message }) => { console.error(message); });
+
+      // Playback status updates
+      player.addListener('player_state_changed', state => {
+        console.log(state);
+        // Hier könntest du UI-Updates basierend auf dem Playback-Status hinzufügen
+      });
+
+      // Ready
+      player.addListener('ready', ({ device_id }) => {
+        console.log('Ready with Device ID', device_id);
+        document.getElementById('device_id').value = device_id;
+        
+        // Starte die Wiedergabe, wenn der Player bereit ist
+        fetch('/play_track?device_id=' + device_id + '&track_uri={{ track.uri }}', {
+          method: 'POST'
+        }).then(response => {
+          if (!response.ok) {
+            throw new Error('Network response was not ok');
+          }
+          return response.json();
+        }).catch(error => {
+          console.error('Error starting playback:', error);
+        });
+      });
+
+      // Not Ready
+      player.addListener('not_ready', ({ device_id }) => {
+        console.log('Device ID has gone offline', device_id);
+      });
+
+      // Connect to the player!
+      player.connect();
+    };
+  </script>
+  <style>
+    .controls {
+      margin-top: 20px;
+    }
+    .btn {
+      padding: 10px 15px;
+      margin: 5px;
+      background-color: #1DB954;
+      color: white;
+      border: none;
+      border-radius: 20px;
+      cursor: pointer;
+    }
+    .btn:hover {
+      background-color: #1ed760;
+    }
+  </style>
+</head>
 <body>
  <h2>Wer ist der Künstler dieses Songs?</h2>
-  <audio controls autoplay>
-    <source src="{{ track.preview_url }}" type="audio/mpeg">
-    Dein Browser unterstützt keine Audio-Wiedergabe.
-  </audio>
+  
+  <!-- Verstecktes Feld für device_id -->
+  <input type="hidden" id="device_id" value="">
+  
+  <!-- Player Controls -->
+  <div class="controls">
+    <button class="btn" onclick="togglePlay()">Play/Pause</button>
+  </div>
+
  <p><strong>Antwort:</strong> {{ track.artists[0].name }} (für Demo-Zwecke)</p>
-  <a href="/quiz/{{ track.id }}">Neue Frage</a>
+  <a href="/quiz/{{ playlist_id }}" class="btn">Neue Frage</a>
+
+  <script>
+    let isPlaying = true;
+    
+    function togglePlay() {
+      fetch('/toggle_playback', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          device_id: document.getElementById('device_id').value
+        })
+      });
+    }
+  </script>
 </body>
 </html>