diff --git a/musicplayer/README.md b/musicplayer/README.md new file mode 100644 index 00000000..76a132c1 --- /dev/null +++ b/musicplayer/README.md @@ -0,0 +1 @@ +# musicplayer diff --git a/musicplayer/images/Cover letter.pdf b/musicplayer/images/Cover letter.pdf new file mode 100644 index 00000000..cdf85802 Binary files /dev/null and b/musicplayer/images/Cover letter.pdf differ diff --git a/musicplayer/images/Decendents.png b/musicplayer/images/Decendents.png new file mode 100644 index 00000000..358880d8 Binary files /dev/null and b/musicplayer/images/Decendents.png differ diff --git a/musicplayer/images/Mood.png b/musicplayer/images/Mood.png new file mode 100644 index 00000000..39ec306f Binary files /dev/null and b/musicplayer/images/Mood.png differ diff --git a/musicplayer/images/butter.png b/musicplayer/images/butter.png new file mode 100644 index 00000000..2ad404f3 Binary files /dev/null and b/musicplayer/images/butter.png differ diff --git a/musicplayer/images/killme.png b/musicplayer/images/killme.png new file mode 100644 index 00000000..bb455987 Binary files /dev/null and b/musicplayer/images/killme.png differ diff --git a/musicplayer/images/leave_the_door_open.png b/musicplayer/images/leave_the_door_open.png new file mode 100644 index 00000000..bf095cff Binary files /dev/null and b/musicplayer/images/leave_the_door_open.png differ diff --git a/musicplayer/index.html b/musicplayer/index.html new file mode 100644 index 00000000..9cf35f15 --- /dev/null +++ b/musicplayer/index.html @@ -0,0 +1,40 @@ + + + + + + + + + Music Player + + +

Music Player

+
+
+

Butter

+
+
+
+
+ +
+ music-cover +
+ +
+ + + +
+
+ + + \ No newline at end of file diff --git a/musicplayer/index.js b/musicplayer/index.js new file mode 100644 index 00000000..b6497178 --- /dev/null +++ b/musicplayer/index.js @@ -0,0 +1,111 @@ +const musicsContainer=document.querySelector('.music-container') +const playBtn=document.querySelector('#play'); +const prevBtn=document.querySelector('#prev'); +const nextBtn=document.querySelector('#next'); +const audio=document.querySelector('#audio') +const progress=document.querySelector('.progress') +const progressContainer=document.querySelector('.progress-container') +const title =document.querySelector('#title') +const cover=document.querySelector('#cover') + +//song title +const songs=['butter','killme','Decendents','leave_the_door_open','mood'] + +//keep track of songs(default) +let songIndex =4; + +//intaialy load song info DOM +loadSongs(songs[songIndex]); + +//update song details +function loadSongs(song){ + title.innerHTML= song + audio.src =`music/${song}.mp3`; + cover.src =`images/${song}.png` +} + +function playSong(){ + musicsContainer.classList.add('play') + playBtn.querySelector('i.fas').classList.remove('fa-play') + playBtn.querySelector('i.fas').classList.add('fa-pause') + + //audio playing + audio.play(); + +} + +function pauseSong(){ + musicsContainer.classList.remove('play') + playBtn.querySelector('i.fas').classList.add('fa-play') + playBtn.querySelector('i.fas').classList.remove('fa-pause') + + //audio paused + audio.pause(); +} + +//prev song function +function prevsong(){ + songIndex--; + + if(songIndex < 0){ + songIndex = songs.length - 1 + } + + loadSongs(songs[songIndex]); + + playSong(); +} + +//next song function +function nextsong(){ + songIndex++; + + if(songIndex > songs.length - 1){ + songIndex = 0 + } + + loadSongs(songs[songIndex]); + + playSong(); + +} + +//progress +function updateProgress(e){ + const {duration,currentTime}=e.srcElement; + const progresspercent = (currentTime / duration)*100; + progress.style.width=`${progresspercent}%` + +} + +//controling progress +function setProgress(e){ + const width =this.clientWidth; + const clientX =e.offsetX + const duration=audio.duration; + + + audio.currentTime=(clientX/width)*duration; + +} + +//eventlistner +playBtn.addEventListener('click',()=>{ + const isPlaying =musicsContainer.classList.contains('play') + + if(isPlaying){ + pauseSong() + } + else{ + playSong() + } +}); + +//change song event +prevBtn.addEventListener('click',prevsong); +nextBtn.addEventListener('click',nextsong); + +audio.addEventListener('timeupdate',updateProgress); + +progressContainer.addEventListener('click', setProgress); +audio.addEventListener('ended',nextsong); \ No newline at end of file diff --git a/musicplayer/music/Decendents.mp3 b/musicplayer/music/Decendents.mp3 new file mode 100644 index 00000000..1877b8ad Binary files /dev/null and b/musicplayer/music/Decendents.mp3 differ diff --git a/musicplayer/music/butter.mp3 b/musicplayer/music/butter.mp3 new file mode 100644 index 00000000..2632a808 Binary files /dev/null and b/musicplayer/music/butter.mp3 differ diff --git a/musicplayer/music/killme.mp3 b/musicplayer/music/killme.mp3 new file mode 100644 index 00000000..9f0cf6fa Binary files /dev/null and b/musicplayer/music/killme.mp3 differ diff --git a/musicplayer/music/mood.mp3 b/musicplayer/music/mood.mp3 new file mode 100644 index 00000000..311f9791 Binary files /dev/null and b/musicplayer/music/mood.mp3 differ diff --git a/musicplayer/style.css b/musicplayer/style.css new file mode 100644 index 00000000..8da4d7e5 --- /dev/null +++ b/musicplayer/style.css @@ -0,0 +1,143 @@ +@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Display:wght@300&display=swap'); + +* { + box-sizing: border-box; +} + +body { + background-image: linear-gradient( + 0deg, + rgba(247, 247, 247, 1) 23.8%, + rgba(255,255,51)92% + ); + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-family: '', cursive; + margin: 0; + +} + + +.music-container { + background-color: #fff; + border-radius: 15px; + box-shadow: 0 20px 20px 0 rgba(255, 255, 102, 0.6); + display: flex; + padding: 20px 30px; + position: relative; + margin: 100px 0; + z-index: 10; +} + +.img-container { + position: relative; + width: 110px; +} + +.img-container::after { + content: ''; + background-color: #fff; + border-radius: 50%; + position: absolute; + bottom: 100%; + left: 50%; + width: 20px; + height: 20px; + transform: translate(-50%, 50%); +} + +.img-container img { + border-radius: 50%; + object-fit: cover; + height: 110px; + width: inherit; + position: absolute; + bottom: 0; + left: 0; + animation: rotate 3s linear infinite; + + animation-play-state: paused; +} + +.music-container.play .img-container img { + animation-play-state: running; +} + +@keyframes rotate { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +.navigation { + display: flex; + align-items: center; + justify-content: center; + z-index: 1; +} + +.action-btn { + background-color: #fff; + border: 0; + color: #dfdbdf; + font-size: 20px; + cursor: pointer; + padding: 10px; + margin: 0 20px; +} + +.action-btn.action-btn-big { + color: #cdc2d0; + font-size: 30px; +} + +.action-btn:focus { + outline: 0; +} + +.music-info { + background-color: rgba(255, 255,102, 0.5); + border-radius: 15px 15px 0 0; + position: absolute; + top: 0; + left: 20px; + width: calc(100% - 40px); + padding: 10px 10px 10px 150px; + opacity: 0; + transform: translateY(0%); + transition: transform 0.3s ease-in, opacity 0.3s ease-in; + z-index: 0; +} +.music-info h4{ + margin: 0; +} + +.music-container.play .music-info { + opacity: 1; + transform: translateY(-100%); +} + +.progress-container{ + background: white; + border-radius: 5px; + cursor: pointer; + margin: 10px 0; + height: 4px; + width: 100%; + +} + +.progress{ + background-color: black; + border-radius: 5px; + height: 100%; + width: 50%; + transition: width 0.1s linear; +}