Skip to content

Commit edc0f5a

Browse files
TobiasMue91TobiasMue91
committed
- playing around with the spotify API
1 parent 233c89e commit edc0f5a

File tree

1 file changed

+106
-11
lines changed

1 file changed

+106
-11
lines changed

‎tools/spotify_test.html‎

Lines changed: 106 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,16 @@
2222
button {
2323
padding: 0.5rem 1rem;
2424
cursor: pointer;
25+
margin: 0.5rem;
2526
}
2627
.hidden {
2728
display: none;
2829
}
30+
#status {
31+
margin: 1rem 0;
32+
padding: 1rem;
33+
background: #f0f0f0;
34+
}
2935
</style>
3036
</head>
3137
<body>
@@ -35,12 +41,28 @@
3541
</div>
3642

3743
<div id="player" class="hidden">
38-
<button onclick="togglePlay()">Play/Pause</button>
44+
<div id="status">Status: Initializing...</div>
45+
<div>
46+
<button onclick="handlePlay()">Play</button>
47+
<button onclick="handlePause()">Pause</button>
48+
<button onclick="handlePrevious()">Previous</button>
49+
<button onclick="handleNext()">Next</button>
50+
<button onclick="handleSeek()">Seek to 0</button>
51+
<button onclick="getCurrentState()">Get Current State</button>
52+
<button onclick="getVolume()">Get Volume</button>
53+
<button onclick="setVolume(0.5)">Set Volume 50%</button>
54+
</div>
3955
</div>
4056

4157
<script>
4258
let playerInstance = null;
4359
const redirectUri = 'http://gptgames.dev/tools/spotify_test.html';
60+
const statusDiv = document.getElementById('status');
61+
62+
function updateStatus(message) {
63+
console.log(message);
64+
statusDiv.textContent = `Status: ${message}`;
65+
}
4466

4567
window.onSpotifyWebPlaybackSDKReady = () => {
4668
const params = getHashParams();
@@ -52,7 +74,7 @@
5274
async function startAuth() {
5375
const clientId = document.getElementById('clientId').value;
5476
const state = Math.random().toString(36).substring(7);
55-
const scope = 'streaming user-read-email user-read-private';
77+
const scope = 'streaming user-read-email user-read-private user-modify-playback-state';
5678

5779
const authUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}` +
5880
`&response_type=token` +
@@ -80,34 +102,107 @@
80102
document.getElementById('setup').classList.add('hidden');
81103
document.getElementById('player').classList.remove('hidden');
82104

105+
updateStatus('Initializing player...');
106+
83107
playerInstance = new Spotify.Player({
84108
name: 'Development Player',
85109
getOAuthToken: cb => { cb(token); },
86110
volume: 0.5
87111
});
88112

89-
playerInstance.addListener('ready', ({ device_id }) => {
90-
console.log('Ready with Device ID', device_id);
91-
});
92-
113+
// Error handling
93114
playerInstance.addListener('initialization_error', ({ message }) => {
94-
console.error('Failed to initialize', message);
115+
updateStatus(`Initialization Error: ${message}`);
95116
});
96117

97118
playerInstance.addListener('authentication_error', ({ message }) => {
98-
console.error('Failed to authenticate', message);
119+
updateStatus(`Authentication Error: ${message}`);
99120
document.getElementById('setup').classList.remove('hidden');
100121
document.getElementById('player').classList.add('hidden');
101122
});
102123

124+
playerInstance.addListener('account_error', ({ message }) => {
125+
updateStatus(`Account Error: ${message}`);
126+
});
127+
128+
playerInstance.addListener('playback_error', ({ message }) => {
129+
updateStatus(`Playback Error: ${message}`);
130+
});
131+
132+
// Playback status updates
133+
playerInstance.addListener('player_state_changed', state => {
134+
if (state) {
135+
updateStatus(`
136+
Track: ${state.track_window.current_track.name}
137+
Artist: ${state.track_window.current_track.artists[0].name}
138+
Playing: ${!state.paused}
139+
`);
140+
}
141+
});
142+
143+
// Ready
144+
playerInstance.addListener('ready', ({ device_id }) => {
145+
updateStatus(`Ready with Device ID: ${device_id}`);
146+
});
147+
148+
// Not Ready
149+
playerInstance.addListener('not_ready', ({ device_id }) => {
150+
updateStatus(`Device ID has gone offline: ${device_id}`);
151+
});
152+
153+
// Connect to the player
103154
playerInstance.connect();
104155
}
105156

106-
function togglePlay() {
107-
if (playerInstance) {
108-
playerInstance.togglePlay();
157+
// Player Controls
158+
async function handlePlay() {
159+
const result = await playerInstance.resume();
160+
updateStatus(`Play result: ${JSON.stringify(result)}`);
161+
}
162+
163+
async function handlePause() {
164+
const result = await playerInstance.pause();
165+
updateStatus(`Pause result: ${JSON.stringify(result)}`);
166+
}
167+
168+
async function handlePrevious() {
169+
const result = await playerInstance.previousTrack();
170+
updateStatus(`Previous track result: ${JSON.stringify(result)}`);
171+
}
172+
173+
async function handleNext() {
174+
const result = await playerInstance.nextTrack();
175+
updateStatus(`Next track result: ${JSON.stringify(result)}`);
176+
}
177+
178+
async function handleSeek() {
179+
const result = await playerInstance.seek(0);
180+
updateStatus(`Seek result: ${JSON.stringify(result)}`);
181+
}
182+
183+
async function getCurrentState() {
184+
const state = await playerInstance.getCurrentState();
185+
if (state) {
186+
updateStatus(`
187+
Current track: ${state.track_window.current_track.name}
188+
Artist: ${state.track_window.current_track.artists[0].name}
189+
Position: ${state.position}
190+
Paused: ${state.paused}
191+
`);
192+
} else {
193+
updateStatus('No current state available');
109194
}
110195
}
196+
197+
async function getVolume() {
198+
const volume = await playerInstance.getVolume();
199+
updateStatus(`Current volume: ${volume * 100}%`);
200+
}
201+
202+
async function setVolume(value) {
203+
const result = await playerInstance.setVolume(value);
204+
updateStatus(`Set volume result: ${JSON.stringify(result)}`);
205+
}
111206
</script>
112207
<script src="https://sdk.scdn.co/spotify-player.js"></script>
113208
</body>

0 commit comments

Comments
 (0)