I successfully got the Spotify API to work with spotify-web-api-js, but I have no idea how to decode this. I want to be able display the title and artist of the song currently playing on a HTML page.
Right now to test, I'm trying to use <script>document.getElementById("song").innerHTML = data.timestamp</script> (data is the stuff from the Spotify api) to get the timestamp since I don't know what the format is to go deeper into the Spotify response. I get an Uncaught TypeError: Cannot read property 'timestamp' of undefined.
Note: I'm new to coding
Here's the javascript that gets the stuff from Spotify:
var SpotifyWebApi = require('spotify-web-api-js');
var spotifyApi = new SpotifyWebApi();
var data;
spotifyApi.setAccessToken('token')
spotifyApi.getMyCurrentPlayingTrack('title')
.then(function(data) {
console.log('Now playing', data);
}, function(err) {
console.error(err);
});
Here's the part of the html webpage that supposed to show the title of the song (in this case the timestamp, for testing purposes):
<body>
<div class=center>
<h1 id="song"></h1>
<h2>Luna Li</h2>
<script>document.getElementById("song").innerHTML = data.timestamp</script>
</div>
</body>
Response from spotify:
{
"timestamp" : 1592617721303,
"context" : {
"external_urls" : {
"spotify" : "https://open.spotify.com/album/3GU8BzFEAdFSRjc8jZkL3S"
},
"href" : "https://api.spotify.com/v1/albums/3GU8BzFEAdFSRjc8jZkL3S",
"type" : "album",
"uri" : "spotify:album:3GU8BzFEAdFSRjc8jZkL3S"
},
"progress_ms" : 27470,
"item" : {
"album" : {
"album_type" : "compilation",
"artists" : [ {
"external_urls" : {
"spotify" : "https://open.spotify.com/artist/0LyfQWJT6nXafLPZqxe9Of"
},
"href" : "https://api.spotify.com/v1/artists/0LyfQWJT6nXafLPZqxe9Of",
"id" : "0LyfQWJT6nXafLPZqxe9Of",
"name" : "Various Artists",
"type" : "artist",
"uri" : "spotify:artist:0LyfQWJT6nXafLPZqxe9Of"
} ],
"available_markets" : [ "AD", "AE", "AR", "AT", "AU", "BE", "BG", "BH", "BO", "BR", "CA", "CH", "CL", "CO", "CR", "CY", "CZ", "DE", "DK", "DO", "DZ", "EC", "EE", "EG", "ES", "FI", "FR", "GB", "GR", "GT", "HK", "HN", "HU", "ID", "IE", "IL", "IN", "IS", "IT", "JO", "KW", "LB", "LI", "LT", "LU", "LV", "MA", "MC", "MT", "MX", "MY", "NI", "NL", "NO", "NZ", "OM", "PA", "PE", "PH", "PL", "PS", "PT", "PY", "QA", "RO", "SA", "SE", "SG", "SK", "SV", "TH", "TN", "TR", "TW", "US", "UY", "VN", "ZA" ],
"external_urls" : {
"spotify" : "https://open.spotify.com/album/3GU8BzFEAdFSRjc8jZkL3S"
},
"href" : "https://api.spotify.com/v1/albums/3GU8BzFEAdFSRjc8jZkL3S",
"id" : "3GU8BzFEAdFSRjc8jZkL3S",
"images" : [ {
"height" : 640,
"url" : "https://i.scdn.co/image/ab67616d0000b2730bdf4dd39843ad48c5b66bc4",
"width" : 640
}, {
"height" : 300,
"url" : "https://i.scdn.co/image/ab67616d00001e020bdf4dd39843ad48c5b66bc4",
"width" : 300
}, {
"height" : 64,
"url" : "https://i.scdn.co/image/ab67616d000048510bdf4dd39843ad48c5b66bc4",
"width" : 64
} ],
"name" : "La La Land (Original Motion Picture Soundtrack)",
"release_date" : "2016-12-09",
"release_date_precision" : "day",
"total_tracks" : 15,
"type" : "album",
"uri" : "spotify:album:3GU8BzFEAdFSRjc8jZkL3S"
},
"artists" : [ {
"external_urls" : {
"spotify" : "https://open.spotify.com/artist/6kXm2YCtdUOpRYNKeKhfue"
},
"href" : "https://api.spotify.com/v1/artists/6kXm2YCtdUOpRYNKeKhfue",
"id" : "6kXm2YCtdUOpRYNKeKhfue",
"name" : "Ryan Gosling",
"type" : "artist",
"uri" : "spotify:artist:6kXm2YCtdUOpRYNKeKhfue"
}, {
"external_urls" : {
"spotify" : "https://open.spotify.com/artist/68Uwx1d3EbjDJhYsLjqvIq"
},
"href" : "https://api.spotify.com/v1/artists/68Uwx1d3EbjDJhYsLjqvIq",
"id" : "68Uwx1d3EbjDJhYsLjqvIq",
"name" : "Emma Stone",
"type" : "artist",
"uri" : "spotify:artist:68Uwx1d3EbjDJhYsLjqvIq"
} ],
"available_markets" : [ "AD", "AE", "AR", "AT", "AU", "BE", "BG", "BH", "BO", "BR", "CA", "CH", "CL", "CO", "CR", "CY", "CZ", "DE", "DK", "DO", "DZ", "EC", "EE", "EG", "ES", "FI", "FR", "GB", "GR", "GT", "HK", "HN", "HU", "ID", "IE", "IL", "IN", "IS", "IT", "JO", "KW", "LB", "LI", "LT", "LU", "LV", "MA", "MC", "MT", "MX", "MY", "NI", "NL", "NO", "NZ", "OM", "PA", "PE", "PH", "PL", "PS", "PT", "PY", "QA", "RO", "SA", "SE", "SG", "SK", "SV", "TH", "TN", "TR", "TW", "US", "UY", "VN", "ZA" ],
"disc_number" : 1,
"duration_ms" : 236506,
"explicit" : false,
"external_ids" : {
"isrc" : "USUG11600652"
},
"external_urls" : {
"spotify" : "https://open.spotify.com/track/4r9hiElqKWMPT4Z3vN2exq"
},
"href" : "https://api.spotify.com/v1/tracks/4r9hiElqKWMPT4Z3vN2exq",
"id" : "4r9hiElqKWMPT4Z3vN2exq",
"is_local" : false,
"name" : "A Lovely Night",
"popularity" : 62,
"preview_url" : "https://p.scdn.co/mp3-preview/b315c0bd334edba2f571a4d5e1986ae544d8cf1b?cid=1f307ec00d7b4f3186cb56d56162cab6",
"track_number" : 4,
"type" : "track",
"uri" : "spotify:track:4r9hiElqKWMPT4Z3vN2exq"
},
"currently_playing_type" : "track",
"actions" : {
"disallows" : {
"resuming" : true
}
},
"is_playing" : true
}
Is there an easy way to get the title of the song and artist from this? I feel like you could do it with <script>document.getElementById("song").innerHTML = data.timestamp</script> but I'm not sure how to navigate through the Spotify response.
I got it! I was messing around and put console.log(data.item.name) and it successfully got the title of the song! For the HTML part, I had trouble getting the variables from the HTML, so I just moved the document.getElementId("song")... to the javascript!
Here's what the final script looks like:
var SpotifyWebApi = require('spotify-web-api-js');
var spotifyApi = new SpotifyWebApi();
var data;
spotifyApi.setAccessToken('token');
spotifyApi.getMyCurrentPlayingTrack('title')
.then(function(data) {
console.log('Now playing', data);
console.log(data.item.name)
document.getElementById("song").innerHTML = data.item.name
}, function(err) {
console.error(err);
});
and the part of the HTML:
<body>
<div class=center>
<h1 id="song"></h1>
<h2>Luna Li</h2>
</div>
</body>
I'm not sure if I'm correct, but since I used spotify-web-api-js, it looks like it gave out the response as an object instead of a JSON.