aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--hg.css5
-rw-r--r--index.html4
-rw-r--r--player.js66
3 files changed, 61 insertions, 14 deletions
diff --git a/hg.css b/hg.css
index 781fb33..80b2711 100644
--- a/hg.css
+++ b/hg.css
@@ -245,4 +245,9 @@ dialog::backdrop {
#file-upload {
display: none;
+}
+
+.controls {
+ font-style: italic;
+ font-size: larger;
} \ No newline at end of file
diff --git a/index.html b/index.html
index 53a55f2..0f5f54e 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,9 @@
<div class="modal-container">
<h3 class="text-center">Welcome to Retrowave Player</h3>
<p class="mt-5">Here are the controls:</p>
- <h4 class="mt-5">Play/Pause - Space/Click/Touch</h4>
+ <h4 class="mt-5">Play/Pause <span class="controls">x or Click or Touch</span></h4>
+ <h4 class="mt-5">Volume Up <span class="controls">w or Swipe Up</span></h4>
+ <h4 class="mt-5">Volume Down <span class="controls">s or Swipe Down</span></h4>
<p class="mt-5">(You can download the music history of your current browser by clicking the history link on the player)</p>
<button class="modal-close modal-exit" id="initButton">X</button>
</div>
diff --git a/player.js b/player.js
index 53cdefe..e3c1b49 100644
--- a/player.js
+++ b/player.js
@@ -9,6 +9,7 @@
const modalEl = document.getElementById("intro-modal");
const uploadInfoEl = document.getElementById("upload-info");
const fileUploadEl = document.getElementById("file-upload");
+ let volume = 1;
openDialog();
getMusic();
listenUploadFileChange();
@@ -16,13 +17,7 @@
coverArtEl.addEventListener("click", (event) => {
const isNoPause = event.target.classList.contains("no-pause");
if (howlerInstance && !isNoPause) {
- isPlaying = !isPlaying;
-
- if (isPlaying) {
- howlerInstance.play();
- } else {
- howlerInstance.pause();
- }
+ togglePlay();
}
});
@@ -37,11 +32,9 @@
function listenUploadFileChange() {
fileUploadEl.onchange = function () {
const selectedFile = fileUploadEl.files[0];
- console.log(selectedFile);
const reader = new FileReader();
reader.readAsText(selectedFile, "UTF-8");
reader.onload = function (event) {
- console.log(event.target.result);
try {
const uploadedPlaylist = JSON.parse(event.target.result);
localStorage.setItem("retrowave-history", event.target.result);
@@ -65,25 +58,36 @@
document.addEventListener("keyup", (event) => {
const { key } = event;
switch (key) {
- case "Space":
+ case "x":
+ togglePlay();
+ break;
+ case "a":
+ break;
+ case "d":
break;
- case "ArrowLeft":
+ case "w":
+ volumeUp();
break;
- case "ArrowRight":
+ case "s":
+ volumeDown();
break;
}
});
let touchstartX = 0;
let touchendX = 0;
+ let touchstartY = 0;
+ let touchendY = 0;
const musixPlayerEl = document.getElementsByClassName("music-player")[0];
if (musixPlayerEl) {
musixPlayerEl.addEventListener("touchstart", (e) => {
touchstartX = e.changedTouches[0].screenX;
+ touchstartY = e.changedTouches[0].screenY;
});
musixPlayerEl.addEventListener("touchend", (e) => {
touchendX = e.changedTouches[0].screenX;
+ touchendY = e.changedTouches[0].screenY;
checkDirection();
});
}
@@ -95,6 +99,13 @@
if (touchendX > touchstartX) {
// Swipe Right
}
+
+ if (touchendY < touchstartY) {
+ volumeUp();
+ }
+ if (touchendY > touchstartY) {
+ volumeDown();
+ }
}
function openDialog() {
@@ -130,6 +141,7 @@
playMusic();
},
});
+ setVolume();
isPlaying = true;
updateInfo(currentTrack);
@@ -138,6 +150,35 @@
howlerInstance.play();
}
+ function volumeDown() {
+ console.log(volume);
+ if(volume>0.1) {
+ volume -= 0.1;
+ }
+ setVolume();
+ }
+
+ function volumeUp() {
+ if(volume<1) {
+ volume += 0.1;
+ }
+ setVolume();
+ }
+
+ function setVolume() {
+ howlerInstance.volume(volume);
+ }
+
+ function togglePlay() {
+ isPlaying = !isPlaying;
+
+ if (isPlaying) {
+ howlerInstance.play();
+ } else {
+ howlerInstance.pause();
+ }
+ }
+
function updateInfo(trackDetails) {
titleEl.innerText = trackDetails.title;
coverArtEl.style.backgroundImage = `url("${retroWaveRu}${trackDetails.artworkUrl}")`;
@@ -146,7 +187,6 @@
function getHistory() {
let localHistoryStore = localStorage.getItem("retrowave-history") || "[]";
let historyArray = JSON.parse(localHistoryStore);
- console.log(historyArray);
return historyArray;
}