select first element on down arrow press, cleanup
This commit is contained in:
parent
75c86b5fd8
commit
e09c2545a1
GPG key ID:
D044E84C5BE01605
352
webmusic.js
352
webmusic.js
|
|
@ -1,261 +1,265 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
const audioPlayer = new Audio();
|
const audioPlayer = new Audio();
|
||||||
let selectedItem = 0;
|
let selectedItem = 0;
|
||||||
let playingItem = 0;
|
let playingItem = 0;
|
||||||
let playerState = 'idle';
|
let playerState = 'idle';
|
||||||
let continuous = true;
|
let continuous = true;
|
||||||
let repeat = false;
|
let repeat = false;
|
||||||
let total = 0;
|
let total = 0;
|
||||||
let onlyDirs = true;
|
let onlyDirs = true;
|
||||||
|
|
||||||
const handleKeyEvent = (event) => {
|
const handleKeyEvent = (event) => {
|
||||||
if (event.ctrlKey === true || event.altKey === true || event.metaKey == true) return;
|
if (event.ctrlKey === true || event.altKey === true || event.metaKey === true) return;
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
|
||||||
switch (event.key) {
|
switch (event.key) {
|
||||||
case ' ':
|
case ' ':
|
||||||
case 'p':
|
case 'p':
|
||||||
if (onlyDirs !== false) return;
|
if (onlyDirs !== false) return;
|
||||||
if (playerState == 'idle' && total !== 0) {
|
if (playerState === 'idle' && total !== 0) {
|
||||||
if (document.getElementById(playingItem).classList.contains('dir')) {
|
if (document.getElementById(playingItem).classList.contains('dir')) {
|
||||||
return nextTrack();
|
return nextTrack();
|
||||||
}
|
}
|
||||||
|
|
||||||
playSong(playingItem)
|
playSong(playingItem)
|
||||||
} else {
|
} else {
|
||||||
togglePlayback();
|
togglePlayback();
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'r':
|
case 'r':
|
||||||
toggleRepeat();
|
toggleRepeat();
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'c':
|
case 'c':
|
||||||
toggleContinue();
|
toggleContinue();
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'ArrowUp':
|
case 'ArrowUp':
|
||||||
selectPreviousItem();
|
selectPreviousItem();
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'ArrowDown':
|
case 'ArrowDown':
|
||||||
selectNextItem();
|
selectNextItem();
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'ArrowLeft':
|
case 'ArrowLeft':
|
||||||
if (audioPlayer.currentTime < 10) {
|
if (audioPlayer.currentTime < 10) {
|
||||||
audioPlayer.currentTime = 0;
|
audioPlayer.currentTime = 0;
|
||||||
} else {
|
} else {
|
||||||
audioPlayer.currentTime = audioPlayer.currentTime-10;
|
audioPlayer.currentTime = audioPlayer.currentTime - 10;
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'ArrowRight':
|
case 'ArrowRight':
|
||||||
audioPlayer.currentTime = audioPlayer.currentTime+10;
|
audioPlayer.currentTime = audioPlayer.currentTime + 10;
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'Enter':
|
case 'Enter':
|
||||||
document.getElementById(selectedItem).click()
|
document.getElementById(selectedItem).click()
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'Escape':
|
case 'Escape':
|
||||||
document.getElementById('back').click();
|
document.getElementById('back').click();
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case '0':
|
case '0':
|
||||||
case '1':
|
case '1':
|
||||||
case '2':
|
case '2':
|
||||||
case '3':
|
case '3':
|
||||||
case '4':
|
case '4':
|
||||||
case '5':
|
case '5':
|
||||||
case '6':
|
case '6':
|
||||||
case '7':
|
case '7':
|
||||||
case '8':
|
case '8':
|
||||||
case '9':
|
case '9':
|
||||||
audioPlayer.currentTime = audioPlayer.duration / 100 * (event.key * 10);
|
audioPlayer.currentTime = audioPlayer.duration / 100 * (event.key * 10);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const initState = () => {
|
const initState = () => {
|
||||||
const dirElements = document.querySelectorAll('.dir');
|
const dirElements = document.querySelectorAll('.dir');
|
||||||
const fileElements = document.querySelectorAll('.file');
|
const fileElements = document.querySelectorAll('.file');
|
||||||
let id = 0;
|
let id = 0;
|
||||||
|
|
||||||
document.getElementById('state').addEventListener('click', togglePlayback)
|
document.getElementById('state').addEventListener('click', togglePlayback)
|
||||||
document.getElementById('repeatButton').addEventListener('click', toggleRepeat)
|
document.getElementById('repeatButton').addEventListener('click', toggleRepeat)
|
||||||
document.getElementById('continuousButton').addEventListener('click', toggleContinue)
|
document.getElementById('continuousButton').addEventListener('click', toggleContinue)
|
||||||
|
|
||||||
audioPlayer.addEventListener('canplay', () => {
|
audioPlayer.addEventListener('canplay', () => {
|
||||||
audioPlayer.play();
|
audioPlayer.play();
|
||||||
});
|
});
|
||||||
|
|
||||||
audioPlayer.addEventListener('play', () => {
|
audioPlayer.addEventListener('play', () => {
|
||||||
setPlayerState('playing');
|
setPlayerState('playing');
|
||||||
});
|
});
|
||||||
|
|
||||||
audioPlayer.addEventListener('pause', () => {
|
audioPlayer.addEventListener('pause', () => {
|
||||||
setPlayerState('paused');
|
setPlayerState('paused');
|
||||||
});
|
});
|
||||||
|
|
||||||
audioPlayer.addEventListener('error', () => {
|
audioPlayer.addEventListener('error', () => {
|
||||||
setPlayerState('error loading track');
|
setPlayerState('error loading track');
|
||||||
});
|
});
|
||||||
|
|
||||||
audioPlayer.addEventListener('ended', () => {
|
audioPlayer.addEventListener('ended', () => {
|
||||||
setPlayerState('idle');
|
setPlayerState('idle');
|
||||||
nextTrack();
|
nextTrack();
|
||||||
});
|
});
|
||||||
|
|
||||||
audioPlayer.addEventListener('timeupdate', () => {
|
audioPlayer.addEventListener('timeupdate', () => {
|
||||||
updatePlayerState();
|
updatePlayerState();
|
||||||
});
|
});
|
||||||
|
|
||||||
dirElements.forEach((element) => {
|
dirElements.forEach((element) => {
|
||||||
element.id = id++;
|
element.id = id++;
|
||||||
});
|
});
|
||||||
|
|
||||||
fileElements.forEach((element) => {
|
fileElements.forEach((element) => {
|
||||||
element.id = id++;
|
element.id = id++;
|
||||||
onlyDirs = false;
|
onlyDirs = false;
|
||||||
|
|
||||||
element.addEventListener('click', (event) => {
|
element.addEventListener('click', (event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
playSong(event.target.id);
|
playSong(event.target.id);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
total = id;
|
total = id;
|
||||||
updatePlayerState();
|
updatePlayerState();
|
||||||
updateButtonState();
|
updateButtonState();
|
||||||
}
|
}
|
||||||
|
|
||||||
const setPlayerState = (state) => {
|
const setPlayerState = (state) => {
|
||||||
playerState = state;
|
playerState = state;
|
||||||
|
|
||||||
console.log('now in state: ' + state);
|
console.log('now in state: ' + state);
|
||||||
updatePlayerState();
|
updatePlayerState();
|
||||||
}
|
}
|
||||||
|
|
||||||
const updatePlayerState = () => {
|
const updatePlayerState = () => {
|
||||||
let statestr = '[' + playerState;
|
let statestr = '[' + playerState;
|
||||||
|
|
||||||
if (!audioPlayer.paused) {
|
if (!audioPlayer.paused) {
|
||||||
statestr += ' ' + formatTime(audioPlayer.currentTime) + '/' + formatTime(audioPlayer.duration);
|
statestr += ' ' + formatTime(audioPlayer.currentTime) + '/' + formatTime(audioPlayer.duration);
|
||||||
}
|
}
|
||||||
|
|
||||||
statestr += ']';
|
statestr += ']';
|
||||||
document.getElementById('state').innerHTML = statestr;
|
document.getElementById('state').innerHTML = statestr;
|
||||||
}
|
}
|
||||||
|
|
||||||
const updateButtonState = () => {
|
const updateButtonState = () => {
|
||||||
if (repeat !== false) {
|
if (repeat !== false) {
|
||||||
document.getElementById('repeatButton').classList.add('active');
|
document.getElementById('repeatButton').classList.add('active');
|
||||||
} else {
|
} else {
|
||||||
document.getElementById('repeatButton').classList.remove('active');
|
document.getElementById('repeatButton').classList.remove('active');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (continuous !== false) {
|
if (continuous !== false) {
|
||||||
document.getElementById('continuousButton').classList.add('active');
|
document.getElementById('continuousButton').classList.add('active');
|
||||||
} else {
|
} else {
|
||||||
document.getElementById('continuousButton').classList.remove('active');
|
document.getElementById('continuousButton').classList.remove('active');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const playSong = (id) => {
|
const playSong = (id) => {
|
||||||
const element = document.getElementById(id);
|
const element = document.getElementById(id);
|
||||||
|
|
||||||
if (element === null) return;
|
if (element === null) return;
|
||||||
if (element.classList.contains('dir')) return;
|
if (element.classList.contains('dir')) return;
|
||||||
|
|
||||||
if (document.getElementsByClassName('playing').length > 0) {
|
if (document.getElementsByClassName('playing').length > 0) {
|
||||||
document.getElementsByClassName('playing')[0].classList.remove('playing');
|
document.getElementsByClassName('playing')[0].classList.remove('playing');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (document.getElementsByClassName('selected').length > 0) {
|
if (document.getElementsByClassName('selected').length > 0) {
|
||||||
document.getElementsByClassName('selected')[0].classList.remove('selected');
|
document.getElementsByClassName('selected')[0].classList.remove('selected');
|
||||||
}
|
}
|
||||||
|
|
||||||
audioPlayer.pause()
|
audioPlayer.pause()
|
||||||
|
|
||||||
playingItem = element.id;
|
playingItem = element.id;
|
||||||
element.classList.add('playing');
|
element.classList.add('playing');
|
||||||
|
|
||||||
audioPlayer.src = element.href;
|
audioPlayer.src = element.href;
|
||||||
|
|
||||||
setPlayerState('loading');
|
setPlayerState('loading');
|
||||||
audioPlayer.load();
|
audioPlayer.load();
|
||||||
}
|
}
|
||||||
|
|
||||||
const togglePlayback = () => {
|
const togglePlayback = () => {
|
||||||
if (audioPlayer.paused) {
|
if (audioPlayer.paused) {
|
||||||
audioPlayer.play();
|
audioPlayer.play();
|
||||||
} else {
|
} else {
|
||||||
audioPlayer.pause();
|
audioPlayer.pause();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const toggleRepeat = () => {
|
const toggleRepeat = () => {
|
||||||
repeat = !repeat;
|
repeat = !repeat;
|
||||||
continuous = !repeat;
|
continuous = !repeat;
|
||||||
audioPlayer.loop = repeat;
|
audioPlayer.loop = repeat;
|
||||||
updateButtonState();
|
updateButtonState();
|
||||||
}
|
}
|
||||||
|
|
||||||
const toggleContinue = () => {
|
const toggleContinue = () => {
|
||||||
continuous = !continuous;
|
continuous = !continuous;
|
||||||
updateButtonState();
|
updateButtonState();
|
||||||
}
|
}
|
||||||
|
|
||||||
const previousTrack = () => {
|
const previousTrack = () => {
|
||||||
if (!continuous) return;
|
if (!continuous) return;
|
||||||
if (playingItem-- === 0) playingItem = total-1;
|
if (playingItem-- === 0) playingItem = total - 1;
|
||||||
|
|
||||||
if (document.getElementById(playingItem).classList.contains('dir')) {
|
if (document.getElementById(playingItem).classList.contains('dir')) {
|
||||||
return previousTrack();
|
return previousTrack();
|
||||||
}
|
}
|
||||||
|
|
||||||
playSong(playingItem);
|
playSong(playingItem);
|
||||||
}
|
}
|
||||||
|
|
||||||
const nextTrack = () => {
|
const nextTrack = () => {
|
||||||
if (!continuous) return;
|
if (!continuous) return;
|
||||||
if (++playingItem === total) playingItem = 0;
|
if (++playingItem === total) playingItem = 0;
|
||||||
|
|
||||||
if (document.getElementById(playingItem).classList.contains('dir')) {
|
if (document.getElementById(playingItem).classList.contains('dir')) {
|
||||||
return nextTrack();
|
return nextTrack();
|
||||||
}
|
}
|
||||||
|
|
||||||
playSong(playingItem);
|
playSong(playingItem);
|
||||||
}
|
}
|
||||||
|
|
||||||
const selectPreviousItem = () => {
|
const selectPreviousItem = () => {
|
||||||
if (selectedItem-- === 0) selectedItem = total-1;
|
if (selectedItem-- === 0) selectedItem = total - 1;
|
||||||
updateSelectedItem();
|
updateSelectedItem();
|
||||||
}
|
}
|
||||||
|
|
||||||
const selectNextItem = () => {
|
const selectNextItem = () => {
|
||||||
if (++selectedItem === total) selectedItem = 0;
|
if (selectedItem === 0 && document.getElementsByClassName('selected').length === 0) {
|
||||||
updateSelectedItem();
|
document.getElementById(selectedItem).classList.add('selected');
|
||||||
|
} else {
|
||||||
|
if (++selectedItem === total) selectedItem = 0;
|
||||||
|
updateSelectedItem();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const updateSelectedItem = () => {
|
const updateSelectedItem = () => {
|
||||||
if (document.getElementsByClassName('selected').length > 0) {
|
if (document.getElementsByClassName('selected').length > 0) {
|
||||||
document.getElementsByClassName('selected')[0].classList.remove('selected');
|
document.getElementsByClassName('selected')[0].classList.remove('selected');
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById(selectedItem).classList.add('selected');
|
document.getElementById(selectedItem).classList.add('selected');
|
||||||
}
|
}
|
||||||
|
|
||||||
const formatTime = (secs) => {
|
const formatTime = (secs) => {
|
||||||
secs = Math.round(secs);
|
secs = Math.round(secs);
|
||||||
const minutes = Math.floor(secs / 60) || 0;
|
const minutes = Math.floor(secs / 60) || 0;
|
||||||
const seconds = (secs - minutes * 60) || 0;
|
const seconds = (secs - minutes * 60) || 0;
|
||||||
return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
|
return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', initState);
|
document.addEventListener('DOMContentLoaded', initState);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue