music control
This commit is contained in:
@ -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>
|
||||
|
Reference in New Issue
Block a user