diff --git a/MusicPlayer/AdyaTech/images/img1.jpg b/MusicPlayer/AdyaTech/images/img1.jpg new file mode 100644 index 000000000..0aeed2855 Binary files /dev/null and b/MusicPlayer/AdyaTech/images/img1.jpg differ diff --git a/MusicPlayer/AdyaTech/images/img2.jpg b/MusicPlayer/AdyaTech/images/img2.jpg new file mode 100644 index 000000000..307626c48 Binary files /dev/null and b/MusicPlayer/AdyaTech/images/img2.jpg differ diff --git a/MusicPlayer/AdyaTech/images/img3.jpg b/MusicPlayer/AdyaTech/images/img3.jpg new file mode 100644 index 000000000..73853ffa7 Binary files /dev/null and b/MusicPlayer/AdyaTech/images/img3.jpg differ diff --git a/MusicPlayer/AdyaTech/images/img4.jpg b/MusicPlayer/AdyaTech/images/img4.jpg new file mode 100644 index 000000000..8782294b9 Binary files /dev/null and b/MusicPlayer/AdyaTech/images/img4.jpg differ diff --git a/MusicPlayer/AdyaTech/index.html b/MusicPlayer/AdyaTech/index.html new file mode 100644 index 000000000..19aba593e --- /dev/null +++ b/MusicPlayer/AdyaTech/index.html @@ -0,0 +1,95 @@ + + + + + + Document + + + + +
+
+
+ +
+ +
+ +

Now Playing

+ +
+ +
+ +

Song Title

+

Artist Name

+
+ +
+
+ 00:12 + 04:10 +
+ +
+ +
+ +
+ + + +
+ + + +
+

50

+ + +
+
+
+ + +
+ +
+ +

Playlist

+ +
+ +
+ +
+
+
+
+
+ + + + + diff --git a/MusicPlayer/AdyaTech/music.js b/MusicPlayer/AdyaTech/music.js new file mode 100644 index 000000000..07e1b2496 --- /dev/null +++ b/MusicPlayer/AdyaTech/music.js @@ -0,0 +1,26 @@ +let trackList = [ + { + name: "A New Beginning", + path: "./music/bensound-anewbeginning.mp3", + img: "./images/img1.jpg", + singer: "Bensound.com", + }, + { + name: "Hey", + path: "./music/bensound-hey.mp3", + img: "./images/img2.jpg", + singer: "Bensound.com", + }, + { + name: "Little Idea", + path: "./music/bensound-littleidea.mp3", + img: "./images/img3.jpg", + singer: "Bensound.com", + }, + { + name: "Sunny", + path: "./music/bensound-sunny.mp3", + img: "./images/img4.jpg", + singer: "Bensound.com", + }, +]; diff --git a/MusicPlayer/AdyaTech/music/bensound-anewbeginning.mp3 b/MusicPlayer/AdyaTech/music/bensound-anewbeginning.mp3 new file mode 100644 index 000000000..2721dd8e8 Binary files /dev/null and b/MusicPlayer/AdyaTech/music/bensound-anewbeginning.mp3 differ diff --git a/MusicPlayer/AdyaTech/music/bensound-hey.mp3 b/MusicPlayer/AdyaTech/music/bensound-hey.mp3 new file mode 100644 index 000000000..6c2620f52 Binary files /dev/null and b/MusicPlayer/AdyaTech/music/bensound-hey.mp3 differ diff --git a/MusicPlayer/AdyaTech/music/bensound-littleidea.mp3 b/MusicPlayer/AdyaTech/music/bensound-littleidea.mp3 new file mode 100644 index 000000000..58a13f193 Binary files /dev/null and b/MusicPlayer/AdyaTech/music/bensound-littleidea.mp3 differ diff --git a/MusicPlayer/AdyaTech/music/bensound-sunny.mp3 b/MusicPlayer/AdyaTech/music/bensound-sunny.mp3 new file mode 100644 index 000000000..d612ccbf1 Binary files /dev/null and b/MusicPlayer/AdyaTech/music/bensound-sunny.mp3 differ diff --git a/MusicPlayer/AdyaTech/script.js b/MusicPlayer/AdyaTech/script.js new file mode 100644 index 000000000..8aae59ae3 --- /dev/null +++ b/MusicPlayer/AdyaTech/script.js @@ -0,0 +1,236 @@ +const play = document.querySelector(".play"), + previous = document.querySelector(".prev"), + next = document.querySelector(".next"), + // + trackImage = document.querySelector(".track-image"), + title = document.querySelector(".title"), + artist = document.querySelector(".artist"), + // + trackCurrentTime = document.querySelector(".current-time"), + trackDuration = document.querySelector(".duration-time"), + slider = document.querySelector(".duration-slider"), + // + showVolume = document.querySelector("#show-volume"), + volumeIcon = document.querySelector("#volume-icon"), + currentVolume = document.querySelector("#volume"), + // + autoPlayBtn = document.querySelector(".play-all"), + // + hamBurger = document.querySelector(".fa-bars"), + closeIcon = document.querySelector(".fa-times"), + // + musicPlaylist = document.querySelector(".music-playlist"), + pDiv = document.querySelector(".playlist-div"), + playList = document.querySelector(".playlist"); + +let timer; +let autoplay = 0; +let indexTrack = 0; +let songIsPlaying = false; +let track = document.createElement("audio"); + +// All Event Listeners +play.addEventListener("click", justPlay); +next.addEventListener("click", nextSong); +previous.addEventListener("click", prevSong); +autoPlayBtn.addEventListener("click", autoPlayToggle); +volumeIcon.addEventListener("click", muteSound); +currentVolume.addEventListener("change", changeVolume); +slider.addEventListener("change", changeDuration); +track.addEventListener("timeupdate", songTimeUpdate); +hamBurger.addEventListener("click", showPlayList); +closeIcon.addEventListener("click", hidePlayList); + +// Load Tracks +function loadTrack(indexTrack) { + clearInterval(timer); + resetSlider(); + + track.src = trackList[indexTrack].path; + trackImage.src = trackList[indexTrack].img; + title.innerHTML = trackList[indexTrack].name; + artist.innerHTML = trackList[indexTrack].singer; + track.load(); + + timer = setInterval(updateSlider, 1000); +} +loadTrack(indexTrack); + +// Play song or Pause song +function justPlay() { + if (songIsPlaying == false) { + playSong(); + } else { + pauseSong(); + } +} + +// Play Song +function playSong() { + track.play(); + songIsPlaying = true; + play.innerHTML = ''; +} + +// Pause Song +function pauseSong() { + track.pause(); + songIsPlaying = false; + play.innerHTML = ''; +} + +// Next song +function nextSong() { + if (indexTrack < trackList.length - 1) { + indexTrack++; + loadTrack(indexTrack); + playSong(); + } else { + indexTrack = 0; + loadTrack(indexTrack); + playSong(); + } +} + +// prev song +function prevSong() { + if (indexTrack > 0) { + indexTrack--; + loadTrack(indexTrack); + playSong(); + } else { + indexTrack = trackList.length - 1; + loadTrack(indexTrack); + playSong(); + } +} + +// Mute Sound +function muteSound() { + track.volume = 0; + showVolume.innerHTML = 0; + currentVolume.value = 0; +} + +// Change Volume +function changeVolume() { + showVolume.value = currentVolume.value; + track.volume = currentVolume.value / 100; +} + +// Change Duration +function changeDuration() { + let sliderPosition = track.duration * (slider.value / 100); + track.currentTime = sliderPosition; +} + +// Auto Play +function autoPlayToggle() { + if (autoplay == 0) { + autoplay = 1; + autoPlayBtn.style.background = "#db6400"; + } else { + autoplay = 0; + autoPlayBtn.style.background = "#ccc"; + } +} + +// Reste Slider +function resetSlider() { + slider.value = 0; +} + +// Update Slider +function updateSlider() { + let position = 0; + + if (!isNaN(track.duration)) { + position = track.currentTime * (100 / track.duration); + slider.value = position; + } + + if (track.ended) { + play.innerHTML = ''; + if (autoplay == 1 && indexTrack < trackList.length - 1) { + indexTrack++; + loadTrack(indexTrack); + playSong(); + } else if (autoplay == 1 && indexTrack == trackList.length - 1) { + indexTrack = 0; + loadTrack(indexTrack); + playSong(); + } + } +} + +// Update Current song time +function songTimeUpdate() { + if (track.duration) { + let curmins = Math.floor(track.currentTime / 60); + let cursecs = Math.floor(track.currentTime - curmins * 60); + let durmins = Math.floor(track.duration / 60); + let dursecs = Math.floor(track.duration - durmins * 60); + + if (dursecs < 10) { + dursecs = "0" + dursecs; + } + if (durmins < 10) { + durmins = "0" + durmins; + } + if (curmins < 10) { + curmins = "0" + curmins; + } + if (cursecs < 10) { + cursecs = "0" + cursecs; + } + trackCurrentTime.innerHTML = curmins + ":" + cursecs; + trackDuration.innerHTML = durmins + ":" + dursecs; + } else { + trackCurrentTime.innerHTML = "00" + ":" + "00"; + trackDuration.innerHTML = "00" + ":" + "00"; + } +} + +// Show PlayList +function showPlayList() { + musicPlaylist.style.transform = "translateX(0)"; +} +// Hide PlayList +function hidePlayList() { + musicPlaylist.style.transform = "translateX(-100%)"; +} + +// Display Tracks in playlist +let counter = 1; +function displayTracks() { + for (let i = 0; i < trackList.length; i++) { + console.log(trackList[i].name); + let div = document.createElement("div"); + div.classList.add("playlist"); + div.innerHTML = ` + ${counter++} +

${trackList[i].name}

+ `; + pDiv.appendChild(div); + } + playFromPlaylist(); +} + +displayTracks(); + +// Play song from the playlist +function playFromPlaylist() { + pDiv.addEventListener("click", (e) => { + if (e.target.classList.contains("single-song")) { + // alert(e.target.innerHTML); + const indexNum = trackList.findIndex((item, index) => { + if (item.name === e.target.innerHTML) { + return true; + } + }); + loadTrack(indexNum); + playSong(); + hidePlayList(); + } + }); +} diff --git a/MusicPlayer/AdyaTech/styles.css b/MusicPlayer/AdyaTech/styles.css new file mode 100644 index 000000000..5faec7b4f --- /dev/null +++ b/MusicPlayer/AdyaTech/styles.css @@ -0,0 +1,271 @@ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); + +:root { + --white: #fff; + --black: #1c2b2d; + --blue: #31326f; + --light-blue: #005490; + --color-primary: #9d0191; + --color-sec: #db6400; + --color-grey: #eee; + --color-dark-grey: #222831; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-size: 10px; +} + +body { + font-family: "Open Sans", sans-serif; +} + +p { + font-size: 1.6rem; + line-height: 1.5; +} + +img { + width: 100%; +} + +.container { + max-width: 900px; + margin: 0 auto; + padding: 0 20px; +} + +/* Start Here */ +body { + background: var(--color-dark-grey); +} + +.box { + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.music { + position: relative; + background: var(--white); + width: 25rem; + border-radius: 5px; + padding: 1rem; + overflow: hidden; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1rem; +} + +.header .fas { + font-size: 1.6rem; +} + +.fa-bars { + cursor: pointer; +} + +.header h2 { + font-size: 1.6rem; + font-weight: 400; +} + +/* Details */ +.details { + margin: 2rem 0; + text-align: center; +} + +.details img { + width: 70%; + border: 3px solid var(--color-sec); + margin-bottom: 1rem; +} + +.details .artist { + font-size: 1.2rem; + font-weight: 600; + color: #2974ff; +} + +/* Controls */ +.controls { + background: var(--color-dark-grey); + padding: 2rem 1rem; + border-radius: 5rem 5rem 0 0; +} + +.song-timer { + color: var(--white); + display: flex; + justify-content: space-between; + font-weight: 600; + margin: 1rem 0; +} + +/* Range slider */ +input[type="range"] { + appearance: none; + width: 50%; + outline: none; + height: 2px; + margin: 0 10%; +} + +input[type="range"]::-webkit-slider-thumb { + appearance: none; + height: 2rem; + width: 2rem; + background: #2974ff; + border-radius: 50%; + cursor: pointer; +} + +.duration input[type="range"] { + width: 80%; +} + +/* Buttons */ +.buttons { + text-align: center; + margin: 2rem auto; + width: 60%; + padding: 5px 0; + background: var(--white); + border-radius: 5px; +} + +.buttons > * { + border: none; + outline: none; + background: var(--white); + padding: 1rem; + cursor: pointer; + color: var(--color-dark-grey); +} + +.play { + background: #2974ff; + width: 4rem; + height: 4rem; + border-radius: 50%; + color: var(--white); +} + +.play-all { + display: block; + margin: 0 auto; + padding: 3px; + cursor: pointer; + border: none; + border-radius: 3px; +} + +.volume input[type="range"] { + margin: 0; +} + +/* Volume */ +.volume { + display: flex; + justify-content: center; + align-items: center; + margin: 2rem 0 1rem 0; +} +.volume p { + background: #2974ff; + color: var(--white); + font-size: 1.4rem; + height: 2rem; + padding: 0 3px; + margin-right: 8px; +} + +.volume i { + background: var(--color-sec); + color: var(--white); + font-size: 1.2rem; + height: 2rem; + padding: 0 3px; + margin-right: 8px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +} + +/* Music Playlist */ +.music-playlist { + position: absolute; + top: 0; + left: 0; + padding: 1rem; + background: rgba(0, 0, 0, 0.9); + width: 100%; + height: 100%; + transform: translateX(-100%); + transition: all 0.5s; +} + +.playlist-header { + color: var(--white); + padding: 5px 0; + border-bottom: 1px solid var(--color-grey); +} + +.playlist-header .fa-times { + cursor: pointer; +} +.playlist-div { + width: 100%; + height: 80vh; + overflow-y: auto; +} + +/* Playlist Scroll Bar */ +.playlist-div::-webkit-scrollbar { + height: 5px; + width: 4px; + border: 1px solid #d5d5d5; + background: #d5d5d5; +} + +.playlist-div::-webkit-scrollbar-track { + --webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); +} + +.playlist-div::-webkit-scrollbar-thumb { + background-color: var(--color-primary); + outline: 1px solid #eee; +} + +.playlist { + display: flex; + align-items: center; + color: var(--white); +} + +.song-index { + font-size: 1.4rem; + margin-right: 5px; +} + +.playlist p { + width: 90%; + font-size: 1.4rem; + border-bottom: 1px solid var(--color-grey); + padding: 5px 0; + cursor: pointer; +}