How to create Music player with pure HTML, CSS, JS | Learn to create music player in 2023

How to create Music player with pure HTML, CSS, JS. Learn to create a working music player using plain Javascript. In this tutorial you will not only learn Javascript to create this music player but you will learn to create smooth animations and transitions using CSS and JS.

📌 Social Links
—————————

This is modern web, I am Kunaal content on web development, So if you want to master web development make sure to subscribe to the channel.

⏰Time Stamps⏰
00:00 - Intro
00:17 - Demo
03:27 - Folder structure
04:06 - Home Section
13:32 - Music Player Section
27:56 - Playlist Section
33:19 - carousel
34:52 - Navigation
39:34 - Music Player JS

❤❤ Have a nice day ❤❤

Thanks for watching -----------

---------- 😎 Tags ---------
create music player in javascript,music player,music player javascript,music player using html css javascript,how to create a music player,music player in javascript,html css javascript music player,how to make music player in javascript,music player html css js,javascript music player,javascript music player tutorial,music player app in javascript,music player website html,html music player,how to create music player with pure html css js,music player javascript,javascript music player,music player,music player in javascript,html css javascript music player,create music player in javascript,javascript music player tutorial,music player using html css javascript,javascript,javascript music player app,javascript music app,music player app in javascript,audio player using css and javascript,custom music player in javascript,javascript project,music app using javascript

#javascript #musicplayer #htmlcss #webdev

[jeffreyclaybrook]

The CSS for controlling the different .active/.hide classes for the playback controls was a little hard to keep track of but I enjoyed this tutorial!

[baboon_hero]

Tnank you very much for this cool tutorial !

[alfayomegaperu]

PROBLEMA: Este código detiene todas las funciones: music.src = song.path;


const setMusic = (i) => {
seekBarr.value = 0;
let song = songs[i];
currentMusic = i;

music.src = song.path;

songName.innerHTML = song.name;
artistName.innerHTML = song.artist;
coverimage.src = song.cover;

setTimeout(() =>{
seekBarr.max = music.duration;
musicDuration.innerHTML = formatTime(music.duration);
}, 300);
currentMusicTime.innerHTML= '00 : 00';
queue.forEach(item =>

}

[ohenemills]

patreon link is still there, i thought you said you took it off.
and you don't have the source code any more if people pay for the patreon

[nikunjsinghal]

my photos arent changing with the song where can i find the prblm??

[AbdullaZufarov]

Hello, the video turned out well. But the video needs to be updated or deleted. Because I wrote the code for 1 day yesterday but the code didn't work. failed to download mp3 and got NAN error. Please change the video if you read the comment. Sorry for the rambling but I spent 1 day.

[ZEKSUDANRAYA]

Wow good
Reg audio playlist plus library audio

[hussenapptube]

Can it play multiple audios from raw folder

[ysoserious_lgn]

The repeat button (about52:55) when it is active it doesnt repeat the song. It stays on the same song and goes to the beginning of it but the song doesnt start, any help?

[aayushityagi]

Hey i need ur help related to this project, can u pls help me out this problem actually i wanna knw if we add a song category page in this project so i can't do it i don't knw how to deal with js to fix this problem, if u help me out so m very thankful to u....

[madison]

Question
My images are on "read only" and I cant see the pictures in a browser. How can I undo this?

[pimvles]

hello, awesome project. but i have one question. i have no
knowledge of HTML. I dont want to use the "play list"section. instead of that i want the "recently played"section to use to click on the image to play music.
i want the user can select music from the horizon scrolling sections in the begin screen.
Can please someone help me to this

[av]

Hi sir
I have a question can we add songs further to various tabs as BTS Collection and Justin Biber, etc..?
If yes then will you please explain how?

[linenoize]

Question: around 32:41 you change the image name from 1.png to 2.png however it also changes the song name to 2. What magic is this?

[muralirbharadwaj]

Hey Back button is not working in music-player-section

[linenoize]

question: when you click tab on "<img" it fills out <img src="" alt="", how do I setup such a macro?

[RaviJyothula]

I am not sure how could anyone follow this! I must be missing something!

[mulekavya]

Is there anyone who completed this project

[thejacraft]

The video description steas that you can download the code via patreon, but this is not the case. I paid the money and looked on Patreon but there is only one other music player. I wrote to the author who said he would look for the code. That is now 3 months ago and I havent received any answers to a new question. What a scam!

[thejacraft]

I paid on Patreon and downloaded the source code. but the result is completely different than shown in this video. could you please send me a download link on patreon, i can't find the player from this video