ASMR Programming - Mini Music Player - 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 75 - 100 days javascript coding ⚜️

Create a Mini Music Player with JavaScript! 🎶💻

Welcome to our web development tutorial on building a mini music player from scratch! In this beginner-friendly video, we'll walk you through the step-by-step process of creating a fully functional music player using HTML, CSS, and JavaScript.

Here's what you'll learn:
🔹 Setting up the basic structure of our HTML file to accommodate the music player.
🔹 Styling our music player with CSS to make it visually appealing and user-friendly.
🔹 Implementing JavaScript functionality to handle play, pause, next and previous.
🔹 Enhancing user experience with additional features like track progress control.

Whether you're new to web development or looking to expand your skills, this tutorial is perfect for you! By the end of this video, you'll have your very own mini music player ready to use, complete with all the essential features. Let's dive in and start coding! 💡🚀

source of all projects also will upload in AsmrProg github page :

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 😉

Every week i will update this playlist ✅

Video Contents :

00:00 - Intro (100 days of code - day 75)
00:33 - Warming hands
00:44 - Main codes
01:06 - Adding fontawesome
01:24 - Adding fonts
01:53 - Html coding
04:24 - Main styles
11:56 - Disk animations
12:36 - Main JS codes
13:49 - DOMContentLoaded
15:10 - loadSong function
16:29 - updateProgress()
17:39 - formatTime function
18:26 - togglePlayPause()
19:30 - nextSong function
20:05 - prevSong function
20:31 - playMusic function
21:15 - Seek function
2:18 - Final Result

Other Video's :

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

[AsmrProg]

Found this helpful? Smash the like button, subscribe, and ring the bell for more tutorials! Let's create awesome projects together! 💻✨❤

[Ahmed_Mob]

Wow you are a professional you are soo good in coding.

Edit: I am still learning HTML so wish me luck guys

[sci-khmer]

the first couple of seconds got some top 10 life hack video flashback

[ahmedalimughal]

Amazing video
Please you create a proper full tutorial web development ❤❤❤️

[greynoso]

Thank you! I've just applied for a web development course and your channel is really inspiring me! 👏

[BaD_OliVoK]

RUS: Вау! Ты сумашедший программист! USA: WOW! You a crazy programmer!

[sen-paii]

Wow! We also have html project this week and with this kind of music player/ Thank you for this advance teaching of codes

[waaaldooo]

I love your content, I want to learn how to program web pages like you ❤

[Bibkovich]

which video recording program do you use, did you like the mouse pointers

[Og_Universe]

Still waiting for the Zero to Hero playlist, for beginners....(Introduction to coding all this beautiful stuffs you code...we wanna learn from the scratch)most of us Don't understand anything but good work sir

[prshProg]

Wow ! nice job 😍. please work with react or nextJs (popular js frameworks) for a video ❤

[ahadawan]

i really like your cursor how can i get this?

[groundtechnology]

Nice video, Can you make video on creating an application for android plateform instead of web apps. Or which language is usable for an app.

[dhanwanthsingh]

There is some kind of issue with the Disk Cover and Disk Circle
Please look into the matter and help!!!!
Thanks for the project
Love

[HaZem.HaZe]

Make the next video about creating a communication application such as WhatsApp and Messenger

[rahulchowdhary]

it should be better when you use Volume adjustment, any how i have add that part in my project. Thank

[kyrinbuffalo]

Man I wish I had your skills. But I don't know if I can get there. 😥

[robs]

Great work! Thank you so much. I'm trying to build a website with a list of company which can be read on a map from a automatic gps localisation update.. Can you help me pls

[Offf_XD]

Please tell me how to make the mouse have a red line after moving. What is the name of the Keyboard you use in the video? Hope you reply to this comment soon!! 😁😁😍😍

[aref]

سلام عالی و جامع بود ممنونم فقط تم وی اس کد شما چیه بی زحمت میشه بگین؟