Published on <a href="https://blog.prototypr.io/have-you-heard-about-the-spotify-web-api-8e8d1dac9eaf?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Tom Fejér 
🔊 Using Spotify Web API in Framer
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*xPGPdDXukdWJA_2-uwQ54g.png">
<blockquote>tl;dr 👉 <a href="https://youtu.be/shnsVDyV_gc">Final Result</a></blockquote>
<h4>Prototyping with code</h4>
Prototyping using APIs, Application Programming Interfaces can enable all kinds of awesomeness, like <a href="https://blog.framer.com/building-voice-enabled-prototypes-in-framer-3c1c3e14938f">Building Voice-Enabled Prototypes</a> or integrate with services like <a href="https://blog.framer.com/queryinterface-a-query-based-api-for-framer-prototypes-cb99f595d984">Google Sheets, Twitter, MailChimp</a>. I decided to explore this realm myself by building a fun, little game prototype using Spotify’s Web API.
<h4>Preparation</h4>
For prototyping, my weapon of choice is <a href="https://framer.com/">Framer</a>. As a designer without proper coding background, I find Framer the most ‘designer-friendly’, it enables me to work both ‘quick and dirty’ and craft relatively complex and detailed interaction flows too.
In order to work with data, JSON basics becomes handy cause this is the most common format you will receive the data you requested. I warmly recommend you to play with <a href="https://firebase.google.com/">Firebase</a> a bit (here is a great beginners guide: <a href="https://blog.framer.com/prototype-with-real-data-in-framer-from-json-to-multi-device-and-internet-of-things-6eb1ae8b8325">Prototype with real data in Framer, from JSON to multi-device and internet of things</a>)
The <a href="https://developer.spotify.com/web-api/">Spotify’s Web API</a> lets your applications fetch data from the Spotify music catalog and manage user’s playlists and saved music.
<blockquote>“Based on simple REST principles, our Web API endpoints return metadata in JSON format about artists, albums, and tracks directly from the Spotify catalogue. The API also provides access to user-related data such as playlists and music saved in a “Your Music” library, subject to user’s authorization.”</blockquote>
When you start using the API, one of the first thing to consider is determining the scopes you needed. <a href="https://developer.spotify.com/web-api/using-scopes/">Scopes</a> let you specify exactly what types of data your application wants to access, and the set of scopes you pass in your call determines what access permissions the user is asked to grant.
<h4>The idea to prototype</h4>
After I understood all of these above, the only thing I needed is an idea.
I had an idea💡!
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*sAtsHj_8b8xXuc6SEixA-A.png">👆This was the idea.
What you can not see in the picture is the sound. My idea is a memory game with identical black cards (on both sides) and the goal is to match the identically sounding cards.
note: later on I decided to fill the downward facing sides with album arts and artist names for demonstration purposes
Great! With my brilliant idea, I could start creating and setting up ‘My Application’:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ZOTcDcTO_G3gKI6Au6gLJA.png">
👉 a detailed setup guide can be found here: <a href="https://medium.com/@samthorne/using-the-spotify-web-api-in-framer-dc6a48bf0494">Using the Spotify Web API in Framer</a>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*0jZv5hHkRdql_PQLC972HQ.png">
<h4>Make it your own 👨‍🎤</h4>
Different Web API <a href="https://developer.spotify.com/web-api/endpoint-reference/">endpoints</a> give external applications access to different user data sets like user’s top artists and tracks or any artist’s album or song titles.
First I wanted to make the game my own, so I get my “profileImage.image” and “profileName.text” to the top of the App. For this I used the <a href="https://developer.spotify.com/web-api/get-current-users-profile/">‘Get Current User’s Profile’</a> endpoint:
<pre>GET <a href="https://api.spotify.com/v1/me">https://api.spotify.com/v1/me</a></pre>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*orLF8wECuAV8vNq7McoHQg.png">
<h4>Make some noise 🔊</h4>
So this is where the fun begins. Spotify’s Web API lets you access to your playlist and gives you all kinds of data, including a <a href="https://p.scdn.co/mp3-preview/23117930968656f8bf23a484efe8e9bc364f9505?cid=15e12f1bcc9a4e8e9350cf75bb99b26c">30 seconds preview</a> [<a href="https://p.scdn.co/mp3-preview/23117930968656f8bf23a484efe8e9bc364f9505?cid=15e12f1bcc9a4e8e9350cf75bb99b26c">track.preview_url</a>] which can be easily played back with Framer or any browser.
To access my ‘saved tracks’ playlist and artists names, album arts, track samples I used the <a href="https://developer.spotify.com/web-api/get-users-saved-tracks/">‘Get a User’s Saved Tracks’</a> endpoint.
<pre>https://api.spotify.com/v1/me/tracks?offset=0&amp;limit=2</pre>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FZzRerb0fBjk%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DZzRerb0fBjk&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FZzRerb0fBjk%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="640" height="480" frameborder="0"><a href="https://medium.com/media/3fc396ac94eaa19dfcde0e91e9dec954/href">https://medium.com/media/3fc396ac94eaa19dfcde0e91e9dec954/href</a></iframe><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*56IIDA6FA34Puap_ZNYRgw.png">
<h4>Final touches 🎵</h4>
After adding some randomisation, and logic to flip back the cards which are not pairs and remove those which were already paired, I added a rewarding success screen with a satisfying <a href="https://en.wikipedia.org/wiki/Earcon">earcon</a>.
I used <a href="https://blog.framer.com/facebook-sound-kit-now-in-framer-eb8a22f88bfd">Facebook’s Sound kit in Framer</a>, this lets you add high quality auditory feedback to your prototypes.
You can hear more about Sound Design at Facebook 🎧👇
<a href="https://medium.com/facebook-design/how-to-enhance-mobile-interactions-with-sound-design-3c3b30e98177">How to enhance mobile interactions with sound design</a>
<h4>The Thing</h4>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FshnsVDyV_gc%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DshnsVDyV_gc&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FshnsVDyV_gc%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="640" height="480" frameborder="0"><a href="https://medium.com/media/85fd18bfc2fa8d979cdb5b0a5f2b9e50/href">https://medium.com/media/85fd18bfc2fa8d979cdb5b0a5f2b9e50/href</a></iframe>
So here is the thing. It works as intended. In case you would like to get your hands on the code drop me a line on twitter <a href="https://twitter.com/grotandthemob">@grotandthemob</a>
<h4>Learnings and thoughts 🤔</h4>
Prototyping with data provides an extra ‘reality-layer’ for your prototype with actual avatar images, names or email addresses. What is more exciting to me in experimenting with code and real data sets is the potential to unlock new ways to manipulate and display digital content — making Things that would not have been possible by sketching on paper or pushing pixels from left to right.
Recently I became fascinated by the field of sound design. I started writing a separate piece on PSD (product sound design) to share how much I lack of the vocabulary to express characteristics of sound, what are the differences between earcons and auditory icons, what sonification means.
If you wanna set up the Spotify Web API for your Framer project, I recommend you to start with <a href="https://medium.com/u/46a1ebc6357b">Sam Thorne</a>’s article 👇
<blockquote>
Ever wanted to use your favourite music in Framer? <a href="http://twitter.com/HackneyedSam" title="Twitter profile for @HackneyedSam">@HackneyedSam</a> shows how you can implement the <a href="http://twitter.com/spotify" title="Twitter profile for @spotify">@spotify</a> web API &#8211; <a href="https://t.co/3z5wjv1MGc">https://t.co/3z5wjv1MGc</a>
 — <a href="https://twitter.com/framer/status/786232208830894080">@framer</a>
</blockquote>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=8e8d1dac9eaf" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/have-you-heard-about-the-spotify-web-api-8e8d1dac9eaf">Have you heard about the Spotify web API?</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Have you heard about the Spotify web API?

Top Stories