diff --git a/Music Player/Images/cover 1.png b/Music Player/Images/cover 1.png
new file mode 100644
index 00000000..9f7c441f
Binary files /dev/null and b/Music Player/Images/cover 1.png differ
diff --git a/Music Player/Images/cover 2.png b/Music Player/Images/cover 2.png
new file mode 100644
index 00000000..6f560146
Binary files /dev/null and b/Music Player/Images/cover 2.png differ
diff --git a/Music Player/Images/cover 3.png b/Music Player/Images/cover 3.png
new file mode 100644
index 00000000..7eff0506
Binary files /dev/null and b/Music Player/Images/cover 3.png differ
diff --git a/Music Player/Images/cover 4.png b/Music Player/Images/cover 4.png
new file mode 100644
index 00000000..6b975591
Binary files /dev/null and b/Music Player/Images/cover 4.png differ
diff --git a/Music Player/Images/cover 5.png b/Music Player/Images/cover 5.png
new file mode 100644
index 00000000..24f0ae8a
Binary files /dev/null and b/Music Player/Images/cover 5.png differ
diff --git a/Music Player/Images/nxt.png b/Music Player/Images/nxt.png
new file mode 100644
index 00000000..4d73ca0d
Binary files /dev/null and b/Music Player/Images/nxt.png differ
diff --git a/Music Player/Images/pre.png b/Music Player/Images/pre.png
new file mode 100644
index 00000000..2b563f7e
Binary files /dev/null and b/Music Player/Images/pre.png differ
diff --git a/Music Player/Img.png b/Music Player/Img.png
new file mode 100644
index 00000000..e44da82b
Binary files /dev/null and b/Music Player/Img.png differ
diff --git a/Music Player/Music/Song 1.mp3 b/Music Player/Music/Song 1.mp3
new file mode 100644
index 00000000..fd9a2b0d
Binary files /dev/null and b/Music Player/Music/Song 1.mp3 differ
diff --git a/Music Player/Music/Song 2.mp3 b/Music Player/Music/Song 2.mp3
new file mode 100644
index 00000000..c5e44027
Binary files /dev/null and b/Music Player/Music/Song 2.mp3 differ
diff --git a/Music Player/Music/Song 3.mp3 b/Music Player/Music/Song 3.mp3
new file mode 100644
index 00000000..02e7cf41
Binary files /dev/null and b/Music Player/Music/Song 3.mp3 differ
diff --git a/Music Player/Music/Song 4.mp3 b/Music Player/Music/Song 4.mp3
new file mode 100644
index 00000000..fa2ee530
Binary files /dev/null and b/Music Player/Music/Song 4.mp3 differ
diff --git a/Music Player/Music/Song 5.mp3 b/Music Player/Music/Song 5.mp3
new file mode 100644
index 00000000..829873c6
Binary files /dev/null and b/Music Player/Music/Song 5.mp3 differ
diff --git a/Music Player/app.js b/Music Player/app.js
new file mode 100644
index 00000000..75b9b8b4
--- /dev/null
+++ b/Music Player/app.js
@@ -0,0 +1,107 @@
+let currentMusic = 0;
+
+const music = document.querySelector('#audio');
+
+const seekBar = document.querySelector('.seek-bar');
+const songName = document.querySelector('.music-name');
+const artistName = document.querySelector('.artist-name');
+const disc = document.querySelector('.disc');
+const currentTime = document.querySelector('.current-time');
+const musicDuration = document.querySelector('.song-duration');
+const playBtn = document.querySelector('.play-btn');
+const forwardBtn = document.querySelector('.forward-btn');
+const backwardBtn = document.querySelector('.backward-btn');
+
+playBtn.addEventListener('click', () =>{
+ if(playBtn.className.includes('pause')){
+ music.play();
+ }
+ else{
+ music.pause();
+ }
+
+ playBtn.classList.toggle('pause');
+ disc.classList.toggle('play');
+})
+
+//set music function
+
+const setMusic = (i) =>{
+ seekBar.value = 0; // set range slide value to 0;
+ let song = songs[i];
+ currentMusic = i;
+ music.src = song.path;
+
+ songName.innerHTML = song.name;
+ artistName.innerHTML = song.artist;
+ disc.style.backgroundImage = `url('${song.cover}')`;
+
+ currentTime.innerHTML = '00:00';
+ setTimeout( ()=>{
+ seekBar.max = music.duration;
+ musicDuration.innerHTML = formatTime(music.duration);
+ },300);
+
+}
+
+setMusic(0);
+
+//formating time in minutes and seconds format
+
+const formatTime = (time) =>{
+ let min = Math.floor(time/60);
+ if(min<10){
+ min = `0${min}`;
+ }
+ let sec = Math.floor(time%60);
+ if(sec<10){
+ sec = `0${sec}`;
+ }
+ return `${min} : ${sec}`;
+}
+
+//seek bar
+setInterval(() => {
+ seekBar.value = music.currentTime;
+ currentTime.innerHTML = formatTime(music.currentTime);
+
+ if(Math.floor(music.currentTime) == Math.floor(seekBar.max)){
+ forwardBtn.click();
+ }
+}, 500);
+
+seekBar.addEventListener('change', () =>{
+ music.currentTime = seekBar.value;
+})
+
+
+const playMusic = () =>{
+ music.play();
+ playBtn.classList.remove('pause');
+ disc.classList.add('play');
+}
+//forward and backward button
+forwardBtn.addEventListener('click' , () =>{
+ if(currentMusic >= songs.length -1){
+ currentMusic = 0;
+ }
+ else{
+ currentMusic = currentMusic + 1;
+ }
+ setMusic(currentMusic);
+ //playBtn.click();
+ playMusic();
+})
+
+backwardBtn.addEventListener('click' , () =>{
+ if(currentMusic <= 0){
+ currentMusic = songs.length - 1;
+ }
+ else{
+ currentMusic = currentMusic - 1;
+ }
+ setMusic(currentMusic);
+ // playBtn.click();
+ playMusic();
+})
+
diff --git a/Music Player/data.js b/Music Player/data.js
new file mode 100644
index 00000000..104d08fa
--- /dev/null
+++ b/Music Player/data.js
@@ -0,0 +1,32 @@
+let songs = [
+ {
+ name: 'song 1',
+ path: 'Music/Song 1.mp3',
+ artist: 'artist 1',
+ cover: 'Images/cover 1.png'
+ },
+ {
+ name: 'song 2',
+ path: 'Music/Song 2.mp3',
+ artist: 'artist 2',
+ cover: 'Images/cover 2.png'
+ },
+ {
+ name: 'song 3',
+ path: 'Music/Song 3.mp3',
+ artist: 'artist 3',
+ cover: 'Images/cover 3.png'
+ },
+ {
+ name: 'song 4',
+ path: 'Music/Song 4.mp3',
+ artist: 'artist 4',
+ cover: 'Images/cover 4.png'
+ },
+ {
+ name: 'song 5',
+ path: 'Music/Song 5.mp3',
+ artist: 'artist 5',
+ cover: 'Images/cover 5.png'
+ },
+]
\ No newline at end of file
diff --git a/Music Player/index.html b/Music Player/index.html
new file mode 100644
index 00000000..8d59098e
--- /dev/null
+++ b/Music Player/index.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+ My Music Player
+
+
+
+
+
+
+
+
+
+
+
song one
+
Artist
+
+
+
+
+
+ 00:00
+ 00:00
+
+
+
+
+
+
+
+
+