Skip to content

Commit c0b5988

Browse files
TobiasMue91TobiasMue91
committed
- playing around with the spotify API
1 parent 9eab18f commit c0b5988

File tree

1 file changed

+17
-102
lines changed

1 file changed

+17
-102
lines changed

‎tools/spotify_test.html‎

Lines changed: 17 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>Spotify Dev Player</title>
4+
<title>Spotify Track Player</title>
55
<style>
66
body { font-family: Arial, sans-serif; max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
77
.credentials { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
88
input { padding: 0.5rem; width: 100%; }
9-
button { padding: 0.5rem 1rem; cursor: pointer; margin: 0.5rem; }
9+
button { padding: 0.5rem 1rem; cursor: pointer; }
1010
.hidden { display: none; }
1111
#status { margin: 1rem 0; padding: 1rem; background: #f0f0f0; }
1212
</style>
@@ -18,20 +18,6 @@
1818
</div>
1919
<div id="player" class="hidden">
2020
<div id="status">Status: Initializing...</div>
21-
<div>
22-
<button onclick="handlePlay()">Play</button>
23-
<button onclick="handlePause()">Pause</button>
24-
<button onclick="handlePrevious()">Previous</button>
25-
<button onclick="handleNext()">Next</button>
26-
<button onclick="handleSeek()">Seek to 0</button>
27-
<button onclick="getCurrentState()">Get Current State</button>
28-
<button onclick="getVolume()">Get Volume</button>
29-
<button onclick="setVolume(0.5)">Set Volume 50%</button>
30-
</div>
31-
<div>
32-
<input type="text" id="trackUri" placeholder="Spotify URI (e.g., spotify:track:xxx)">
33-
<button onclick="playTrack()">Play This Track</button>
34-
</div>
3521
</div>
3622

3723
<script>
@@ -45,20 +31,26 @@
4531
}
4632

4733
function getUrlParameter(name) {
48-
console.log('getUrlParameter', name)
4934
const urlParams = new URLSearchParams(window.location.search);
5035
return urlParams.get(name);
5136
}
5237

5338
window.onSpotifyWebPlaybackSDKReady = () => {
5439
const params = getHashParams();
5540
if (params.access_token) {
41+
localStorage.setItem('spotify_access_token', params.access_token);
5642
initializePlayer(params.access_token);
43+
} else {
44+
const storedToken = localStorage.getItem('spotify_access_token');
45+
if (storedToken) {
46+
initializePlayer(storedToken);
47+
}
5748
}
5849
};
5950

6051
async function startAuth() {
6152
const clientId = document.getElementById('clientId').value;
53+
localStorage.setItem('spotify_client_id', clientId);
6254
const state = Math.random().toString(36).substring(7);
6355
const scope = 'streaming user-read-email user-read-private user-modify-playback-state';
6456
const authUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${encodeURIComponent(scope)}&state=${state}`;
@@ -89,30 +81,24 @@
8981

9082
playerInstance.addListener('initialization_error', ({ message }) => {
9183
updateStatus(`Initialization Error: ${message}`);
84+
localStorage.removeItem('spotify_access_token');
9285
});
9386

9487
playerInstance.addListener('authentication_error', ({ message }) => {
9588
updateStatus(`Authentication Error: ${message}`);
89+
localStorage.removeItem('spotify_access_token');
9690
document.getElementById('setup').classList.remove('hidden');
9791
document.getElementById('player').classList.add('hidden');
9892
});
9993

100-
playerInstance.addListener('account_error', ({ message }) => {
101-
updateStatus(`Account Error: ${message}`);
102-
});
103-
104-
playerInstance.addListener('playback_error', ({ message }) => {
105-
updateStatus(`Playback Error: ${message}`);
106-
});
107-
10894
playerInstance.addListener('player_state_changed', state => {
10995
if (state) {
110-
updateStatus(`Track: ${state.track_window.current_track.name} | Artist: ${state.track_window.current_track.artists[0].name} | Playing: ${!state.paused}`);
96+
updateStatus(`Now Playing: ${state.track_window.current_track.name} by ${state.track_window.current_track.artists[0].name}`);
11197
}
11298
});
11399

114100
playerInstance.addListener('ready', ({ device_id }) => {
115-
updateStatus(`Ready with Device ID: ${device_id}`);
101+
updateStatus('Connecting to Spotify...');
116102
fetch('https://api.spotify.com/v1/me/player', {
117103
method: 'PUT',
118104
headers: {
@@ -125,7 +111,6 @@
125111
})
126112
}).then(response => {
127113
if (response.status === 204) {
128-
updateStatus('Successfully transferred playback');
129114
const trackId = getUrlParameter('track');
130115
if (trackId) {
131116
playTrackById(trackId, token);
@@ -134,10 +119,6 @@
134119
});
135120
});
136121

137-
playerInstance.addListener('not_ready', ({ device_id }) => {
138-
updateStatus(`Device ID has gone offline: ${device_id}`);
139-
});
140-
141122
playerInstance.connect();
142123
}
143124

@@ -154,82 +135,16 @@
154135
})
155136
});
156137
if (response.status === 204) {
157-
updateStatus('Started playing track');
158-
} else {
159-
updateStatus('Failed to play track: ' + response.status);
138+
updateStatus('Loading track...');
160139
}
161140
} catch (error) {
162141
updateStatus('Error playing track: ' + error);
163142
}
164143
}
165144

166-
async function handlePlay() {
167-
const result = await playerInstance.resume();
168-
updateStatus(`Play result: ${JSON.stringify(result)}`);
169-
}
170-
171-
async function handlePause() {
172-
const result = await playerInstance.pause();
173-
updateStatus(`Pause result: ${JSON.stringify(result)}`);
174-
}
175-
176-
async function handlePrevious() {
177-
const result = await playerInstance.previousTrack();
178-
updateStatus(`Previous track result: ${JSON.stringify(result)}`);
179-
}
180-
181-
async function handleNext() {
182-
const result = await playerInstance.nextTrack();
183-
updateStatus(`Next track result: ${JSON.stringify(result)}`);
184-
}
185-
186-
async function handleSeek() {
187-
const result = await playerInstance.seek(0);
188-
updateStatus(`Seek result: ${JSON.stringify(result)}`);
189-
}
190-
191-
async function getCurrentState() {
192-
const state = await playerInstance.getCurrentState();
193-
if (state) {
194-
updateStatus(`Current track: ${state.track_window.current_track.name} | Artist: ${state.track_window.current_track.artists[0].name} | Position: ${state.position} | Paused: ${state.paused}`);
195-
} else {
196-
updateStatus('No current state available');
197-
}
198-
}
199-
200-
async function getVolume() {
201-
const volume = await playerInstance.getVolume();
202-
updateStatus(`Current volume: ${volume * 100}%`);
203-
}
204-
205-
async function setVolume(value) {
206-
const result = await playerInstance.setVolume(value);
207-
updateStatus(`Set volume result: ${JSON.stringify(result)}`);
208-
}
209-
210-
async function playTrack() {
211-
const params = getHashParams();
212-
const token = params.access_token;
213-
const trackUri = document.getElementById('trackUri').value;
214-
try {
215-
const response = await fetch('https://api.spotify.com/v1/me/player/play', {
216-
method: 'PUT',
217-
headers: {
218-
'Authorization': `Bearer ${token}`,
219-
'Content-Type': 'application/json'
220-
},
221-
body: JSON.stringify({
222-
uris: [trackUri]
223-
})
224-
});
225-
if (response.status === 204) {
226-
updateStatus('Started playing track');
227-
} else {
228-
updateStatus('Failed to play track: ' + response.status);
229-
}
230-
} catch (error) {
231-
updateStatus('Error playing track: ' + error);
232-
}
145+
const storedClientId = localStorage.getItem('spotify_client_id');
146+
if (storedClientId) {
147+
document.getElementById('clientId').value = storedClientId;
233148
}
234149
</script>
235150
<script src="https://sdk.scdn.co/spotify-player.js"></script>

0 commit comments

Comments
 (0)