diff options
| author | Physick <96335032+DegustatorPonos@users.noreply.github.com> | 2025-12-13 12:32:15 +0500 |
|---|---|---|
| committer | Physick <96335032+DegustatorPonos@users.noreply.github.com> | 2025-12-13 12:32:15 +0500 |
| commit | ae11ed555cb350ea4c11fc1625f4a56229969ddd (patch) | |
| tree | 1d02b84131b713a2eed9a332ffac51997b0ec285 /static | |
| parent | 4b8ef84059e772ef7636c451356680ec5b0983c4 (diff) | |
Tracks meta
Diffstat (limited to 'static')
| -rw-r--r-- | static/index.css | 46 | ||||
| -rw-r--r-- | static/index.html | 24 | ||||
| -rw-r--r-- | static/index.js | 18 |
3 files changed, 84 insertions, 4 deletions
diff --git a/static/index.css b/static/index.css new file mode 100644 index 0000000..7748957 --- /dev/null +++ b/static/index.css @@ -0,0 +1,46 @@ +body { + background-color: wheat; + height: 100%; + overflow: hidden; + margin: 0px; + padding: 0px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.controls > * { + padding: 0px; + margin: 0px; +} + +.controls { + background-color: rgb(0%, 0%, 0%, 0.5); + height: 5%; + padding: 0px; + padding-top: 3px; + padding-left: 10px; + padding-right: 10px; + border-radius: 10px 10px 0px 0px; + margin: 0px; + display: flex; + flex-direction: row; + gap: 5px; + + border-radius: 10px 10px 0px 0px; +} + +.controlBtn { + background-color: rgb(0%, 0%, 0%, 0); + border: 1px solid black; + border-radius: 5px; + background-color: lightgray; + padding-left: 5px; + padding-right: 5px; + margin: 0px; +} + +.controlElem { + margin: 0px; + padding: 0px; +} diff --git a/static/index.html b/static/index.html index f6127d7..4ebe902 100644 --- a/static/index.html +++ b/static/index.html @@ -1,13 +1,29 @@ <html> <head> + <link href="index.css" rel="stylesheet" /> <script src="./index.js"></script> </head> <body> - <h1> xdx </h1> - <button onclick="GetSongs()"> Get songs </button> - <button onclick="SetRandomSong()"> Set random song </button> + <div class="Info"> + <h1> Rock culture exam </h1> + <h1 id="Artist" > Artist </h1> + <h1 id="Title" > Title </h1> + <h1 id="Album" > Album </h1> + <h1 id="Start" > Start position </h1> + </div> + <div class="controls"> + <button onclick="Pause()" class="controlBtn"> + <h1 onclick="Pause" class="controlElem"> Pause </h1> + </button> + <button onclick="Resume()" class="controlBtn"> + <h1 onclick="Pause" class="controlElem"> Resume </h1> + </button> + <button onclick="SetRandomSong()" class="controlBtn"> + <h1 onclick="Pause" class="controlElem"> Next song </h1> + </button> + </div> <audio id="mainAudio"> - <source type="audio/mpeg" src=""/> + <source type="audio/mpeg" /> </audio> </body> </html> diff --git a/static/index.js b/static/index.js index b7056b1..6cda2f7 100644 --- a/static/index.js +++ b/static/index.js @@ -12,5 +12,23 @@ function SetRandomSong() { console.log(body); player.src = "/api/getSong?name=" + encodeURI(body.Name); player.play(); + + document.getElementById("Artist").innerHTML = "Artist: " + body.Meta.Name; + document.getElementById("Title").innerHTML = "Title: " + body.Meta.Author; + document.getElementById("Album").innerHTML = "Album: " + body.Meta.Album; + document.getElementById("Start").innerHTML = "Start: " + body.Start + "s"; + })); } + +function Pause() { + const player = document.getElementById("mainAudio"); + player.pause(); + console.log("Paused audio"); +} + +function Resume() { + const player = document.getElementById("mainAudio"); + player.play(); + console.log("Paused audio"); +} |