ASMR Programming - Music Player App - No Talking
HTML-код
- Опубликовано: 5 июн 2024
- Hello Everyone ✨I am starting a new series following the challenge of 100 days of code. i will create random apps, web apps, and all things that you need to know about javascript 😎
Become a Javascript Developer now with our 100 Days of Code javascript Development Bootcamp course!✅
day 30 - 100 days javascript coding ⚜️
Join the full "100 Days Of JavaScript Code - Web Development Bootcamp" course :
• 100 Days of JavaScript...
In this tutorial, I am gonna showing to you how to code a music player in javascript. we create a project that you can play audio files with javascript from local folder or any url❗️
Day 30 - Source Code : github.com/AsmrProg-YT/100-da...
source of all projects also will upload in AsmrProg github page :
github.com/AsmrProg-YT
with this coding bootcamp you will learn how to be an javascript developer✅
Follow my 100 days of javascript playlist i will upload video's of javascript projects in it for easier access and video's in this playlist sorted by day 1 to day 100 😉
100 days of javascript Playlist : • 100 Days of JavaScript...
Every week i will update this playlist ✅
Video Contents :
00:00 - Intro (100 days of code - day 30)
00:30 - Warming hands
00:37 - Main codes
01:00 - Add font and icons
01:57 - Html coding
04:41 - Main styles
05:13 - Blur background
06:33 - Container styles
07:43 - Cover styles
09:23 - Titles styles
10:04 - Progress styles
11:18 - Controls styles
12:44 - Main js codes
13:18 - Songs object
14:42 - togglePlay()
15:07 - playMusic()
16:01 - pauseMusic()
16:34 - loadMusic function
17:16 - changeMusic()
18:00 - updateProgressBar()
19:55 - setProgressBar()
20:35 - Event Listeners
22:12 - Fix bugs
23:12 - Final Result
Asmr Game Coding Playlist : • ASMR Game Coding
Other Video's :
Coding a Snake Game : • ASMR Programming - Cod...
Movie Guide App Coding : • ASMR Programming - Mov...
Coding IOS (IPhone) Dynamic Music : • ASMR Programming - Cod...
Subscribe → bit.ly/3Lf1K4A ✅
Subscriptions, good comments and likes are great support for me 😍
Don't re-upload or edit the videos on your channel.
All copyrights by AsmrProg.
About AsmrProg Channel :
Here I upload ASMR programming tutorials related to HTML, CSS, Sass, JavaScript, React, PHP, Frameworks such as Bootstrap and more along with creative UI/UX Designs.
AsmrProg is a community for web developers from all levels to learn and grow their skills in front-end and back-end web development.
AsmrProg
Asmr Prog
ASMR Programming
ASMR Coding
ASMR keyboard typing
ASMR web design
ASMR coding html
ASMR coding website
No Talking ASMR
No Talking Coding
No Talking Programming
![Oscar Maydon x Junior H - Volver Al Futuro [Official Video]](http://i.ytimg.com/vi/sa52xabMSB8/mqdefault.jpg)
After a while we updated 100 days of javascript playlist, Please LIKE this video to support my channel 🙏❤
Good
Thanks 🙏❤️
The amount of CSS used makes this website look minimalistic! Great job😁
Thanks 🙏❤️
Hi brother, I'm such a newbie into coding - currently studying the fundamentals - but seeing you, coding like this, making it look relaxing and easy is such a HUGE inspiration to me. Content like this make me realize the real beauty behind all this computational logic. Pure art. 🎨🔥
Greetings from Montevideo, Uruguay. 🇺🇾❤
Thanks a lot bro 🙏❤️
Same i have also started learning c++ 1 month ago and it is very relaxing
Keep going on 🙏❤️
what`s ur progress now??
Same Here!
This is an amazing coincidence for me-
I just got my final coding test task yesterday and I need to write website service to listen music to and now I have an inspiration thanks to you!
Hope it's okay to use some of your css features or ideas-
And thanks for showing something new and good every video, keep going!
Thanks a lot, so support me with your likes 😁❤️
@@AsmrProg As always I did and will continue as well 😄💕
Thanks so much 🙏❤️
awesome journey man, just starting js this is such a motivation for me
Keep it up 😉🙏❤️
I love this exciting and creative things which makes me more fun . Thankfully im in IT and thinking to grow in this feild . Love u man making this 🥰
Thanks a lot 🙏❤️
Another amazing project !
I can't wait for the next video ...
Thanks 🙏❤️
You are the reason I am trying to learn coding. Thank you so much
Keep it up 🙏❤️
please create more in the future as a hobby, i really learn a lot by experimenting and add similar code that i'm try to copy based on your videos. and now im officially getting recruited as junior developer, you are my pioneer and savior! thankyou
Just a few lines of code made such a good looking and functional app! Amazing!
😁❤️
when I first saw your video, honestly I thought I would not just sit there and watch the video. But I'm wrong... no idea why I kinda like this type of ASMR. Great vid.
Thanks 🙏❤️
Man it's soo good thx
🙏❤️
Fantastic design! 👌
Thx a lot 🙏❤️
This is super cool!!!
Thanks a lot, support us with your likes 😉🙏❤️
It was a great tutorial that helped me enhance my JavaScript skills. I learned a lot of valuable concepts and techniques through your clear explanations and examples.Your video was engaging and easy to follow, making the learning experience enjoyable. Thank you❤
Thanks a lot for your good words, keep going on 😉🙏❤️
Bro, thanks so much for the content. You thought me something new!
Support video’s with your likes 😉❤️
Beautifull video. Can i ask u which theme are you using into Visual Studio Code ?
That's really awesome bro
Thanks 🙏❤️
Great UI🌟🌟🌟
Thanks 🙏❤️
Your explanations are so clear and easy to understand. Thank you for making this video!🤝
Thanks 🙏❤️
Amazing design😍
Thanks broooo 🙏❤️
Muito bom, consegui fazer um music player graças ao seu código, 👍👍
Thanks 🙏❤️
that was perfect
Thanks 🙏
Great coding, i like your Creation❤
Thanks so much 🙏
What do you do for your vscode be transparence like this?
I wish i can master javascript like you in the mean time i created a playlist of my own 🙌
Yes why no, keep going on 😉🙏
thank you
🙏❤️
nice 🔥🔥
Thanks 🙏❤️
Can you do a mini tutorial on the frosted glass look to vs code and when you resizing window and stuff?
Hi, with glassit extension you can do it!
You are best coder in the world ❤❤❤❤
Thanks so much 🙏❤️
cool coding
🙏❤️
What should i change if i want to use Url from youtube to play instead of local?
Anyway incredible work thank!
Hi bro, for this you need to change full of code!!
I really like glass morphism ....
i used the same css for my image but the border-radius on the album art isnt transparent. i still see the corners, i had to remove the 20px border radius
Hi, did you checked my source?!
I watched the video three times, the js code is completely identical, I only changed the style and added a volume button, but that's bad luck, the music rewind doesn't work. I reviewed the setProgressBar and updateProgressBar functions 5 times, but I didn't find any differences or errors :( Please help :(
Hi, check video description, source code available on my github, replace your new codes there and if you have error after it, send source to me in telegram, link on channel about page 🙏
this is amazing. is there a reason why you dont use React or other library/framework?
Hi, we will have React and frameworks complete playlist soon, first we need do projects for beginners! 🙏❤️
thank you !!!
🙏❤️
what's your vscode extension for transparent background?
Hi, Glassit extension, also there is a repository about all of my vscode settings in my github 🙏
How did you learnt this advanced coding? please make a tutorial on HTML, CSS & JS too it will be helpful!!!
Yes! I’m working on 0 to 100 courses 😉
This is what I want
Great, please like video to support us 🙏❤️
@@AsmrProg Yeah of course
Thanks 🙏❤️
can you please tell me how youre using the arrow keys without clicking fn key?
cz i also have a 61 key layout keyboard and im having a lot of problems with the arrow keys.
Someone please help!
Hi, install it’s software on your pc, then change arrow keys function 🙏
@@AsmrProg keyboards software??
Yes, some keyboards have softwares to customize it!
Hi, as I was practicing with you, I struggle to insert the picture and the audio. Is there anything that I'm missing?
I need to see your code! But project source code available on my github, link on description 🙏
how to have the vscode's background just like yours ?
Hi, it’s glassit extension
u r good
Thanks 🙏❤️
the song time is not working on mine, what should I do to fix it?it looks just like the video
Hi, maybe your code have bug! If you want i can send source 🙏
Hey, bro i just found a channel called Arbind -M and his first video is about creating a nested bracket calculator logic which supports upto 35 nested brackets, with bodmas implementation rule, i really surprised that he the first guy who did this job, and one important thing about the logic is that it gives 99.9% accurate result along with google calculator and Microsoft calculate, i will recommend every people to watch the video thanks, reza bro please tell me how it's that, and i didn't understand the logic, can you please explain 😅😅
Hi bro, what i need to do?!
@@AsmrProghey bro just watch him first video at, 25:30 and you understand what i mean😊😊 and also read my comment again i do some spelling mistake 😅😅
Bro why you didn’t asked channel owner about it!
The channel is new and I don't know the owner tells me or not, but you are so humble and good so i prefer to ask you😄😄
Hi, how you refresh you're website and seeing changes without saving or clicking on refresh button in google? Love you're Videos
In this video with live server extension 🙏
for me the images for the covers are not showing up even though the source is right :/ how do i fix it?
Your source have bug! Check my source code link on description 🙏
hey ASMR! where do you get your wallpapers?
Hi, Pexels website!
mashallah dadash dos dashti bego manam chi konam kanalam begire fadat
Salam, eshghi, tel pm bede link about channel 😉🙏
How to let the program automatically interact with the Internet to retrieve music, so that I don’t have to search for music and photos on the Internet one by one in the program. I hope you can make a video and explain how to do it. By the way, I like your video very much!
Yes, we will have video about internet connection check 😉
Hey, i can add more mp3 files in the assets folder right?
Yes and also you need to add it in js code 🙏
@@AsmrProg ok thanks👍
@@AsmrProg tell me one thing, how can I modify the play bar so that it can be dragged forward and backward...at the moment the progression bar is moving only on clicking at a point on the bar.
🙏❤️
How can i change like your animation cursor ?
Hi, it’s screen recorder effects!
how do you get the red trail and the green circal
Hi, it’s screen recorder effects!
Hi cool video, I have coded it now, but If I want to add my own files into the folder structure under the folder "assets" It says "an error occurred while loading the audio file"
Do you know a fix for this?
Hi, you need to use its path in correct way!
How would I do that? Im quite new to coding in vscode so what do I do?@@AsmrProg
Path to the file!
yes I did that. Interestingly they load in the browser, so if I use the player in my browser, it works. only VS code has the problem@@AsmrProg
@firecreeper21 maybe your path to assets are incorrect, remove “./“ from path if you added 🙏
Will you show us your vs code extensions?
Btw, love from india 👑❤️
Hi, There is a post in my channel community page about my extensions 🙏
@@AsmrProg okk thx brother 💥
🙏❤️
hi so i fixed everything mostly im just confused as to how i can change the background to be an entirely different static image? i would like the background to stay the same and not change with the cover art but i'm too new to coding to understand the code .-. :(
Hi, remove section in js that we choose cover statically 🙏
thank you so so much!!! :) i used this video to just throw myself into coding and figure stuff out on the go so thank you for providing all these informational videos :)@@AsmrProg
@MelodyMusicy thanks a lot 🙏 keep going 😉
What software you use for live server
Hi, it’s live server extension!
can u create apps with android studio ? if so .. plz do one simple app with it in the next vedio ☺
Hi, with android studio no but with vim maybe 😉🙏
so nice and clean👌 can I push my code to github ?
Thanks, yes but it’s MIT licensed 🙏
@@AsmrProg thanks for mentioning it I🙏 your videos are so good and easy to understand
🙏❤️
what keyboard do you use?
Hi, in this video newmen gm610
hello, how did you add your assets?
Hi, i showed in video!
thanks, i just finished coding it man, it took me 3 days hahaha. but how do you create a link for my friends to be able to view the music player?
@jawnelcurato2864 great, you need to upload it on a hosting!
and also I wanted to know what font size do you use!!
like on your vscode
Hi, it’s vscode default
I’m using Cascadia Code font
I have made small projects on Visual Studio Code, but I do not know how to create a link to these projects and I want to know how to do that
Hi, you need upload projects on hosting sites, then you can get links 😉🙏
👍👍👍👍👍👍
Thanks ❤️🙏
Hey bro, is there an API to retrieve music and use them in our web instead of having to download them first?
Hi, i will check it and tell you 😉
@@AsmrProg thanks! 😁
🙏❤️
@@AsmrProg have you found it? 😁
Yes, Spotify and soundcloud have api for it!
How mch xp do u have? I finished front end part of web development course
Hi, what xp!
Can you try to do this with react?😁
Also we have a React music player in the future 😉🙏
@@AsmrProg
🙏❤️
How to dynamically do this ? How to change path automatically
Sorry? Can you explain it?
is there some kind of api available for music data
Hi, yes! Also spotify api, sorry for late response 🙏
thanks man @@AsmrProg
@ThePhantom030 🙏❤️
What keyboard are you using sir?
Hi, in this video newmen gm610
@@AsmrProg Thanks sir keep it up!
🙏❤️
Hi, what is the name of this keyboard?
Hi, newmen gm610 on this video 🙏
I need the setup for your editor
Hi, check my github, there is a repository about all of my vscode settings 🙏
Can i use these for my another RUclips channel by giving credit
Hi, yes no problem 😉🙏❤️
how to make vscode one like yours
Hi, please check my github, there is a repository about all of my vscode settings 🙏
Hello ❤, it's a bit late, but can you please help a beginner make a shortcut for the pause button by pressing space?
😊❤😊❤😊❤😊❤
Hi bro, you need to just add an event listener for it 😉
I am a bit shy, but I haven't learned that yet🤭
Add event listener for space button then connect it to toggle pause play!
It worked 🎉
I want to tell you something
You are annoying people
with your amazing videos ❤️
what theme is this?
Hi, check my github please, there is a repository about all of my vscode settings 🙏
distinct
Thanks 🙏❤️
what thema ?
Hi, this one firefly pro
where did / how did you learn web development broo???
Hi bro, with courses in my country and searching sites and youtube 🙏❤️
@@AsmrProg oh Thankyou for replying bro , love your videos from India💖
Thanks 🙏❤️
bro, assets part gives me error where to save ??
Hi, what’s your error?! Check my source, link on description 🙏
@@AsmrProg just a minor error but i sorted out and also i had changes songs and imgs too . thats feeling was superb😍... but one thing i cant do in song is skipping forward it restart or change the song . but in ur video u can skip forward i dont understand where i m stuck
Check my source you will fix it too 😉 don’t miss new video, it’s great!!!
Hi can you make tutorials?
Courses?!
Bro do you know backend web development
Yes and also we will have it in channel in the future 😉
Hey! I also want to start how could I?
Hi, it’s web coding!
@@AsmrProg from where should I start ? ❤️❤️
Html, css tutorials
@@AsmrProg hey thanx buddy for ur reply, can i start from html?
Yes, you need to start with html, then css and js
Plz provide project coding file
Hi, project file link on description!
😍😍Hey man you are very talented and your very genuius 😇 😙what is your name?????????
Thanks a lot, I’m Reza 🙏
"Reza" very nice name🥰
Thanks ❤️
Wallpaper link please without telegram make an project on wallpaper download
Hi, I don’t have its link! If you want i can send in telegram 🤦♂️
@@AsmrProg ok I'll send you message
🙏❤️
brother what is your job? and how much you earn?
Hi, sorry it’s private!
First time we hear some sounds in your video 😂
Yes 😂❤️
Opera is not working properly
Hi, what’s problem? Please can you explain it?!
Hey Brother
I have a question
Plz reply must
Hi, what’s question?!
First!!!
Yes! Please like video 🙏❤️