music control

This commit is contained in:
sky
2025-07-10 04:55:08 -04:00
parent daf54267b4
commit 9389d0c7e4
2 changed files with 41 additions and 4 deletions

View File

@ -49,9 +49,10 @@
let audioObject;
document.addEventListener("DOMContentLoaded", ()=>{
let music = {{ is_music }};
let audioObject;
if(music) {
let url = "{{ song_url }}";
let audioObject = new Audio(url);
audioObject = new Audio(url);
document.getElementById("enter").addEventListener("click", async ()=>{
document.getElementById("enter").style.backgroundColor = "#00000000"
document.getElementById("enter").style.backdropFilter = "blur(0px)"
@ -65,6 +66,33 @@
} else {
document.getElementById("enter").style.display = "none";
}
document.getElementById("playPause").addEventListener("click", ()=>{
if(audioObject.paused) {
document.getElementById("playPause").src = "/img/pause.svg";
audioObject.play();
} else {
document.getElementById("playPause").src = "/img/play.svg";
audioObject.pause();
}
});
document.getElementById("mute").addEventListener("click", ()=>{
if(audioObject.volume == 0) {
document.getElementById("mute").src = "/img/volume.svg";
audioObject.volume = 1;
} else {
document.getElementById("mute").src = "/img/muted.svg";
audioObject.volume = 0;
}
});
document.getElementById("playbar").addEventListener("input", (e) => {
audioObject.currentTime = document.getElementById("playbar").value/1000*audioObject.duration;
document.getElementById("playbar").value = (audioObject.currentTime / audioObject.duration) * 1000;
});
audioObject.addEventListener("timeupdate", (e) => {
document.getElementById("totalLength").innerText = `${Math.floor(audioObject.duration/60)}:${String(Math.floor(audioObject.duration%60)).padStart(2, "0")}`
document.getElementById("curPos").innerText = `${Math.floor(audioObject.currentTime/60)}:${String(Math.floor(audioObject.currentTime%60)).padStart(2, "0")}`
document.getElementById("playbar").value = (audioObject.currentTime / audioObject.duration) * 1000;
})
})
</script>
</head>
@ -74,12 +102,12 @@
<h1 class="title">{{ name }}'s profile</h1>
<section>
<img src="{{ user_pfp }}" class="pfp" />
<div>
<div class="profile-element">
<h1>{{ name }}</h1>
<p>/u/{{ username }}</p>
<div class="badges">{{ badges }}</div>
</div>
<div>
<div class="profile-element">
<h2>{{ song_title }}</h2>
<h3>{{ song_artist }}</h3>
<div class="samerow">
@ -92,7 +120,7 @@
<img id="mute" src="/img/volume.svg" class="controls"/>
</div>
</div>
<div>
<div class="profile-element">
<h2>Joined {{ join_date }}</h2>
<h2>Last online {{ online_time }}</h2>
</div>