Build a Music app using VueJS | Tutorial for Beginners

[@TraversyMedia]

Good stuff man. Keep it up :)

[@TylerPotts]

The King of Coding Tutorials has appeared. I'm totally not fan girling. Thank you! I really appreciate it! 😁

[@TraversyMedia]

@@TylerPotts No problem. I know how difficult it is to do content like this so often. Great job though, really. Keep going, just be sure not to overwork yourself. Got a new sub :)

[@TylerPotts]

Thank you. Keep doing what you do! 😱

[@Tuchauaa]

@@TylerPotts Best cross-over, best beasts! @traversy and @tyler

[@TylerPotts]

I'm not sure I compare but thanks! 😂

[@MichaelNeelyTech]

This was also a lot of fun too. This was my first exposure to Vue.js. Now to find some more stuff to build.

[@TylerPotts]

Ay! That's Awesome i have a few things on my channel but I know another channel called webcodenoobs who has loads of Vue videos

[@00el04]

@@TylerPotts, is that still his youtube channel name? I can't seem to find it.

[@liltots]

This is a definition of a great tutorial, I found it very easy to understand! Great work, keep it up!

[@TylerPotts]

Thanks, will do!

[@NeniEmSu]

Awesome video man you're slowly becoming my best dev / Frontend channel this 2020. The playlist would be awesome, and maybe integration with vuex so the player can play even if the user navigates multiple pages.

[@TylerPotts]

Yes this is something we could look at :)

[@motadaymane3262]

And maybe some local storage so even if it refreshes it keeps the same song :)

[@rahman-thecomputerguy7045]

Awesome UI 😍

[@TylerPotts]

Ha, don't judge the UI before you see the video... 😂😂

[@djRichyRichh]

hahahaa :D

[@soufianemchanna6251]

It's a great tutorial that I haven't seen in a long time

[@aminansarimehr9464]

This is awesome ❤️🔥

[@billykiwee]

Vue is just incredible!

[@iKyroja]

you just should have called this.next() in the event listener instead if duplicating code. You could even call next() directly instead of wrapping it in another function. And instead of using bind(this) you could use an arrow function ( () => { } ), less code and looks cleaner.

[@historymobile6210]

Let's goo. Please do more these kind of videos they are great. By the way the your accent makes me code faster 👀

[@Webnoob]

Tyler, it's going great! Amazing work 👍

[@TylerPotts]

Thanks Mario! :D

[@juandavidgomezrestrepo6110]

I literally basing my #100DaysOfCode with your tutorials. thanks a lot Tyler Potts

[@kc2838]

This is really good. Great work.

[@NeelanshMathur]

This was good. Precise and cool!

[@mr_funtor]

Hey Tyler. Nice one. You can revisit this, and build on it with components.

[@tomasburian6550]

Thanks for the video, works great for learning the framework. The only things I'm missing here is a progress bar so I can slide around the song but I'll see if I can figure it out.

[@husniddin_sunnatov]

thanks brother, very much

[@SamWelker]

definitely looking like spotify here, nice vid :D

[@olavictor6286]

Great video

[@patriot159]

Thanks! I learnt a lot from this tutorial... it's amazing :)

[@jalalsyednaveed5527]

Amazing coding, really enjoying your channel. Thanks , that i finally found a good channel :).

[@nicholask1906]

Very nice tutorial. Hope you do more Vue Tutorial like this. Simple yet effective way to learn about VueJS.

[@fullstack5008]

Great channel to learn new things daily 😍😍😍

[@TylerPotts]

Thank you!

[@dinchen_tamang684]

I learnt a lot from this tutorial. Thank you.

[@denncriss3082]

I only speak Spanish and there is not much content about flights... Your channel is super interesting go ahead

[@im_haseeb]

Nice Man

[@TylerPotts]

Thanks 🔥

[@dudzpedra]

First of all, I really relate to your teaching method, the fun teacher! Thanks for the tutorial, it is really light to follow and great to work on some skills! I've ran into some bug: when i try to go next many times, the prev button stops working and the console let me know that it cannot read property title of undefined. any thoughts? =)

[@dudzpedra]

when i get the bug, the other buttons still work fine, it's only the prev and next that stops working and keep throwing the same error as I mentioned before ;)

[@mylesdavies9476]

Nice one, thanks 👍

[@ludkamotylikova3060]

It looks a quite difficult for me to understand, its such a simple thing but when I watch how you build it it looks like wow, very complicated.

[@luhtaubabr2136]

this really helped me thanku sir

[@ahmedelesawy6805]

Thanks is not enough ❤❤❤

[@MM-um1sq]

that was awesome, thanks

[@timur_pikovets]

For those who use Vite instead of Webpack, require() does not work in Vite. Write the path to your files as '/src/assets/...'. Hope this helps someone

[@00el04]

Do you’ve more vue projects?

[@rangabharath4253]

awesome

[@GGdevelopment]

Good stuff hombre! lol

[@a.panfilov.s]

Nice work man ! Could you say please, what theme are you using in VSCode?

[@joselife-on4029]

What happen with the background task? Can this app play music with phone close?

[@huseynovorkhan]

I need this wallpaper!! :)

[@00el04]

@15:13 I had to type 'this.player.muted = false;' for the music to autoplay

[@UkAlien]

Hey great video! I have a question though. I am making a music player with more than 2 songs. With your code the prev and Next buttons don't work when there are more than 2 songs. That is because it makes the next or previous index 0. Then if you click randomly on another song (lets say you jump 3 songs in the list) and then press next. It selects the next song from the last time you pressed next or previous and not from song you jumped to. Can you give a tip or line of code to resolve this problem?

[@chandanam645]

Hi i have tried with same code, but i have facing the error -> Failed to load resource: the server responded with a status of 404

[@NERO-ez1mn]

will there be a react version on this?

[@heyyy4987]

how put a volume control slider?

[@AswinHaridasOne_77]

Instead of pre defining all the songs we are going to use, how do we make it to play all songs we put it in the folder?

[@protocode_227]

write a function with the Node.js fs.readdir() method

[@sheldonfourie5959]

Could you do a movie or song recommendations tutorial based on users behavior

[@denncriss3082]

More content of vuejs please....

[@AliceTrap]

maybe you have the video with the project like this but also with node js?

[@aarondurante1385]

Hi, Sir. I hope you will also create a simple Year In Pixels app in Vue.js. Thank you. Great content! 👏

[@abdulrahmanelzakzouk2768]

what is the theme you're using with vs code?

[@TylerPotts]

Google Material

[@rajatsharma4476]

Are u any way close to Mrs Potts, if true please tell her I love Iron Man 3000

[@Albertmars32]

How do i add a volume option to the player?

[@robinsonnunez4022]

i would like to know how can i add img as wallpaper. excellent video

[@kodamin6723]

I'm glad NEFFEX was in there

[@faisalkhan678]

how to add mp3 files into asset folder .I am Unable to do so pls help

[@kirillbaryba746]

It would be interesting to parse Vuex + JWT

[@TylerPotts]

Something I could look into

[@danielherejk9660]

Hi man, ive got an error, require is not defined. what can I do with that please?

[@TylerPotts]

Sorry I'm not sure without looking into the code.

[@danielherejk9660]

@Aziz Mlayel shit, i have no clue, It's been year ago :D

[@danielherejk9660]

@Aziz Mlayel stackover will help I guess

[@MultiPerplexedDude]

intro, rip headphone users

[@abdi_pie7266]

not bad

[@jonice4229]

hello, great tutorial, i am new to vue.js i wanted to learn it from 0 to a level where i can get a job, can you made a course paid on udemy about vue.js from scratch you have a unique of teaching skill.

[@dudzpedra]

you should really consider it! You have a way of teaching that is similar to mine and all the students usually love it! great job ;)

[@kshitijzutshi]

So, what if i want to play 100 songs? Do i import the title, artist and src for all of them? Any work around for this??

[@TylerPotts]

You could setup an admin system in node to add new songs and get this information via an API...

[@kshitijzutshi]

@@TylerPotts I was hoping to see an app like in the video thumbnail.

[@TylerPotts]

@@kshitijzutshi many people was, next time I'll stick to using an screenshot. Thought I'd make my thumbnails a little more nice looking but it has side effects 😅

[@kshitijzutshi]

@@TylerPotts Well understandable, but is it possible to design like that? If so you know how? Maybe a git repo u know of ?

[@TylerPotts]

@@kshitijzutshi I have made an app like that before I could always make a video on UI?

[@jjkelsey1180]

Thanks for this amazing video!:D I followed it and learned a lot. Still have a problem with the script. Does anyone know how are 'song playing' and 'song' these two parameters working?

[@juandavidgomezrestrepo6110]

hi JJ Kelsey ? is the script working ? so in that script you are actually saying if (song.src === current.src){ class=" playing song"}. else class="song"

[@jjkelsey1180]

juan david gomez restrepo Hi juan. Thank you so much for your reply! I got it.☺️

[@heyyy4987]

how insert album before?

[@mcxundefined2974]

i thought my right earphone was broken :D

[@TylerPotts]

My bad 😅 Messed up the audio...

[@TheLuksas]

how to learn of thinking like that... this is = this , then this is = this.... and so on....

[@iqbalibrahim4713]

can I ask, I noticed that the eventListener is firing multiple times, or did I do something wrong with the code? because I copied everything exactly like how you did, I also use your code from github and it still happens

[@4tt4official7]

Good stuff ,but fake thumbnail I think

[@tajeddinealaoui445]

Click bait image ^^

[@DuyTran-ss4lu]

awesome