diff --git a/index.html b/index.html new file mode 100644 index 0000000..6d9fe54 --- /dev/null +++ b/index.html @@ -0,0 +1,36 @@ + + + + + + Music App Made by Afraz + + + + + + +
+ +
+ Song Image +
+
+
+
+

+
+

+
+
+
+ + + + + +
+
+ + + diff --git a/music-app.js b/music-app.js new file mode 100644 index 0000000..34f2cb7 --- /dev/null +++ b/music-app.js @@ -0,0 +1,195 @@ +let leftbtn=document.querySelector(".leftbtn") +let righttbtn=document.querySelector(".rightbtn") + +let playbtn=document.querySelector(".playbtn") +let pausebtn=document.querySelector(".pausebtn") + +let piccontainer=document.querySelector(".pic") + +let singer=document.querySelector(".singername") + + +let audio=document.querySelector(".audio") +// Timers + +let progresscontainer=document.querySelector('.progresscontainer') +let starttime=document.querySelector('.starttime') +let endtime=document.querySelector('.endtime') + + +let pics=[ +{id:1,img:'pics/images(1).jpeg'}, +{id:2,img:'pics/images.jpeg'}, +{id:3,img:'pics/images3.jpg'}, + +]; +let picindex=0 + +let songs=['music/music1.mp3',"music/music2.mp3",'music/music3.mp3']; +let singername=["Tom","oggy","simon"]; +let singerindex=0; +let songindex=0; + +const showpic=(index)=>{ + piccontainer.innerHTML=` + ${picindex+1} + ` + //Will do load corresponding songs... + loadmusic(songs[index]); + // Will load corresponding sinernames... + showsingername(singername[singerindex]) + + +} + +const showsingername=(name)=>{ + singer.innerHTML=`${name}` +} + +const loadmusic=(song)=>{ + audio.src=song +} +function playsong(){ + audio.play() +} +function pausesong(){ + audio.pause() +} + +function prevsong(){ +songindex-- +if(songindex<0){ +songindex=songs.length-1; + +} +else{ + loadmusic[songs[songindex]] +} +playsong() +} +function nextsong() +{ +songindex++ +if(songindex>songs.length-1){ + songindex=0 +} loadmusic[songs[songindex]] +pausesong() + +} + +leftbtn.addEventListener("click",()=>{ +//singer name +singerindex-- +if(singerindex>0){ + singerindex-- + showsingername(singername[singerindex]) +} +else{ + singerindex=singername.length-1; + showsingername(singername[singerindex]) +} + + + //music +prevsong() +// check if pic len is 0 +if(picindex>0){ + picindex-- + showpic(picindex) +} +else{ + picindex=pics.length-1; + showpic(picindex) +} + +}) + +righttbtn.addEventListener("click",()=>{ +singerindex++ +if(singerindex{ + //1.music will get played... + + +//audio.play() +playsong() + //2.play btn will get hide + + + playbtn.classList.add('none'); + playbtn.classList.remove('show'); + //3.pause btn will get displayed.. + pausebtn.classList.add('show') + pausebtn.classList.remove('none'); +}) + + + + + + +pausebtn.addEventListener("click",()=>{ + //1.music will get played... +//audio.pause() +pausesong() + //2.play btn will get show + + + playbtn.classList.add('show'); + playbtn.classList.remove('none'); + + //3.pause btn will hide.. + pausebtn.classList.add('none') + pausebtn.classList.remove('show') +}) + +function updatetime(e) { + progresscontainer.style.display='block' + let endtimevalue = e.srcElement.duration; + let starttimevalue = e.srcElement.currentTime; + + + let formatTime = (time) => { + let minutes = Math.floor(time / 60); + let seconds = Math.floor(time % 60); + if (seconds < 10) seconds = "0" + seconds; + return minutes + ":" + seconds; + }; + + // Update the text content + endtime.textContent = formatTime(endtimevalue); + starttime.textContent = formatTime(starttimevalue); +} + +audio.addEventListener('timeupdate', updatetime); + +//when our muics got ended + +audio.addEventListener('ended',nextsong); +showpic(picindex) diff --git a/music/music1.mp3 b/music/music1.mp3 new file mode 100644 index 0000000..6c2620f Binary files /dev/null and b/music/music1.mp3 differ diff --git a/music/music2.mp3 b/music/music2.mp3 new file mode 100644 index 0000000..48802b1 Binary files /dev/null and b/music/music2.mp3 differ diff --git a/music/music3.mp3 b/music/music3.mp3 new file mode 100644 index 0000000..726fb84 Binary files /dev/null and b/music/music3.mp3 differ diff --git a/pics/images (1).jpeg b/pics/images (1).jpeg new file mode 100644 index 0000000..064e11d Binary files /dev/null and b/pics/images (1).jpeg differ diff --git a/pics/images(1).jpeg b/pics/images(1).jpeg new file mode 100644 index 0000000..e5a6d9c Binary files /dev/null and b/pics/images(1).jpeg differ diff --git a/pics/images.jpeg b/pics/images.jpeg new file mode 100644 index 0000000..606853f Binary files /dev/null and b/pics/images.jpeg differ diff --git a/pics/images3.jpg b/pics/images3.jpg new file mode 100644 index 0000000..4961ca4 Binary files /dev/null and b/pics/images3.jpg differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..7ccfc52 --- /dev/null +++ b/style.css @@ -0,0 +1,89 @@ +@import url('https://fonts.googleapis.com/css2?family=Meddon&display=swap'); + +body { + background: radial-gradient(circle, rgb(1, 8, 44) 0%, rgb(143, 2, 30) 100%); + font-family: "Meddon", cursive; + font-weight: 400; + font-style: normal; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.flex { + display: flex; + justify-content: center; + align-items: center; +} + + +.container { + width: 400px; + height: 440px; + border: 1px solid white; + border-radius: 7px; + box-shadow: 0 14px 30px rgba(255, 255, 255, 0.377); + backdrop-filter: blur(6px); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 20px; + text-align: center; +} + +.pic { + margin-bottom: 20px; +} + +.singername { + color: white; + font-size: 30px; + margin-bottom: 20px; +} + +.songimg { + border: 1px solid white; + width: 150px; + height: 150px; + border-radius: 150px; +} + +.control { + font-size: 33px; + color: white; + display: flex; + justify-content: center; + gap: 20px; + width: 100%; + margin-top: 20px; + cursor: pointer; +} + +.none { + display: none; +} + +.show { + display: block; +} + +.leftbtn { + transform: rotate(-180deg); +} + +.progresscontainer{ + + background-color: #fcb900; + color: white; + padding: 15px 45px; + display: none; + transition: 0.5s linear; +} +.progressbar{ + width: 40px; + color: red; + height: 3px; +} \ No newline at end of file