Add files via upload

2024-02-25 22:26:29 +01:00
parent 6b6f81bd53
commit 82d32ae09b
16 changed files with 268 additions and 0 deletions
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="pl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="author" content="Krzysztof 'KrzysiekSiemv' Smaga">
+    <meta name="application-name" content="Songer - UI">
+    
+    <script src="https://kit.fontawesome.com/e4c3899c65.js" crossorigin="anonymous"></script>
+
+    <link rel="stylesheet" href="style.css">
+
+    <title>Songer</title>
+</head>
+<body class="body">
+    <div class="container">
+        <img src="resources/img/noalbum.jpg" id="song_coverart" alt="noalbum" height="400px">
+        <h2 id="song_title">Sample Title</h3>
+        <h5 id="song_author">John Krasinski</h5>
+        <div class="status">
+            <span id="time_playing">0:00</span>
+            <input type="range" name="time_playingbar" id="time_playingbar">
+            <span id="song_length">3:00</span>
+        </div>
+        <div class="controls">
+            <button id="repeat"><i class="fa-solid fa-repeat"></i></button>
+            <button id="back"><i class="fa-solid fa-backward-step"></i></button>
+            <button id="backward"><i class="fa-solid fa-backward"></i></button>
+            <button id="play"><i id="play_icon" class="fa-solid fa-play"></i></button>
+            <button id="forward"><i class="fa-solid fa-forward"></i></button>
+            <button id="next"><i class="fa-solid fa-forward-step"></i></button>
+            <button id="list"><i class="fa-solid fa-list"></i></button>
+        </div>
+        <audio src="" id="player" controls></audio>
+        <p>Stworzone przez <a href="https://smaga.me" style="color: white;">Krzysztof Smaga</a></p>
+    </div>
+    <div class="list" style="display: none;">
+        <h3>Twoja lista odtwarzania</h3>
+        <ul id="song_list">
+        </ul>
+    </div>
+
+    <script src="script.js" defer></script>
+</body>
+</html>
@@ -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!")
+
@@ -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;
+}