217 lines
5.8 KiB
JavaScript
217 lines
5.8 KiB
JavaScript
var player;
|
|
var audio_ctx;
|
|
var analyser;
|
|
var audio_data;
|
|
var canvas_ctx;
|
|
var draw_loop;
|
|
var vol_prev;
|
|
|
|
function init() {
|
|
player = document.querySelector('#player');
|
|
init_analyzer();
|
|
init_canvas();
|
|
|
|
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';
|
|
}
|
|
});
|
|
}
|
|
|
|
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;
|
|
update_now_playing(track);
|
|
playTrack();
|
|
}
|
|
|
|
function prevTrack() {
|
|
// TODO: implement a history array
|
|
}
|
|
|
|
async function playTrack() {
|
|
if (!player.src) {
|
|
return nextTrack();
|
|
}
|
|
player.play();
|
|
navigator.mediaSession.playbackState = "playing";
|
|
|
|
if (document.querySelector("#visualizer-select").value === 'bar_graph') {
|
|
bar_graph();
|
|
}
|
|
|
|
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_now_playing(track) {
|
|
track.artwork.pop(1); // remove lower resolution option
|
|
document.querySelector('#now_playing_artist').textContent = track.artist;
|
|
document.querySelector('#now_playing_album').textContent = track.album;
|
|
document.querySelector('#now_playing_title').textContent = track.title;
|
|
document.querySelector('#cover_art').firstChild.src = track.artwork[0].src;
|
|
setMediaSession(track);
|
|
}
|
|
|
|
function update_position() {
|
|
if (!player.duration){return;}
|
|
navigator.mediaSession.setPositionState({
|
|
duration: Math.floor(player.duration),
|
|
playbackRate: player.playbackRate,
|
|
position: Math.floor(player.currentTime)
|
|
});
|
|
|
|
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 select_visualizer(event) {
|
|
if (event.target.value == 'bar_graph') {
|
|
bar_graph();
|
|
} else if (event.target.value == 'disabled') {
|
|
cancelAnimationFrame(draw_loop);
|
|
let canvas = document.querySelector('#visualizer');
|
|
canvas_ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
}
|
|
|
|
function init_analyzer() {
|
|
audio_ctx = new AudioContext();
|
|
analyser = audio_ctx.createAnalyser();
|
|
let source = audio_ctx.createMediaElementSource(player);
|
|
|
|
source.connect(analyser);
|
|
source.connect(audio_ctx.destination);
|
|
}
|
|
|
|
function init_canvas() {
|
|
let canvas = document.querySelector('#visualizer');
|
|
canvas_ctx = canvas.getContext('2d');
|
|
canvas_ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
|
|
function bar_graph() {
|
|
analyser.fftSize = 256;
|
|
analyser.minDecibels = -90;
|
|
analyser.maxDecibels = -10;
|
|
analyser.smoothingTimeConstant = 0.85;
|
|
audio_data = new Uint8Array(analyser.frequencyBinCount);
|
|
|
|
draw();
|
|
}
|
|
|
|
function draw() {
|
|
draw_loop = requestAnimationFrame(draw);
|
|
|
|
analyser.getByteTimeDomainData(audio_data);
|
|
let canvas = document.querySelector('#visualizer');
|
|
|
|
canvas_ctx.fillStyle = "rgb(0 0 0)";
|
|
canvas_ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
const barWidth = (canvas.width / analyser.frequencyBinCount) * 2.5;
|
|
let barHeight;
|
|
let x = 0;
|
|
|
|
for (let i = 0; i < analyser.frequencyBinCount; i++) {
|
|
barHeight = audio_data[i];
|
|
|
|
canvas_ctx.fillStyle = `rgb(${barHeight + 100} 50 50)`;
|
|
canvas_ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
|
|
|
|
x += barWidth + 1;
|
|
}
|
|
}
|