To retrieve the album covers for each track, Spotify.search() needs to be updated with a new property called “cover” that is set to retrieve that information from the Spotify API, which can be found using track.album.images[2].url. This retrieves the image that is a 64px square.
Audio Element
An element will need to be added to Track.render() inside of the
with a className of “Track-cover-preview.” There will be no controls attribute since play and pause are triggered by click on the icons in togglePlayPreview().
The element must have a refs attribute with the way this is set up, and the attribute can be set to the value of “audio”. It will also include an onEnded attribute which will be a function that sets the state of currently playing back to false when the track has finished playing.
Spotify.search() will also need to be updated to grab the url of the track preview, which is located in the Spotify API at track.preview_url. This value can be set to a property called “preview.” In Track.js, the audio element will need to have an src attribute that is set to this.props.track.preview, which will set each element to play the correct track preview retrieved from the Spotify API for each Track component.
You've done a very diligent job studying the data provided by the Spotify API, recognizing how you can incorporate it from the module you already wrote, and researching less common HTML5 tags to implement your feature 👍
You've done a very diligent job studying the data provided by the Spotify API, recognizing how you can incorporate it from the module you already wrote, and researching less common HTML5 tags to implement your feature 👍