diff --git a/index.html b/index.html new file mode 100644 index 0000000..3c2a2e4 --- /dev/null +++ b/index.html @@ -0,0 +1,45 @@ + + + + + + + + + + + + + Songer + + +
+ noalbum +

Sample Title

+
John Krasinski
+
+ 0:00 + + 3:00 +
+
+ + + + + + + +
+ +

Stworzone przez Krzysztof Smaga

+
+ + + + + \ No newline at end of file diff --git a/resources/coverarts/alone.jpg b/resources/coverarts/alone.jpg new file mode 100644 index 0000000..1de7dc4 Binary files /dev/null and b/resources/coverarts/alone.jpg differ diff --git a/resources/coverarts/concalma.jpg b/resources/coverarts/concalma.jpg new file mode 100644 index 0000000..453f67d Binary files /dev/null and b/resources/coverarts/concalma.jpg differ diff --git a/resources/coverarts/crabrave.jpg b/resources/coverarts/crabrave.jpg new file mode 100644 index 0000000..e8962bf Binary files /dev/null and b/resources/coverarts/crabrave.jpg differ diff --git a/resources/coverarts/faceoff.jpg b/resources/coverarts/faceoff.jpg new file mode 100644 index 0000000..5062891 Binary files /dev/null and b/resources/coverarts/faceoff.jpg differ diff --git a/resources/coverarts/fearless.jpg b/resources/coverarts/fearless.jpg new file mode 100644 index 0000000..80f76d1 Binary files /dev/null and b/resources/coverarts/fearless.jpg differ diff --git a/resources/coverarts/intheend.jpg b/resources/coverarts/intheend.jpg new file mode 100644 index 0000000..69c9899 Binary files /dev/null and b/resources/coverarts/intheend.jpg differ diff --git a/resources/coverarts/mortals.jpg b/resources/coverarts/mortals.jpg new file mode 100644 index 0000000..c97ca08 Binary files /dev/null and b/resources/coverarts/mortals.jpg differ diff --git a/resources/coverarts/nekozilla.jpg b/resources/coverarts/nekozilla.jpg new file mode 100644 index 0000000..ed058ad Binary files /dev/null and b/resources/coverarts/nekozilla.jpg differ diff --git a/resources/img/noalbum.jpg b/resources/img/noalbum.jpg new file mode 100644 index 0000000..a06ab92 Binary files /dev/null and b/resources/img/noalbum.jpg differ diff --git a/resources/music/crabrave.mp3 b/resources/music/crabrave.mp3 new file mode 100644 index 0000000..74ef512 Binary files /dev/null and b/resources/music/crabrave.mp3 differ diff --git a/resources/music/fearless.mp3 b/resources/music/fearless.mp3 new file mode 100644 index 0000000..5b41695 Binary files /dev/null and b/resources/music/fearless.mp3 differ diff --git a/resources/music/mortals.mp3 b/resources/music/mortals.mp3 new file mode 100644 index 0000000..5dd20d8 Binary files /dev/null and b/resources/music/mortals.mp3 differ diff --git a/resources/music/nekozilla.mp3 b/resources/music/nekozilla.mp3 new file mode 100644 index 0000000..2d06678 Binary files /dev/null and b/resources/music/nekozilla.mp3 differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..dadf554 --- /dev/null +++ b/script.js @@ -0,0 +1,137 @@ +/* Konstruktor */ + +class Music { + constructor(id, name, authors, resource, coverart){ + this.id = id; + this.name = name; + this.authors = authors; + this.resource = resource; + this.coverart = coverart; + } +} + +let selected_song = 0, repeat_song = false, playing = false, showList = false; + +let songs = [ + new Music(1, "Crab Rave", "Noisestorm", "resources/music/crabrave.mp3", "resources/coverarts/crabrave.jpg"), + new Music(2, "Mortals", "Warriyo (feat. Laura Brehm)", "resources/music/mortals.mp3", "resources/coverarts/mortals.jpg"), + new Music(3, "Fearless pt. II", "Lost Sky (feat. Chris Linton)", "resources/music/fearless.mp3", "resources/coverarts/fearless.jpg"), + new Music(4, "Nekozilla", "Different Heaven", "resources/music/nekozilla.mp3", "resources/coverarts/nekozilla.jpg") +]; + +songs.forEach(element => { + let song = document.createElement("li"); + song.innerText = `${element.name} - ${element.authors}` + song.setAttribute("data-song", element.id - 1) + + song_list.appendChild(song); +}); + +function loadSong(selected_song){ + player.setAttribute("src", songs[selected_song].resource); + song_title.innerText = songs[selected_song].name; + song_author.innerText = songs[selected_song].authors; + song_coverart.src = songs[selected_song].coverart; + document.querySelectorAll("li").forEach(li => { + li.classList.remove("playing") + if(li.getAttribute("data-song") == selected_song) + li.classList.add("playing"); + }); + player.play(); + document.getElementsByClassName("body")[0].style.backgroundImage = `url('${songs[selected_song].coverart}')` +} + +let elements = document.querySelectorAll("li"); +elements.forEach(song => { + song.addEventListener("click", function(){ + selected_song = song.getAttribute("data-song"); + loadSong(selected_song); + }); +}) + +player.addEventListener("canplay", function(){ + time_playingbar.max = Math.floor(player.duration) + time_playingbar.value = 0 + + let seconds = player.duration % 60 < 10 ? "0" + parseInt(player.duration % 60) : parseInt(player.duration % 60) + song_length.innerText = parseInt(player.duration / 60) + ":" + seconds +}); + +player.addEventListener("timeupdate", function() { + let seconds = player.currentTime % 60 < 10 ? "0" + parseInt(player.currentTime % 60) : parseInt(player.currentTime % 60) + time_playing.innerText = parseInt(player.currentTime / 60) + ":" + seconds + time_playingbar.value = player.currentTime +}); + +player.addEventListener("ended", function(){ + if(!repeat_song) + selected_song = selected_song == songs.length - 1? 0 : (selected_song % 3) + 1; + + loadSong(selected_song); +}) + +repeat.addEventListener("click", function(){ + if(!repeat_song) { + document.querySelector(".fa-repeat").classList.add("repeat-on"); + repeat_song = true; + } else { + document.querySelector(".fa-repeat").classList.remove("repeat-on"); + repeat_song = false; + } +}); + +play.addEventListener("click", function() { + if(player.paused) + player.play(); + else + player.pause(); +}); + +time_playingbar.addEventListener("change", () => { player.currentTime = time_playingbar.value }); + +next.addEventListener("click", function(){ + selected_song = selected_song == songs.length - 1? 0 : (selected_song % 3) + 1; + loadSong(selected_song); +}); + +back.addEventListener("click", function(){ + selected_song = selected_song == 0 ? songs.length - 1 : (selected_song % 3) - 1; + loadSong(selected_song); +}); + +forward.addEventListener("click", function(){ + player.currentTime += (player.duration > player.currentTime + 10) ? 10 : 0; + time_playingbar.value += (player.duration > player.currentTime + 10) ? 10 : 0; +}); + +backward.addEventListener("click", function(){ + player.currentTime -= (0 < player.currentTime - 10) ? 10 : 0; + time_playingbar.value -= (0 < player.currentTime - 10) ? 10 : 0; +}) + +list.addEventListener("click", function(){ + if(!showList){ + document.querySelector(".list").style.display = "inline-block"; + document.querySelector(".fa-list").classList.add("open-list"); + showList = true; + } else { + document.querySelector(".list").style.display = "none"; + document.querySelector(".fa-list").classList.remove("open-list"); + showList = false; + } +}); + +setInterval(function(){ + if(!player.paused){ + play_icon.classList.remove("fa-play"); + play_icon.classList.add("fa-pause"); + } else { + play_icon.classList.remove("fa-pause"); + play_icon.classList.add("fa-play"); + } +}, 1000); + +loadSong(selected_song); + +console.log("Done!") + diff --git a/style.css b/style.css new file mode 100644 index 0000000..8a4b0f1 --- /dev/null +++ b/style.css @@ -0,0 +1,86 @@ +* { + box-sizing: border-box; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +body { + margin: 0; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; +} + +.body { + background-size: cover; + background-position: center; + backdrop-filter: blur(120px); +} + +.container { + padding: 32px; + border-radius: 8px; + border: 1px solid rgba(0,0,0,0.2); + box-shadow: 0 0 8px rgba(0,0,0,0.6); + background-color: rgba(0,0,0,0.5); + color: white; + text-align: center; +} + +.status { + display: grid; + grid-template-columns: 1fr 5fr 1fr; +} + +.controls { + display: flex; + justify-content: space-between; + margin-top: 32px; +} + + .controls button { + color: white; + border: none; + font-size: 32px; + padding: 8px; + background-color: transparent; + } + + .controls button:hover { + color: green; + } + +.list { + background-color: rgba(255, 255, 255, 0.2); + box-shadow: 0 0 4px rgba(0,0,0,0.6); + border-radius: 0 8px 8px 0; + padding: 16px; + color: white; + width: 25%; +} + + .list ul { + padding: 0; + } + + .list ul li { + list-style-type: none; + padding: 8px 4px; + border-bottom: 1px solid white; + } + + .list ul li.playing { + background-color: rgba(255, 255, 255, 0.4); + } + + .list ul li:hover { + background-color: rgba(255, 255, 255, 0.6); + } + +.open-list, .repeat-on { + color: green; +} + +#player { + display: none; +} \ No newline at end of file