88 lines
2.1 KiB
JavaScript
88 lines
2.1 KiB
JavaScript
const audio = document.getElementById('audioPlayer');
|
|
|
|
const playBtn = document.getElementById('playBtn');
|
|
const pauseBtn = document.getElementById('pauseBtn');
|
|
const resetBtn = document.getElementById('resetBtn');
|
|
|
|
const currentTimeSpan = document.getElementById('currentTime');
|
|
const totalTimeSpan = document.getElementById('totalTime');
|
|
|
|
const fileInput = document.getElementById('fileInput');
|
|
const loadFileBtn = document.getElementById('loadFileBtn');
|
|
|
|
const volume = document.getElementById('volume-slider');
|
|
|
|
const mediaInfo = document.querySelector('.media-info');
|
|
|
|
let timer = null;
|
|
|
|
let fileName;
|
|
let audioSrc;
|
|
|
|
/* Functions */
|
|
|
|
function toReadableTime(seconds) {
|
|
return new Date(seconds * 1000).toISOString().substring(14, 19);
|
|
}
|
|
|
|
function updateTime() {
|
|
currentTimeSpan.textContent = toReadableTime(audio.currentTime);
|
|
}
|
|
|
|
fileInput.addEventListener('change', (event) => {
|
|
const file = event.target.files[0];
|
|
if (file) {
|
|
audioSrc = URL.createObjectURL(file);
|
|
fileName = file.name.split('.mp3')[0];
|
|
}
|
|
});
|
|
|
|
/* Events */
|
|
|
|
loadFileBtn.addEventListener('click', () => {
|
|
audio.src = audioSrc;
|
|
audio.load();
|
|
mediaInfo.innerText = fileName;
|
|
updateTime();
|
|
});
|
|
|
|
audio.addEventListener('loadedmetadata', () => {
|
|
totalTimeSpan.textContent = toReadableTime(audio.duration);
|
|
});
|
|
|
|
playBtn.addEventListener('click', () => {
|
|
audio.play();
|
|
if (!timer) {
|
|
timer = setInterval(updateTime, 500);
|
|
}
|
|
document.title = `Playing ${fileName}`;
|
|
});
|
|
|
|
pauseBtn.addEventListener('click', () => {
|
|
audio.pause();
|
|
});
|
|
|
|
resetBtn.addEventListener('click', () => {
|
|
audio.pause();
|
|
audio.currentTime = 0;
|
|
updateTime();
|
|
});
|
|
|
|
audio.addEventListener('ended', () => {
|
|
clearInterval(timer);
|
|
timer = null;
|
|
});
|
|
|
|
audio.addEventListener('pause', () => {
|
|
clearInterval(timer);
|
|
timer = null;
|
|
});
|
|
|
|
volume.addEventListener("input", function (e) {
|
|
audio.volume = e.currentTarget.value / 100;
|
|
});
|
|
|
|
volume.addEventListener("dblclick", function (e) {
|
|
audio.volume = 0.5;
|
|
e.currentTarget.value = 50;
|
|
}); |