-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathptp.html
188 lines (163 loc) · 6.26 KB
/
ptp.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pass the Parcel - Apple Music Playlist</title>
<!-- Include MusicKit JS from Apple CDN -->
<script src="https://js-cdn.music.apple.com/musickit/v3/musickit.js" data-web-components async></script>
<style>
body {
font-family: sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background: #f8f8f8;
}
h1 {
margin-top: 0;
}
.controls {
margin-top: 1em;
}
button {
padding: 0.8em 1.2em;
font-size: 1rem;
margin: 0.5em;
cursor: pointer;
background: #c33;
color: #fff;
border: none;
border-radius: 0.3em;
}
button:disabled {
background: #aaa;
cursor: not-allowed;
}
.song-info {
margin: 0.5em 0;
font-size: 1.1rem;
}
</style>
</head>
<body>
<h1>Pass the Parcel - Apple Music Christmas Essentials</h1>
<div class="song-info" id="songInfo"></div>
<!-- Buttons for sign-in and snippet playback -->
<div class="controls">
<button id="appleSignInBtn">Sign in to Apple Music</button>
<button id="playSnippetBtn" disabled>Pass The Parcel!</button>
<button id="skipBtn" disabled>Next Track</button>
</div>
<script>
/***********************************************
* 1) Configure MusicKit with your credentials
***********************************************/
const developerToken = 'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkFRTDQ4TUFTMkIifQ.eyJvcmlnaW4iOlsiaHR0cHM6Ly90dGVnZ2VsLm9yZyIsImh0dHBzOi8vb21pbm91cy1sYW1wLTc3NTc3d3h4eGZnOWctODA4MC5hcHAuZ2l0aHViLmRldiJdLCJpYXQiOjE3MzUyMjYyMDMsImV4cCI6MTc1MDc3ODIwMywiaXNzIjoiSjZES1MzOTU4RyJ9.9CvW1f0qF0pD9qvRrc731GJlrxmeC2uV-nIiOJF5ycRJ0ChK-DCyyUwHyJbrvrzH4SycW9rmpFW8XwKoyc2GJA';
const playlistId = 'pl.b0e04e25887741ea845e1d5c88397fd4';
// Replace with your Apple Music playlist ID, e.g. 'pl.u-ALabc123...'
// We'll store the MusicKit instance globally.
let music;
// DOM elements
const appleSignInBtn = document.getElementById('appleSignInBtn');
const playSnippetBtn = document.getElementById('playSnippetBtn');
const skipBtn = document.getElementById('skipBtn');
const songInfo = document.getElementById('songInfo');
// This will hold our setTimeout handle for snippet length
let snippetTimeout = null;
/***********************************************
* 2) Initialize MusicKit
***********************************************/
document.addEventListener('musickitloaded', async () => {
await MusicKit.configure({
developerToken: developerToken,
app: {
name: 'Pass The Parcel',
build: '1.0'
}
});
// Grab the MusicKit instance
music = MusicKit.getInstance();
// We want to loop the entire playlist when it ends
music.shuffleMode = MusicKit.PlayerShuffleMode.songs;
music.repeatMode = MusicKit.PlayerRepeatMode.all;
// Let the user sign in to Apple Music
appleSignInBtn.disabled = false;
// Update track info when player changes tracks
music.addEventListener('nowPlayingItemDidChange', () => {updateSongInfo();});
//Also handle playback ended (just in case user’s snippet ends exactly at track end)
music.addEventListener('playbackStateDidChange', () => {
if (music.playbackState === MusicKit.PlaybackStates.ENDED) {
// If a track ended, Apple MusicKit auto-advances to next track in the queue,
// so we just update our displayed info.
updateSongInfo();
}
});
});
/***********************************************
* 3) Sign In / Set Playlist / Start
***********************************************/
appleSignInBtn.addEventListener('click', async () => {
try {
// Request user authorization to Apple Music
await music.authorize();
// If successful, set the queue to our desired playlist
await music.setQueue({ playlist: playlistId });
// Now that we have a queue, enable snippet button
playSnippetBtn.disabled = false;
appleSignInBtn.disabled = true;
skipBtn.disabled = false;
// Display the first track info
updateSongInfo();
} catch (err) {
console.error('Apple Music authorization failed:', err);
alert('Failed to sign in to Apple Music. Please try again.');
}
});
/***********************************************
* 4) "Play Snippet" button logic
***********************************************/
playSnippetBtn.addEventListener('click', async () => {
// Disable snippet button while snippet is playing
playSnippetBtn.disabled = true;
// Pick a random snippet length (5–30 seconds)
const snippetLength = Math.floor(Math.random() * 26) + 5;
// Start or resume playback
await music.play();
updateSongInfo();
// Clear any previous snippet timeout
if (snippetTimeout) {
clearTimeout(snippetTimeout);
}
// After snippetLength seconds, pause playback
snippetTimeout = setTimeout(() => {
// If we’re at or beyond the track’s duration, Apple MusicKit will auto-advance.
// We just pause, letting Apple’s logic handle the next track if the song ended exactly.
music.pause();
// Re-enable button
playSnippetBtn.disabled = false;
}, snippetLength * 1000);
});
/***********************************************
* 5) Update Song Info Display
***********************************************/
function updateSongInfo() {
const currentItem = music.nowPlayingItem;
if (currentItem) {
// Construct a user-friendly label
const artist = currentItem.artistName || 'Unknown Artist';
const album = currentItem.albumName || 'Unknown Album';
const track = currentItem.title || 'Unknown Title';
songInfo.textContent = `Now playing: ${track} — ${artist} (${album})`;
} else {
songInfo.textContent = 'No track loaded.';
}
skipBtn.addEventListener('click', async () => {
await music.skipToNextItem();
})
}
</script>
</body>
</html>