Skip to content

Commit 5fdc80a

Browse files
TobiasMue91TobiasMue91
committed
- playing around with the spotify API
1 parent c9fcc4f commit 5fdc80a

File tree

1 file changed

+26
-155
lines changed

1 file changed

+26
-155
lines changed

‎tools/spotify_test.html‎

Lines changed: 26 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,15 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>Spotify Track Player</title>
4+
<title>Spotify Player</title>
55
<style>
6-
body {
7-
font-family: Arial, sans-serif;
8-
margin: 0;
9-
padding: 0;
10-
background-color: #121212;
11-
color: white;
12-
height: 100vh;
13-
display: flex;
14-
flex-direction: column;
15-
align-items: center;
16-
}
17-
18-
.credentials {
19-
width: 80%;
20-
max-width: 500px;
21-
margin: 2rem auto;
22-
display: flex;
23-
flex-direction: column;
24-
gap: 1rem;
25-
}
26-
27-
input {
28-
padding: 1rem;
29-
width: 100%;
30-
background: #282828;
31-
border: 1px solid #404040;
32-
color: white;
33-
border-radius: 8px;
34-
font-size: 16px;
35-
}
36-
37-
.setup-button {
38-
padding: 1rem;
39-
cursor: pointer;
40-
background: #1DB954;
41-
border: none;
42-
color: white;
43-
border-radius: 8px;
44-
font-size: 16px;
45-
font-weight: bold;
46-
}
47-
48-
.hidden {
49-
display: none;
50-
}
51-
52-
#player {
53-
display: flex;
54-
justify-content: center;
55-
align-items: center;
56-
flex-grow: 1;
57-
}
58-
59-
#pauseResumeButton {
60-
width: 200px;
61-
height: 200px;
62-
border-radius: 50%;
63-
border: none;
64-
background: #1DB954;
65-
color: white;
66-
font-size: 60px;
67-
cursor: pointer;
68-
transition: transform 0.2s;
69-
box-shadow: 0 8px 16px rgba(0,0,0,0.3);
70-
}
71-
72-
#pauseResumeButton:hover {
73-
transform: scale(1.05);
74-
}
75-
76-
#pauseResumeButton:active {
77-
transform: scale(0.95);
78-
}
6+
.hidden { display: none; }
797
</style>
808
</head>
819
<body>
82-
<div id="setup" class="credentials">
10+
<div id="setup">
8311
<input type="text" id="clientId" placeholder="Enter Spotify Client ID">
84-
<button class="setup-button" onclick="startAuth()">Initialize Player</button>
12+
<button onclick="startAuth()">Initialize</button>
8513
</div>
8614
<div id="player" class="hidden">
8715
<button id="pauseResumeButton">⏸️</button>
@@ -91,53 +19,36 @@
9119
let playerInstance = null;
9220
let isPlaying = false;
9321
const redirectUri = 'http://gptgames.dev/tools/spotify_test.html';
94-
const pauseResumeButton = document.getElementById('pauseResumeButton');
9522

9623
function togglePauseResume() {
9724
if (isPlaying) {
9825
playerInstance.pause();
9926
} else {
10027
playerInstance.resume();
10128
}
102-
}
103-
104-
function updatePauseResumeButton(playing) {
105-
isPlaying = playing;
29+
isPlaying = !isPlaying;
10630
pauseResumeButton.textContent = isPlaying ? '⏸️' : '▶️';
10731
}
10832

10933
function getUrlParameter(name) {
110-
const urlParams = new URLSearchParams(window.location.search);
111-
return urlParams.get(name);
34+
return new URLSearchParams(window.location.search).get(name);
11235
}
11336

11437
window.onSpotifyWebPlaybackSDKReady = () => {
115-
const params = getHashParams();
116-
if (params.access_token) {
117-
localStorage.setItem('spotify_access_token', params.access_token);
118-
initializePlayer(params.access_token);
119-
} else {
120-
const storedToken = localStorage.getItem('spotify_access_token');
121-
if (storedToken) {
122-
initializePlayer(storedToken);
123-
}
124-
}
38+
const token = localStorage.getItem('spotify_access_token') || getHashParams().access_token;
39+
if (token) initializePlayer(token);
12540
};
12641

127-
async function startAuth() {
42+
function startAuth() {
12843
const clientId = document.getElementById('clientId').value;
12944
localStorage.setItem('spotify_client_id', clientId);
130-
const state = Math.random().toString(36).substring(7);
13145
const scope = 'streaming user-read-email user-read-private user-modify-playback-state';
132-
const authUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${encodeURIComponent(scope)}&state=${state}`;
133-
window.location.href = authUrl;
46+
window.location.href = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${encodeURIComponent(scope)}`;
13447
}
13548

13649
function getHashParams() {
13750
const hashParams = {};
138-
const hash = window.location.hash.substring(1);
139-
const params = hash.split('&');
140-
params.forEach(param => {
51+
window.location.hash.substring(1).split('&').forEach(param => {
14152
const [key, value] = param.split('=');
14253
hashParams[key] = decodeURIComponent(value);
14354
});
@@ -150,75 +61,35 @@
15061

15162
playerInstance = new Spotify.Player({
15263
name: 'Development Player',
153-
getOAuthToken: cb => { cb(token); },
154-
volume: 1.0
155-
});
156-
157-
playerInstance.addListener('initialization_error', () => {
158-
localStorage.removeItem('spotify_access_token');
159-
});
160-
161-
playerInstance.addListener('authentication_error', () => {
162-
localStorage.removeItem('spotify_access_token');
163-
document.getElementById('setup').classList.remove('hidden');
164-
document.getElementById('player').classList.add('hidden');
165-
});
166-
167-
playerInstance.addListener('player_state_changed', state => {
168-
if (state) {
169-
updatePauseResumeButton(!state.paused);
170-
}
64+
getOAuthToken: cb => { cb(token); }
17165
});
17266

17367
playerInstance.addListener('ready', async ({ device_id }) => {
174-
try {
175-
// First, become active device
176-
await fetch('https://api.spotify.com/v1/me/player', {
68+
await fetch('https://api.spotify.com/v1/me/player', {
69+
method: 'PUT',
70+
headers: {
71+
'Authorization': `Bearer ${token}`,
72+
'Content-Type': 'application/json'
73+
},
74+
body: JSON.stringify({ device_ids: [device_id], play: true })
75+
});
76+
77+
const trackId = getUrlParameter('track');
78+
if (trackId) {
79+
await fetch(`https://api.spotify.com/v1/me/player/play?device_id=${device_id}`, {
17780
method: 'PUT',
17881
headers: {
17982
'Authorization': `Bearer ${token}`,
18083
'Content-Type': 'application/json'
18184
},
182-
body: JSON.stringify({
183-
device_ids: [device_id],
184-
play: true // Changed to true to ensure playback starts
185-
})
85+
body: JSON.stringify({ uris: [`spotify:track:${trackId}`] })
18686
});
187-
188-
// Then, after a short delay, play the track if specified
189-
const trackId = getUrlParameter('track');
190-
if (trackId) {
191-
// Add a small delay to ensure device is ready
192-
setTimeout(async () => {
193-
try {
194-
await fetch(`https://api.spotify.com/v1/me/player/play?device_id=${device_id}`, {
195-
method: 'PUT',
196-
headers: {
197-
'Authorization': `Bearer ${token}`,
198-
'Content-Type': 'application/json'
199-
},
200-
body: JSON.stringify({
201-
uris: [`spotify:track:${trackId}`]
202-
})
203-
});
204-
} catch (error) {
205-
console.error('Error playing track:', error);
206-
}
207-
}, 1000);
208-
}
209-
} catch (error) {
210-
console.error('Error during player initialization:', error);
21187
}
21288
});
21389

214-
pauseResumeButton.onclick = togglePauseResume;
90+
document.getElementById('pauseResumeButton').onclick = togglePauseResume;
21591
playerInstance.connect();
21692
}
217-
218-
const storedClientId = localStorage.getItem('spotify_client_id');
219-
if (storedClientId) {
220-
document.getElementById('clientId').value = storedClientId;
221-
}
22293
</script>
22394
<script src="https://sdk.scdn.co/spotify-player.js"></script>
22495
</body>

0 commit comments

Comments
 (0)