forked from makeratplay/SpotifyWebAPI
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (111 loc) · 6.51 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spotify Web API Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link href="style.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body onload="onPageLoad()">
<div class="container">
<div id="tokenSection" class="row">
<div class="col">
<p class="welcomeText">This is a javascript app that shows how to use the Spotify API to control the playback
of music (playlist or albums) on any of your devices connected to your spotify account.</p>
<p class="welcomeText">To use this app you need a Spotify client ID and client secret. You get these by
creating an app in the Spotify developers dashboard here
<a href="https://developer.spotify.com/dashboard/applications" target="_blank">https://developer.spotify.com/dashboard/applications</a>
and add https://makeratplay.github.io/SpotifyWebAPI/ in the "Redirect URIs" settings field.
</p>
<p class="welcomeText">
This app demostrates how the use the following APIs:
<ul>
<li>https://accounts.spotify.com/authorize </li>
<li>https://accounts.spotify.com/api/token </li>
<li>https://api.spotify.com/v1/me/playlists </li>
<li>https://api.spotify.com/v1/me/player/devices </li>
<li>https://api.spotify.com/v1/me/player/play </li>
<li>https://api.spotify.com/v1/me/player/pause </li>
<li>https://api.spotify.com/v1/me/player/next </li>
<li>https://api.spotify.com/v1/me/player/previous </li>
<li>https://api.spotify.com/v1/me/player </li>
<li>https://api.spotify.com/v1/playlists/{{PlaylistId}}/tracks </li>
<li>https://api.spotify.com/v1/me/player/currently-playing </li>
<li>https://api.spotify.com/v1/me/player/shuffle </li>
</ul>
</p>
</div>
<div class="col">
<div class="mb-3">
<label for="clientId" class="form-label">Client ID</label>
<input type="text" class="form-control" id="clientId" placeholder="">
</div>
<div class="mb-3">
<label for="clientSecret" class="form-label">Client Secret</label>
<input type="text" class="form-control" id="clientSecret" placeholder="">
</div>
<input class="btn btn-primary btn-lg" type="button" onclick="requestAuthorization()" value="Request Authorization"><br/>
</div>
<div class="col">
<p class="welcomeText" style="margin-top: 40px;"> I used this project to learn the Spotify API in order to create this project:</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/H2HJ-LY7-lQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div id="deviceSection" class="row">
<div class="col">
<div class="mb-3">
<label for="devices" class="form-label">Devices</label>
<select id="devices" class="form-control">
</select>
<input class="btn btn-primary btn-sm mt-3" type="button" onclick="refreshDevices()" value="Refresh Devices">
<input type="button" class="btn btn-dark btn-sm mt-3" onclick="transfer()" value="Transfer">
</div>
<div class="mb-3">
<label for="playlists" class="form-label">Playlists</label>
<select id="playlists" class="form-control">
</select>
<input class="btn btn-primary btn-sm mt-3" type="button" onclick="refreshPlaylists()" value="Refresh Playlists">
</div>
<div class="mb-3">
<label for="tracks" class="form-label">Tracks</label>
<select id="tracks" class="form-control">
</select>
<input class="btn btn-primary btn-sm mt-3" type="button" onclick="fetchTracks()" value="Fetch Tracks">
</div>
<div class="mb-3">
<label for="tracks" class="form-label">Album</label>
<input id="album" class="form-control">
</div>
<div class="row">
<div class="col">
<input type="button" class="btn btn-dark" onclick="previous()" value="Prev">
<input type="button" class="btn btn-dark" onclick="play()" value="Play">
<input type="button" class="btn btn-dark" onclick="shuffle()" value="Shuffle">
<input type="button" class="btn btn-dark" onclick="pause()" value="Pause">
<input type="button" class="btn btn-dark" onclick="next()" value="Next">
</div>
</div>
<div class="row mt-3">
<div class="col">
<h1> Currently Playing</h1>
<input type="button" class="btn btn-primary btn-sm mt-3" onclick="currentlyPlaying()" value="Refresh Currently Playing">
<div>
<img id="albumImage" src="">
<div id="trackTitle"></div>
<div id="trackArtist"></div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col">
<div id="radioButtons"></div>
<input type="button" class="btn btn-dark" onclick="saveNewRadioButton()" value="Add">
</div>
</div>
</div>
</div>
</div>
</body>
</html>