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('loadedmetadata', display_duration); player.addEventListener('timeupdate', update_position); navigator.mediaSession.setActionHandler('play', playTrack); navigator.mediaSession.setActionHandler('pause', pauseTrack); navigator.mediaSession.setActionHandler('stop', stopTrack); navigator.mediaSession.setActionHandler('previoustrack', prevTrack); navigator.mediaSession.setActionHandler('nexttrack', nextTrack); 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(); } async function get_rand_track() { let res = await fetch("./rand_track/") let data = await res.json(); return data; } async function nextTrack() { track = await get_rand_track(); player.src = track.source; playTrack(); } function prevTrack() { // TODO: implement a history array } async function playTrack() { if (!player.src) { return nextTrack(); } player.play(); navigator.mediaSession.playbackState = "playing"; setMediaSession(track); document.querySelector("#play-btn").style.display = "none"; document.querySelector("#pause-btn").style.display = "initial"; } function pauseTrack() { player.pause(); navigator.mediaSession.playbackState = "paused"; document.querySelector("#play-btn").style.display = "initial"; document.querySelector("#pause-btn").style.display = "none"; } function stopTrack() { player.pause(); player.load(); navigator.mediaSession.playbackState = "none"; document.querySelector("#play-btn").style.display = "initial"; document.querySelector("#pause-btn").style.display = "none"; } function setMediaSession(track) { navigator.mediaSession.metadata = new MediaMetadata({ title: track.title, artist: track.artist, album: track.album, artwork: track.artwork }); } function update_position() { navigator.mediaSession.setPositionState({ duration: Math.floor(player.duration), playbackRate: player.playbackRate, 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() { let audioCtx = new AudioContext(); analyser = audioCtx.createAnalyser(); let source = audioCtx.createMediaElementSource(player); source.connect(analyser); source.connect(audioCtx.destination); audio_data = new Uint8Array(analyser.frequencyBinCount); }