How to use Spotify's API with Javascript

[@averywicks6892]

Hope this video is informative for you guys!

[@kenbee85]

this is very informative. Thanks

[@averywicks6892]

@@kenbee85 Appreciate buddy! I have another video with React coming Monday!!

[@saifsiddiqui8017]

Thank you bro

[@PachucoDesigns]

Not gonna lie, this was more discouraging than informative to me. Not because you don't know your stuff; clearly, you do. It just reminds me just how little I know. Most of this was complete Greek to me. That's the most frustrating thing about learning to code. It's loaded with chain after chain of "before you can understand this, first you must understand that..."

[@averywicks6892]

@@PachucoDesigns No reason to be discouraged. We all have to start somewhere. You'll get it. Trust me! I was an intern during my first programming gig, and I wanted to pull my hair out because I couldn't grasp the idea of just an 'object' in OOO. I couldn't figure out when I needed to create a new object vs not. I was completely green, but just kept working little by little. You keep grinding at it, and you'll get there. There are tons of devs that are way better programmers, and smarter than me. My strength is that I will grind it out and learn. That's worked pretty well for me. You keep working, and I think it will work pretty well for you buddy :)

[@mact3nnz257]

Holy Cow!!! I thought APIs were going to be simple. However, this is way more than I expected. Thank you so much for giving us the code on GitHub to study.

[@averywicks6892]

no problem buddy!

[@Meeks2k]

Bro this was so helpful. Just learning JS and my dumbass set up a local server and everything because I had NO clue about async functions. You’re the goat💜

[@jamesforster2194]

I learned so much from this by just pausing the video to type everything out and making notes on your explanation. You explain it all so clearly! Thanks very much indeed.

[@averywicks6892]

Really happy to hear that! More videos coming soon! Feel free top share this video and/or channel! Tx!

[@simonlindgren9747]

This is really underrated, only 328 subs??? He deserves a lot more.

[@jimmysit0]

true

[@averywicks6892]

Cool to hear that the videos are useful. Appreciate your feedback buddy! I'm going to keep em coming

[@averywicks6892]

@@jimmysit0 tx buddy

[@jimmysit0]

@@averywicks6892 Thanks to you, this video was very useful!

[@jimhalpert9803]

His subs doubled now

[@ChuanyiXia]

とても役立つ記事でした！JavaScriptでSpotifyのAPIを活用する方法が分かりやすく説明されていて、実際のアプリケーション開発に役立ちそうです。特に認証の部分が具体的で参考になりました。次の投稿も楽しみにしています！

[@123matheuslol]

One os the bests tutorials i ever seen on yt, keep the good work!

[@averywicks6892]

Really appreciate the comment and feedback! Please feel free to share if you want!

[@josefranciscoaguirrevillar2113]

Very well explained!!!! So grateful for founding this video! Well edited and professional! Hope you can get More subscribers!

[@averywicks6892]

You're very welcome sir. Been a while but more videos coming.

[@cagan8]

I really like your explanations man especially providing info on important concepts like closures, modules etc.

[@averywicks6892]

Thx buddy! Glad the video was useful! Feel free to share this channel! Would really help me out!

[@michalcizek6785]

Wow, what a great video. You deserve waaay more subscribers! Iam hitting the bell.

[@averywicks6892]

Much appreciated! Thx buddy

[@dannnnydannnn5201]

Nice tutorial! I’m going to try this when I get back home. I’m working on a project that could definitely incorporate some of what you did here with the playlists. This is really helpful actually. Thanks dude.

[@NicoleBardales]

Thank you for this... I'm barely getting started with JS but your explanation is so clear that I can't wait to start working on this project. Everything made sense and was simply explained.

[@averywicks6892]

Absolutely! Glad the video was helpful. Feel free to check out new my video on Unity!!

[@TrapWorldz]

Just started studying JS, will get back to this video as soon as i progress.

[@averywicks6892]

Very cool buddy! Hope that this video helped. Please feel free to share if it was useful!

[@_remma]

Thank You. I like the way you explain every step, not just assume we know.

[@dylanwilliams269]

Nice one lad. I like the chilled vibe and straight to the point with explanation when needed (y)

[@jackwatson438]

Legend. This video probably saved me hours of fumbling through Spotify docs, thanks dude!

[@antoinealez12]

i understood about 20% of what you were saying. I'm still learning JavaScript and haven't gotten to APIs yet, but I'll be back when I do

[@averywicks6892]

Just keep pushing buddy! It'll come. I'll def try to make the videos easier for beginners to consume!! Tx for the feedback!

[@rupamkairi]

After scratching my head for couple of days about which auth method to choose for spotify i finally did implemented client credential couple of days ago. But watching your video gave me a whole new view to approach. Creating controls and api connection are awesome 🤯 and i would definitely be using this tutorial to fix my codes many ways. Thank you for the video.

[@averywicks6892]

Sorry for the late response. Really glad this video was helpful. If you want, feel free to check out my Spotify API video using React!!

[@thamaragerig9587]

Really liked the way you explained things!Great video!

[@averywicks6892]

Thank you! Really appreciate it! Please feel free to share this video and/or channel!

[@druloloy]

Your explanations are great bro! Thank you for this wonderful tutorial.

[@averywicks6892]

Really appreciate it! Thx buddy!

[@NICKYwashisnameOH]

loved the vid bro. Helped me understand how to use the API + understood IFEE's and Closures

[@averywicks6892]

Appreciate the feedback buddy! Excited that it made some things clear for you! Good luck!!

[@umairgosal5033]

a very beautifully curated and detailed video for all level of learners

[@emmanuelgatica4998]

I really hope this guy gets huge! Such a great quality video! Ever though of doing a discord?

[@lolownq]

just found this looking through some extra content on the spotify API as I learn best from seeing. But I stumbled across a goldmine for JS Coding convetions (the closures and modules) deffinately will incorporate this into my own coding. Never learned something as good as this in college. And thats over 3 years lmao

[@averywicks6892]

Amazing to hear! Glad this video was useful! If you want, feel free to check out my Spotify API video using React!!

[@grantemerson5932]

Just singing the word "Scootaloo" the whole time watching this. Rad tutorial. I'm new to dev, I appreciate the explanations.

[@averywicks6892]

LOL...Really geeked that the video was useful buddy! Def the goal! More to come. Please feel free to share if you want!

[@makeratplaycoding2666]

Great tutorial video. The video editing is very professional with great pacing. Your explanation of concepts is clear and easy to understand. The code is clean and easy to follow. And smooth piano background music sets a good mood for coding. I shall apply some of these styles to my own coding videos. 😊 Great job. Keep it up.

[@iconoyuri9555]

I highly appreciate the quality of your code

[@ahmetomer1759]

Very clear explanation and helpful tutorial, keep it going!

[@averywicks6892]

Really appreciate the feedback! Please feel free to share this video and/or channel!

[@lizavetameta]

where can i find these endpoints on Spotify? any links?

[@DontReadMySpam]

This is looking like something I definitely wanna come back to. This video looks very clean and simple to follow, but unfortunately a bit too advanced for me. I was looking into how to create a Discord bot that would be able to request songs using text from a discord server’s text channel. Right now I wanted to see if there’s a video out there that could explain the Spotify API in a sleek and easy to understand way. This seems it. Now that I’ve got this, I need to find some videos on JavaScript fundamentals to get me rolling. Can’t wait to revisit this video. It looks great even to a completely programming ignorant person such as myself. Subbed for sure.

[@averywicks6892]

Really happy that the video is helpful, and I appreciate your feedback!

[@5h00G0fg]

Great Video with clear instructions!

[@averywicks6892]

Many thx!!!

[@thomaskim9911]

Thanks for the great tutorial! Keep it up!

[@Jose-xe2pw]

dude, that code is sooooo clean. Nice tutorial 👍

[@evsz.]

Mann this tutorial is golden!! Making a music collection webapp in asp.net for school and im planning on implementing this, thanks alot!

[@averywicks6892]

So dope buddy! Appreciate the feedback man!!

[@matthewmitchell5141]

Thanks for explaining the way you modularized your code! Great video.

[@cyrus3430]

I watched your intro and subscribed!!!🔥🔥🔥

[@GoldsHouseMusic]

Is there any way to search Spotify by song credits? Each song has their credits as a public info, but I don't understand why Spotify doesen't let us search by "produced by"? Can that be done somehow? Thanks :)

[@feliciafel1809]

Thank you so much for making this video! this is great!

[@Matt55131]

Informative video and nicely presented.

[@averywicks6892]

Appreciate the feedback buddy!

[@DumCarriage]

Nice video! Helped me a lot.

[@averywicks6892]

Appreciate it! Feel free to share my channel!!

[@rminardi]

This is such a great tutorial!

[@averywicks6892]

Many many tx!!

[@danilocorreia5104]

What an awesome tutorial! Thanks man

[@averywicks6892]

Really appreciate the feedback buddy! Let's me know I'm doing something right LOL.

[@devmehta-ur8nt]

thank you so much really helped me a lot as someone who is not so familiar with oauth and also to use 3rd party web apis

[@AmandeepSingh-zt9eq]

Great content, and its give me motivation how clean you have written all the methods . Keep making more video . One subscribe from my side(y)

[@averywicks6892]

Really appreciate buddy! Thank you! Please feel free to check out my Spotify video with React!!

[@jonahsaywonson5272]

Amazing video! Thank so much for the tutorial!

[@paulomacedo357]

What should i put in the clientid and clientsecret?

[@averywicks6892]

You'll actually receive your client Id and client secret when you register your app with spotify! Tx for watching.

[@paulomacedo357]

@@averywicks6892 how do i register my app with spotify? im sry xD

[@averywicks6892]

@@paulomacedo357 Here you go buddy! developer.spotify.com/documentation/general/guides/app-settings/

[@archiebaldry]

great tutorial! good job man

[@averywicks6892]

Appreciate it buddy! Glad that it's actually helping some LOL.

[@aryanmaurya3422]

You are an awesome teacher.

[@ohhimark8028]

How the hell do you have so few subs? Content is 🔥

[@averywicks6892]

LOL. I appreciate man. KZbin doesn't love me yet haha. I'm going to keep the content coming tho!

[@samuelumoh393]

Thank you for this video sir. Is there a reason why the music images are blurry?

[@reamsofmind]

Amazing vidoe and just what i was looking for! Feedback would include doing a talk as you code style instead of coding then explainjng your approach, i feel if you approach the tutorial in this way you give people a chance to learn actively instead of just passively listening. Thank you for the time you put into making this video!

[@vidhishamaken4625]

Hey I cloned your repository but the drop-down menus for genre and playlist have no options, it just says select and the list you are demonstrating is not there. Please help !

[@jbueza5592]

I love the way you explain things. kudos

[@saifsiddiqui8017]

This is what i was looking for thanks dude

[@raigeki.]

if i'm understanding correctly, the APIController is basically coded in a way that makes it function like a class, with the main function basically creating the inner functions like _getToken(), etc.?

[@DruSerkes]

Great vid! Thanks for this

[@averywicks6892]

Many thanks buddy!

[@mantsalinthabisengsekoli431]

Gained so much from your coding technique, thank you

[@LimeWitness]

I added my own Client and Secret ID but both dropdowns are still blank?

[@natalymota7592]

Thank you for this tutorial! What application did you use to create the layout for your user interface?

[@evynsrefuge]

Thanks for making this! really helped

[@averywicks6892]

No problem. Glad it was useful.

[@Scott5902]

hey why the underscores in the function names? I might have missed it

[@darrenhundt]

This is a great tutorial. Kept it simple.

[@averywicks6892]

Much appreciated! Tx for the feedback.

[@droidtalks]

i didnt get the name of ui designer you used

[@averywicks6892]

It was called Mockflow. Thx for checking out the video! Here is the link: www.mockflow.com/

[@babemeltzer]

Wow! What a video, I'm a beginner and learned so much from this. Thanks. Just wondering can if a feature can be added the you can play the song you picked? Not asking how just wondering if it can be done.

[@emmyacosta]

what did you use to build the wire frame!?

[@milannikolics6894]

Mockflow project can't download as html for free. It will be responsive if I purchase and download?

[@Mr_BetaMax]

Great code structure 👏

[@utibeabasiukobo4381]

i keep getting this error message "Uncaught (in promise) TypeError: Cannot set properties of null (setting 'innerHTML')" when i select a genre

[@ruubski]

What is the song playing in the background?

[@aricwilliamsdeveloper]

nice to see a brother in the game

[@danielli2078]

Hey Avery! Great video. Does the Spotify API support actual audio playback or just give you controls?

[@averywicks6892]

No problem! Glad you liked the video. I have to believe that spotify allows for actual playback as well. I haven't really attempted that though!

[@BlerdGrid]

It does! You would have to find a previewURL data point in the data given back from the call. It may also require a separate endpoint as well that will allow for searching based on the title of a track...this is completely off the top of my head and it's been a while since I implemented it...but I think that's how it works still

[@kassiooliveira5640]

Great video,👏👏

[@AfroBearGaming]

Late question, but would it be possible to search the database for tracks matching a specific keyword and display a couple tracks matching that name

[@madesno5002]

17 months later and something has changed! This is the hard part about programming, isn't it?

[@Styyxxxx]

yo, this is some hight quality stuff man

[@averywicks6892]

Tx buddy! Appreciate the feedback! Feel free to share the vid!

[@Styyxxxx]

@@averywicks6892 how would i go about if I need to play the song that I retrieved?

[@averywicks6892]

@@Styyxxxx I actually haven't tried to build that functionality. However, spotify has an SDK available that allows for playing retrieved music. It's called Web Playback SDK. Here is the link to their quick-start tutorial. Hopefully, this helps. developer.spotify.com/documentation/web-playback-sdk/

[@Styyxxxx]

@@averywicks6892 Thanks a lot for the help!!!!!!!!!!!!

[@nguyendanhthuong8954]

What's app which you use to design in this video ?

[@bogomilstoynov8405]

You read my mind, just what I needed! But what about storing the token in the client side code, is that reliable? Should I bother creating an express server with the sole purpose of obtaining the token there and thus not exposing it to the end user

[@averywicks6892]

From a security standpoint, storing the token on the page like I did is BAD LOL!. I just did it that way because this was a tutorial and I wanted to focus more the calling the API. It's always better to keep that information away from the end user.

[@bogomilstoynov8405]

@@averywicks6892 I would love to see a video about that, maybe you can consider it as an idea... Anyway just found your channel and already subbed, keep it up

[@GolangTutorials-fp5lo]

Can I use spotify apis for commercial purpose

[@stanislavdidenko8436]

And how do you play the tracks?

[@HK1tap]

Hey sir, is there any problems if someone know my clientID or clientSecret?

[@dariuszg9991]

Great work

[@averywicks6892]

Appreciate it!! Please feel free to share this video and/or channel!

[@Manjaco]

Great tuto thanks!!

[@averywicks6892]

Awesome! Appreciate the feedback. Feel free to share this channel and/or video!

[@kaishajones]

Could you also show a REACT app version of this to call on the spotify api?

[@averywicks6892]

That's def something to consider! I think may have even mentioned doing a React tutorial in this video LOL. Will def add that to the to-do list if you guys want it! Thx for checking out the video, and please feel free to share (if you want)!

[@pearceodegard582]

Why don't you use spotify's provided documentation to handle HTTP requests with the simple calling of a function rather than manually creating your HTTP requests?

[@pearceodegard582]

wait nvm you go over that in the intro

[@averywicks6892]

@@pearceodegard582 Cool. Tx for the feedback though. I'm def not above criticism :) I'm sure there are other approaches that can be taken!

[@pearceodegard582]

@@averywicks6892 Hey all I know is I appreciate the content. Every dev should have a youtube channel.

[@fiora9917]

very good video, thanks!

[@marcgroenewegen2022]

Thanks a lot. Very useful!

[@marshallkurniawan4307]

Is it possible to play the song after you searched on the web app that you just made? and if I provide my own client id and secret, would the web app be able to play different songs if it's opened from 2 different devices?

[@averywicks6892]

Sorry for the late response. Unfortunately, I haven't dug into actual playing the media after retrieving it! I have to believe Spotify provide that functionality as well. Tis may help you. developer.spotify.com/documentation/web-api/reference/player/

[@AndresGarcia-rt9zy]

Can you play music through the api?

[@michaeltruong405]

Is it possible to play music using the Spotify api?

[@gigafunctions822]

Wow thanks for the input 😘

[@sulekhas8785]

Hi! This is exactlyyy what i was looking for. just a question - isn't the client secret token supposed to be hidden and not visible in the code? how do i handle that? is it absolutely neccessary to have backend code in python or node js to fetch that info?

[@averywicks6892]

Glad that you found this useful, and yes, you typically don't want to show the client secret inside the code. Terrible security LOL. I didn't really worry about that for this tutorial as I focused more on JS Principles. Typically, you want to maintain sensitive data on the server vs the client. Which in turn, introduces the need for a backend language :) Hope this helps. Feel free to check out my Spotify video w/ React as well.

[@Bayo106]

how on earth did you say and write IIFE then say Immediately invoked JAVASCRIPT expression ...?

[@averywicks6892]

LOL...Brain freeze! Great catch!! Haha.

[@cmathias4993]

Is there a way to do an api call with a specific artist name? Also Is there a way to get a list of all artists or a list of all ids required to make that api call

[@averywicks6892]

I haven't seen that type of API call. From what I've seen, you'd have to obtain the "Artist's ID" that exists on spotify, and then call their "GET AN ARTIST" api. That's sort of a hassle though. Would be much simpler if they had a GET ARTISTS BY NAME api. Thx for watching, and please feel free to share!

[@namocspot3330]

but how could a play a music?

[@josephgeorge7359]

Do you have a repository for this project? Great video, subscribed for sure!

[@averywicks6892]

Appreciate the feedback buddy & thx for subscribing. I'll upload the project to GitHub and post the repo link in the video description today.

[@averywicks6892]

Added the project for you buddy.

[@josephgeorge7359]

@@averywicks6892 My man! Thank you very much!!

[@averywicks6892]

@@josephgeorge7359 No prob!

[@patrickfigueroa2421]

Hey Avery thanks for your video. It’s amazing that you can explain all with simple words. I’m interest to know about the name of the software you use to make the UX design. Could you tell me please? Thanks.

[@averywicks6892]

Really appreciate the feedback. Another video coming soon. UX design tool was done through www.mockflow.com/

[@TrapWorldz]

Is there any way to get "Most Listened to Artist" by a user using Spotify's api?

[@averywicks6892]

Looks like Spotify may have an API available for that. It's called "Get a User's Top Artists and Tracks". Maybe you could give that a try! Hope this helps and thx for watching the video! Please feel to share this channel and/or video if you want!

[@TrapWorldz]

@@averywicks6892 how did u export the html file from mockflow using free version?

[@nabilasyahidah3699]

thanks a lot for the tutorial

[@averywicks6892]

No problem buddy! Glad it was helpful. Please feel free to share this video and channel!

[@georgeakritidis8317]

I have downloaded it from Github to check if it is working because I want to use something similar in an assignment I have for the university but it is not working. Can I use it locally on my computer or do I have to upload it in a server to work?

[@averywicks6892]

It's available for you to use locally. Make sure you've registered your app on the spotify dev website. That way, you can get your client credentials which are needed for the app to work.

[@georgeakritidis8317]

@@averywicks6892 Thank you, it works. Excellent job.

[@sonututeja2952]

Bro I cant find mach flow tool to Download is it is available in all countries pls reply

[@averywicks6892]

Here you go. Link was in the description (just FYI) www.mockflow.com/