iou1name/Pyrite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add volume and seek slider functionality

Browse Source
This commit is contained in:
iou1name 2024-11-28 20:26:00 -05:00
parent 60da14d4f5
commit 4f8edc0b43
2 changed files with 71 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
static/pyrite.js
View File

@ -2,11 +2,14 @@ var player;
var pos_int;
var analyser;
var audio_data;
var vol_prev;
function init() {
player = document.querySelector('#player');
player.addEventListener("ended", nextTrack);
player.addEventListener('ended', nextTrack);
player.addEventListener('loadedmetadata', display_duration);
player.addEventListener('timeupdate', update_position);
navigator.mediaSession.setActionHandler('play', playTrack);
navigator.mediaSession.setActionHandler('pause', pauseTrack);
@ -14,7 +17,23 @@ function init() {
navigator.mediaSession.setActionHandler('previoustrack', prevTrack);
navigator.mediaSession.setActionHandler('nexttrack', nextTrack);
pos_int = setInterval(update_position, 300);
let seek = document.querySelector('#seek-slider');
seek.addEventListener('input', function(){
player.currentTime = seek.value;
display_current_time();
});
let vol = document.querySelector('#volume-slider');
vol.addEventListener('input', function(){
player.volume = vol.value/100;
if (vol.value == 0) {
document.querySelector('#vol-btn').style.display = 'none';
document.querySelector('#vol-off-btn').style.display = 'initial';
} else {
document.querySelector('#vol-btn').style.display = 'initial';
document.querySelector('#vol-off-btn').style.display = 'none';
}
});
init_analyzer();
}
@ -74,15 +93,54 @@ function setMediaSession(track) {
}
function update_position() {
if (player.paused){return;}
if (player.duration > 0 === false){return;}
navigator.mediaSession.setPositionState({
duration: parseInt(player.duration),
duration: Math.floor(player.duration),
playbackRate: player.playbackRate,
position: parseInt(player.currentTime)
position: Math.floor(player.currentTime)
});
analyser.getByteTimeDomainData(audio_data);
document.querySelector('#seek-slider').value = Math.floor(player.currentTime);
display_current_time();
}
function calculate_time(raw_secs) {
let mins = Math.floor(raw_secs / 60);
let secs = Math.round(raw_secs % 60);
let ret = mins + ':' + String(secs).padStart(2,'0');
return ret;
}
function display_duration() {
let dur = document.querySelector('#duration');
dur.textContent = calculate_time(player.duration);
document.querySelector('#seek-slider').max = Math.floor(player.duration);
}
function display_current_time() {
cur = document.querySelector('#current-time');
cur.textContent = calculate_time(player.currentTime);
}
function volume_off() {
let vol = document.querySelector('#volume-slider');
vol_prev = vol.value;
vol.value = 0;
player.volume = 0;
document.querySelector('#vol-btn').style.display = 'none';
document.querySelector('#vol-off-btn').style.display = 'initial';
}
function volume_restore() {
let vol = document.querySelector('#volume-slider');
vol.value = vol_prev;
player.volume = vol_prev / 100;
document.querySelector('#vol-btn').style.display = 'initial';
document.querySelector('#vol-off-btn').style.display = 'none';
}
function init_analyzer() {

11
templates/index.html
View File

@ -46,13 +46,16 @@
<button id="next-track-btn" class="btn" onclick="nextTrack()">
<img id="prev" src="./static/prev.svg"></img>
</button>
<button id="mute-btn" class="btn">
<img id="mute" src="./static/volume-max.svg"</img>
<button id="vol-btn" class="btn" onclick="volume_off()">
<img id="vol" src="./static/volume-max.svg"</img>
</button>
<input id="volume-slider" type="range" max="100" value="0">
<button id="vol-off-btn" class="btn" onclick="volume_restore()" style="display:none">
<img id="vol-off" src="./static/volume-off.svg"</img>
</button>
<input id="volume-slider" type="range" max="100" value="100">
</div>
<div id="seek_controls">
<input id="seek-slider" type="range" max="100" value="0">
<input id="seek-slider" type="range" max="0" value="0">
<output id="current-time">0:00</output>/<output id="duration">0:00</output>
</div>
</div>