This repository has been archived by the owner on Sep 21, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
music_visualizer.html
131 lines (122 loc) · 5.57 KB
/
music_visualizer.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
<html>
<head>
<title>Spotify API Call</title>
<link rel="stylesheet" href="https://minicss.org/flavorFiles/mini-default.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Type the name of a track you love and its artist!</h1>
<h3>For optimal results, please be case-sensitive with your searches.</h3>
<form onsubmit="runJavaScript()" id="myForm">
<label for="track">Track name:</label>
<input type="text" name="trackName" id="track">
<br>
<label for="artist">Artist name:</label>
<input type="text" name="artistName" id="artist">
<input type="submit">
</form>
<script src="spotify.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type='text/JavaScript'>
function runJavaScript() {
$.ajax(
{
method: "POST",
url: "https://accounts.spotify.com/api/token",
data: {
"grant_type":"client_credentials",
// "code": code,
// "redirect_uri": myurl,
"client_secret":"6902861723d7473eb55d9dd341c575da",
"client_id":"d30523ae4669444eb8812a8979bfb04c",
},
success: function(result) {
console.log(result.access_token);
var access_token = result.access_token;
// handle result...
var params = (new URL(document.location)).searchParams;
if (params.has('artistName') && params.has('trackName')) {
var artistName = params.get('artistName');
console.log(artistName);
var trackName = params.get('trackName');
console.log(trackName);
/////////////
var spotifyApi = new SpotifyWebApi();
spotifyApi.setAccessToken(access_token);
spotifyApi.searchTracks(trackName).then(
function(data) {
console.log(data);
for (var i = 0; i < 20; i++) {
var resultArtist = data.tracks.items[i].artists[0].name;
if (resultArtist == artistName) {
console.log(resultArtist);
var trackId = data.tracks.items[i].id;
console.log(trackId);
spotifyApi.getAudioAnalysisForTrack(trackId).then(
function(data) {
console.log(data);
},
function (err) {
console.error(err);
}
);
}
}
/*
let trackResult = data.tracks.items[0];
console.log(trackResult);
*/
},
function(err) {
console.log(err);
}
);
/////////////
}
}
});
}
/*
var authUrl = 'https://accounts.spotify.com/api/token';
//var grant_type = client_credentials;
var headerID = 'd30523ae4669444eb8812a8979bfb04c';
var headerSecret = '6902861723d7473eb55d9dd341c575da';
var encodedID = btoa(headerID);
var encodedSecret = btoa(headerSecret);
var encodedData = encodedID + ':' + encodedSecret;
var xyz = new XMLHttpRequest();
xyz.open("POST",authUrl,true);
xyz.setRequestHeader('Authorization','Basic' + encodedData);
xyz.onreadystatechange = function() {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
}
}
console.log(xyz);
xyz.send('grant_type=client_credentials');
function queryArtistAndTrack() {
let params = (new URL(document.location)).searchParams;
if (params.has('artistName') && params.has('trackName')) {
let artistName = params.get('artistName');
console.log(artistName);
let trackName = params.get('trackName');
console.log(trackName);
let queryURL = "https://api.spotify.com/v1/search" + "?q=track:" + trackName + "%20artist:" + artistName + "&type=track";
console.log(queryURL);
httpGet(queryURL);
}
}
function httpGet(theURL, cbFunction) {
let xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET', theURL);
xmlHttp.send();
xmlHttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cbFunction(this);
}
}
}
*/
runJavaScript();
</script>
</body>
</html>