104 lines
2.9 KiB
HTML
104 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<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>
|
|
|
|
<!-- 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/{{ 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>
|