ASMR Programming - Music Player App - No Talking
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 :
kzread.info/head/PLkC56g8fboI0HghByzVuD2Vz8ROUXfF_j
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-days-of-javascript
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 : kzread.info/head/PLkC56g8fboI0HghByzVuD2Vz8ROUXfF_j
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 : kzread.info/head/PLkC56g8fboI3nNZQS2mb6kCqK9yS0XgD9
Other Video's :
Coding a Snake Game : kzread.info/dash/bejne/qYFrx6-DYpnRk5s.html
Movie Guide App Coding : kzread.info/dash/bejne/fGqpw89ymqjTdLg.html
Coding IOS (IPhone) Dynamic Music : kzread.info/dash/bejne/iWmAssWpebWyqtY.html
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
Пікірлер: 241
After a while we updated 100 days of javascript playlist, Please LIKE this video to support my channel 🙏❤
@elnurpiriyev4655
Жыл бұрын
Good
@AsmrProg
Жыл бұрын
Thanks 🙏❤️
The amount of CSS used makes this website look minimalistic! Great job😁
@AsmrProg
Жыл бұрын
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. 🇺🇾❤
@AsmrProg
Жыл бұрын
Thanks a lot bro 🙏❤️
@aijazbir2010
Жыл бұрын
Same i have also started learning c++ 1 month ago and it is very relaxing
@AsmrProg
Жыл бұрын
Keep going on 🙏❤️
@coco0847
2 ай бұрын
what`s ur progress now??
@Mostafa-jh2ij
Ай бұрын
Same Here!
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
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!
@AsmrProg
Жыл бұрын
Thanks a lot, so support me with your likes 😁❤️
@rinri_ustav
Жыл бұрын
@@AsmrProg As always I did and will continue as well 😄💕
@AsmrProg
Жыл бұрын
Thanks so much 🙏❤️
You are the reason I am trying to learn coding. Thank you so much
@AsmrProg
Жыл бұрын
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 🥰
@AsmrProg
Жыл бұрын
Thanks a lot 🙏❤️
Just a few lines of code made such a good looking and functional app! Amazing!
@AsmrProg
8 ай бұрын
😁❤️
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.
@AsmrProg
Жыл бұрын
Thanks 🙏❤️
Another amazing project ! I can't wait for the next video ...
@AsmrProg
Жыл бұрын
Thanks 🙏❤️
awesome journey man, just starting js this is such a motivation for me
@AsmrProg
Жыл бұрын
Keep it up 😉🙏❤️
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❤
@AsmrProg
Жыл бұрын
Thanks a lot for your good words, keep going on 😉🙏❤️
Bro, thanks so much for the content. You thought me something new!
@AsmrProg
Жыл бұрын
Support video’s with your likes 😉❤️
You are best coder in the world ❤❤❤❤
@AsmrProg
4 ай бұрын
Thanks so much 🙏❤️
Man it's soo good thx
@AsmrProg
Жыл бұрын
🙏❤️
Fantastic design! 👌
@AsmrProg
Жыл бұрын
Thx a lot 🙏❤️
Your explanations are so clear and easy to understand. Thank you for making this video!🤝
@AsmrProg
Жыл бұрын
Thanks 🙏❤️
Muito bom, consegui fazer um music player graças ao seu código, 👍👍
@AsmrProg
Жыл бұрын
Thanks 🙏❤️
This is super cool!!!
@AsmrProg
Жыл бұрын
Thanks a lot, support us with your likes 😉🙏❤️
Great coding, i like your Creation❤
@AsmrProg
6 ай бұрын
Thanks so much 🙏
I wish i can master javascript like you in the mean time i created a playlist of my own 🙌
@AsmrProg
Жыл бұрын
Yes why no, keep going on 😉🙏
Amazing design😍
@AsmrProg
Жыл бұрын
Thanks broooo 🙏❤️
That's really awesome bro
@AsmrProg
Жыл бұрын
Thanks 🙏❤️
Great UI🌟🌟🌟
@AsmrProg
Жыл бұрын
Thanks 🙏❤️
Can you do a mini tutorial on the frosted glass look to vs code and when you resizing window and stuff?
@AsmrProg
Жыл бұрын
Hi, with glassit extension you can do it!
I really like glass morphism ....
What do you do for your vscode be transparence like this?
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 :(
@AsmrProg
Жыл бұрын
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 🙏
Beautifull video. Can i ask u which theme are you using into Visual Studio Code ?
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
@AsmrProg
Жыл бұрын
Hi, did you checked my source?!
that was perfect
@AsmrProg
8 ай бұрын
Thanks 🙏
thank you
@AsmrProg
4 ай бұрын
🙏❤️
the song time is not working on mine, what should I do to fix it?it looks just like the video
@AsmrProg
9 ай бұрын
Hi, maybe your code have bug! If you want i can send source 🙏
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!
@AsmrProg
10 ай бұрын
Hi, install it’s software on your pc, then change arrow keys function 🙏
@monishtech3607
10 ай бұрын
@@AsmrProg keyboards software??
@AsmrProg
10 ай бұрын
Yes, some keyboards have softwares to customize it!
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 😅😅
@AsmrProg
Жыл бұрын
Hi bro, what i need to do?!
@psMens
Жыл бұрын
@@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 😅😅
@AsmrProg
Жыл бұрын
Bro why you didn’t asked channel owner about it!
@psMens
Жыл бұрын
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😄😄
mashallah dadash dos dashti bego manam chi konam kanalam begire fadat
@AsmrProg
Жыл бұрын
Salam, eshghi, tel pm bede link about channel 😉🙏
for me the images for the covers are not showing up even though the source is right :/ how do i fix it?
@AsmrProg
10 ай бұрын
Your source have bug! Check my source code link on description 🙏
What should i change if i want to use Url from youtube to play instead of local? Anyway incredible work thank!
@AsmrProg
Жыл бұрын
Hi bro, for this you need to change full of code!!
How did you learnt this advanced coding? please make a tutorial on HTML, CSS & JS too it will be helpful!!!
@AsmrProg
9 ай бұрын
Yes! I’m working on 0 to 100 courses 😉
how to have the vscode's background just like yours ?
@AsmrProg
Жыл бұрын
Hi, it’s glassit extension
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!
@AsmrProg
11 ай бұрын
Yes, we will have video about internet connection check 😉
Hi, as I was practicing with you, I struggle to insert the picture and the audio. Is there anything that I'm missing?
@AsmrProg
Жыл бұрын
I need to see your code! But project source code available on my github, link on description 🙏
cool coding
@AsmrProg
11 ай бұрын
🙏❤️
what's your vscode extension for transparent background?
@AsmrProg
11 ай бұрын
Hi, Glassit extension, also there is a repository about all of my vscode settings in my github 🙏
how do you get the red trail and the green circal
@AsmrProg
Жыл бұрын
Hi, it’s screen recorder effects!
How can i change like your animation cursor ?
@AsmrProg
10 ай бұрын
Hi, it’s screen recorder effects!
Hi, how you refresh you're website and seeing changes without saving or clicking on refresh button in google? Love you're Videos
@AsmrProg
Жыл бұрын
In this video with live server extension 🙏
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 .-. :(
@AsmrProg
10 ай бұрын
Hi, remove section in js that we choose cover statically 🙏
@michelligan_
10 ай бұрын
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
@AsmrProg
10 ай бұрын
@MelodyMusicy thanks a lot 🙏 keep going 😉
Hey bro, is there an API to retrieve music and use them in our web instead of having to download them first?
@AsmrProg
Жыл бұрын
Hi, i will check it and tell you 😉
@NotJayG
Жыл бұрын
@@AsmrProg thanks! 😁
@AsmrProg
Жыл бұрын
🙏❤️
@NotJayG
Жыл бұрын
@@AsmrProg have you found it? 😁
@AsmrProg
Жыл бұрын
Yes, Spotify and soundcloud have api for it!
this is amazing. is there a reason why you dont use React or other library/framework?
@AsmrProg
Жыл бұрын
Hi, we will have React and frameworks complete playlist soon, first we need do projects for beginners! 🙏❤️
@immanuelsong
Жыл бұрын
thank you !!!
@AsmrProg
Жыл бұрын
🙏❤️
How to dynamically do this ? How to change path automatically
@AsmrProg
7 ай бұрын
Sorry? Can you explain it?
can u create apps with android studio ? if so .. plz do one simple app with it in the next vedio ☺
@AsmrProg
Жыл бұрын
Hi, with android studio no but with vim maybe 😉🙏
nice 🔥🔥
@AsmrProg
Жыл бұрын
Thanks 🙏❤️
Can you try to do this with react?😁
@AsmrProg
Жыл бұрын
Also we have a React music player in the future 😉🙏
@Maykzed
Жыл бұрын
@@AsmrProg
@AsmrProg
Жыл бұрын
🙏❤️
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
@AsmrProg
Жыл бұрын
Hi, you need upload projects on hosting sites, then you can get links 😉🙏
Will you show us your vs code extensions? Btw, love from india 👑❤️
@AsmrProg
Жыл бұрын
Hi, There is a post in my channel community page about my extensions 🙏
@parth_0116
Жыл бұрын
@@AsmrProg okk thx brother 💥
@AsmrProg
Жыл бұрын
🙏❤️
I need the setup for your editor
@AsmrProg
11 ай бұрын
Hi, check my github, there is a repository about all of my vscode settings 🙏
This is what I want
@AsmrProg
Жыл бұрын
Great, please like video to support us 🙏❤️
@TrxShah110
Жыл бұрын
@@AsmrProg Yeah of course
@AsmrProg
Жыл бұрын
Thanks 🙏❤️
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?
@AsmrProg
7 ай бұрын
Hi, you need to use its path in correct way!
@firecreeper21
7 ай бұрын
How would I do that? Im quite new to coding in vscode so what do I do?@@AsmrProg
@AsmrProg
7 ай бұрын
Path to the file!
@firecreeper21
7 ай бұрын
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
@AsmrProg
7 ай бұрын
@firecreeper21 maybe your path to assets are incorrect, remove “./“ from path if you added 🙏
What software you use for live server
@AsmrProg
Жыл бұрын
Hi, it’s live server extension!
so nice and clean👌 can I push my code to github ?
@AsmrProg
11 ай бұрын
Thanks, yes but it’s MIT licensed 🙏
@dark_sider7801
11 ай бұрын
@@AsmrProg thanks for mentioning it I🙏 your videos are so good and easy to understand
@AsmrProg
11 ай бұрын
🙏❤️
Hey, i can add more mp3 files in the assets folder right?
@AsmrProg
Жыл бұрын
Yes and also you need to add it in js code 🙏
@ankitsaha3218
Жыл бұрын
@@AsmrProg ok thanks👍
@ankitsaha3218
Жыл бұрын
@@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.
@AsmrProg
Жыл бұрын
🙏❤️
hey ASMR! where do you get your wallpapers?
@AsmrProg
Жыл бұрын
Hi, Pexels website!
how to make vscode one like yours
@AsmrProg
8 ай бұрын
Hi, please check my github, there is a repository about all of my vscode settings 🙏
Hi can you make tutorials?
@AsmrProg
9 ай бұрын
Courses?!
hello, how did you add your assets?
@AsmrProg
7 ай бұрын
Hi, i showed in video!
@jawnelcurato2864
7 ай бұрын
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?
@AsmrProg
7 ай бұрын
@jawnelcurato2864 great, you need to upload it on a hosting!
How mch xp do u have? I finished front end part of web development course
@AsmrProg
Жыл бұрын
Hi, what xp!
what keyboard do you use?
@AsmrProg
Жыл бұрын
Hi, in this video newmen gm610
is there some kind of api available for music data
@AsmrProg
5 ай бұрын
Hi, yes! Also spotify api, sorry for late response 🙏
@Kaarim030
5 ай бұрын
thanks man @@AsmrProg
@AsmrProg
4 ай бұрын
@ThePhantom030 🙏❤️
Hello ❤, it's a bit late, but can you please help a beginner make a shortcut for the pause button by pressing space? 😊❤😊❤😊❤😊❤
@AsmrProg
Жыл бұрын
Hi bro, you need to just add an event listener for it 😉
@ninjagames2368
Жыл бұрын
I am a bit shy, but I haven't learned that yet🤭
@AsmrProg
Жыл бұрын
Add event listener for space button then connect it to toggle pause play!
@ninjagames2368
Жыл бұрын
It worked 🎉
@ninjagames2368
Жыл бұрын
I want to tell you something You are annoying people with your amazing videos ❤️
and also I wanted to know what font size do you use!!
@matiasgigena1912
Жыл бұрын
like on your vscode
@AsmrProg
Жыл бұрын
Hi, it’s vscode default
@AsmrProg
Жыл бұрын
I’m using Cascadia Code font
what thema ?
@AsmrProg
Жыл бұрын
Hi, this one firefly pro
What keyboard are you using sir?
@AsmrProg
Жыл бұрын
Hi, in this video newmen gm610
@JustShmile
Жыл бұрын
@@AsmrProg Thanks sir keep it up!
@AsmrProg
Жыл бұрын
🙏❤️
u r good
@AsmrProg
Жыл бұрын
Thanks 🙏❤️
Hi, what is the name of this keyboard?
@AsmrProg
3 ай бұрын
Hi, newmen gm610 on this video 🙏
bro, assets part gives me error where to save ??
@AsmrProg
Жыл бұрын
Hi, what’s your error?! Check my source, link on description 🙏
@rashidryan1309
Жыл бұрын
@@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
@AsmrProg
Жыл бұрын
Check my source you will fix it too 😉 don’t miss new video, it’s great!!!
👍👍👍👍👍👍
@AsmrProg
Жыл бұрын
Thanks ❤️🙏
Can i use these for my another KZread channel by giving credit
@AsmrProg
Жыл бұрын
Hi, yes no problem 😉🙏❤️
what theme is this?
@AsmrProg
11 ай бұрын
Hi, check my github please, there is a repository about all of my vscode settings 🙏
where did / how did you learn web development broo???
@AsmrProg
Жыл бұрын
Hi bro, with courses in my country and searching sites and youtube 🙏❤️
@sathwikcm7
Жыл бұрын
@@AsmrProg oh Thankyou for replying bro , love your videos from India💖
@AsmrProg
Жыл бұрын
Thanks 🙏❤️
distinct
@AsmrProg
Жыл бұрын
Thanks 🙏❤️
Bro do you know backend web development
@AsmrProg
Жыл бұрын
Yes and also we will have it in channel in the future 😉
Opera is not working properly
@AsmrProg
Жыл бұрын
Hi, what’s problem? Please can you explain it?!
Wallpaper link please without telegram make an project on wallpaper download
@AsmrProg
Жыл бұрын
Hi, I don’t have its link! If you want i can send in telegram 🤦♂️
@Kathan_13
Жыл бұрын
@@AsmrProg ok I'll send you message
@AsmrProg
Жыл бұрын
🙏❤️
Hey! I also want to start how could I?
@AsmrProg
Жыл бұрын
Hi, it’s web coding!
@shivaayritik6680
Жыл бұрын
@@AsmrProg from where should I start ? ❤️❤️
@AsmrProg
Жыл бұрын
Html, css tutorials
@shivaayritik6680
Жыл бұрын
@@AsmrProg hey thanx buddy for ur reply, can i start from html?
@AsmrProg
Жыл бұрын
Yes, you need to start with html, then css and js
Plz provide project coding file
@AsmrProg
Жыл бұрын
Hi, project file link on description!
@ewton5578
Ай бұрын
Thank you ❤
brother what is your job? and how much you earn?
@AsmrProg
7 ай бұрын
Hi, sorry it’s private!
😍😍Hey man you are very talented and your very genuius 😇 😙what is your name?????????
@AsmrProg
Жыл бұрын
Thanks a lot, I’m Reza 🙏
@rashid5155
Жыл бұрын
"Reza" very nice name🥰
@AsmrProg
Жыл бұрын
Thanks ❤️
First time we hear some sounds in your video 😂
@AsmrProg
Жыл бұрын
Yes 😂❤️
Hey Brother I have a question Plz reply must
@AsmrProg
Жыл бұрын
Hi, what’s question?!
First!!!
@AsmrProg
Жыл бұрын
Yes! Please like video 🙏❤️