Build a Music app using VueJS | Tutorial for Beginners
HTML-код
- Опубликовано: 6 июн 2024
- Learn how to code a VueJS Music app that uses the HTML5 Audio Element API to play music. We use VueJS reactive features including lifecycle methods, data and methods to create a beginner friendly music app with playable playlist.
A Javascript Project
Day 7 #31Days31Videos
Source Code: github.com/TylerPottsDev/vuej...
// JOIN THE DISCORD
/ discord
// MY GEAR FOR CODING AND RUclips
Blue Yeti Microphone: amzn.to/3jr3l7T
Microphone Stand: amzn.to/35B9LMN
Chair: amzn.to/3dWds3F
Thunderbolt Dock: amzn.to/3osBF6u
Monitor: amzn.to/37I8KoR
All of these products I own and have tested!
FOLLOW ME ON TWITTER!!!
/ tyler_potts_
LIKE, SUBSCRIBE & SHARE
Music
DEAF KEV - Invincible (NCS Release)
Neffex - Grateful (NCS Release)
Good stuff man. Keep it up :)
The King of Coding Tutorials has appeared. I'm totally not fan girling.
Thank you! I really appreciate it! 😁
@@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 :)
Thank you. Keep doing what you do! 😱
@@TylerPotts Best cross-over, best beasts! @traversy and @tyler
I'm not sure I compare but thanks! 😂
This is a definition of a great tutorial, I found it very easy to understand! Great work, keep it up!
Thanks, will do!
This is really good. Great work.
Tyler, it's going great! Amazing work 👍
Thanks Mario! :D
Thanks! I learnt a lot from this tutorial... it's amazing :)
This was good. Precise and cool!
This was also a lot of fun too. This was my first exposure to Vue.js. Now to find some more stuff to build.
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
@@TylerPotts, is that still his youtube channel name? I can't seem to find it.
Amazing coding, really enjoying your channel. Thanks , that i finally found a good channel :).
It's a great tutorial that I haven't seen in a long time
I literally basing my #100DaysOfCode with your tutorials. thanks a lot Tyler Potts
I learnt a lot from this tutorial. Thank you.
Let's goo. Please do more these kind of videos they are great. By the way the your accent makes me code faster 👀
definitely looking like spotify here, nice vid :D
Very nice tutorial. Hope you do more Vue Tutorial like this. Simple yet effective way to learn about VueJS.
Great channel to learn new things daily 😍😍😍
Thank you!
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.
Yes this is something we could look at :)
And maybe some local storage so even if it refreshes it keeps the same song :)
This is awesome ❤️🔥
Awesome UI 😍
Ha, don't judge the UI before you see the video... 😂😂
hahahaa :D
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.
Nice one, thanks 👍
that was awesome, thanks
this really helped me thanku sir
Great video
Nice work man !
Could you say please, what theme are you using in VSCode?
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?
thanks brother, very much
Vue is just incredible!
Good stuff hombre! lol
I need this wallpaper!! :)
Thanks is not enough ❤❤❤
Could you do a movie or song recommendations tutorial based on users behavior
Nice Man
Thanks 🔥
awesome
Hi, Sir. I hope you will also create a simple Year In Pixels app in Vue.js. Thank you. Great content! 👏
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? =)
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 ;)
i would like to know how can i add img as wallpaper. excellent video
Hey Tyler. Nice one. You can revisit this, and build on it with components.
What happen with the background task? Can this app play music with phone close?
maybe you have the video with the project like this but also with node js?
will there be a react version on this?
I only speak Spanish and there is not much content about flights... Your channel is super interesting go ahead
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.
Do you’ve more vue projects?
How do i add a volume option to the player?
how put a volume control slider?
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
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?
write a function with the Node.js fs.readdir() method
More content of vuejs please....
how to add mp3 files into asset folder .I am Unable to do so pls help
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.
what is the theme you're using with vs code?
Google Material
how insert album before?
It would be interesting to parse Vuex + JWT
Something I could look into
@15:13 I had to type 'this.player.muted = false;' for the music to autoplay
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
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
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.
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 ;)
not bad
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??
You could setup an admin system in node to add new songs and get this information via an API...
@@TylerPotts I was hoping to see an app like in the video thumbnail.
@@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 😅
@@TylerPotts Well understandable, but is it possible to design like that? If so you know how? Maybe a git repo u know of ?
@@kshitijzutshi I have made an app like that before I could always make a video on UI?
intro, rip headphone users
Hi man, ive got an error, require is not defined. what can I do with that please?
Sorry I'm not sure without looking into the code.
@Aziz Mlayel shit, i have no clue, It's been year ago :D
@Aziz Mlayel stackover will help I guess
Are u any way close to Mrs Potts, if true please tell her I love Iron Man 3000
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?
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"
juan david gomez restrepo Hi juan. Thank you so much for your reply! I got it.☺️
I'm glad NEFFEX was in there
how to learn of thinking like that... this is = this , then this is = this.... and so on....
i thought my right earphone was broken :D
My bad 😅 Messed up the audio...
Good stuff ,but fake thumbnail I think
Click bait image ^^
awesome