62 lines
2.5 KiB
JavaScript
62 lines
2.5 KiB
JavaScript
|
const audioList = document.getElementsByClassName('audioPlayer');
|
||
|
|
var changingSlider = false
|
||
|
|
|
||
|
|
function convertTime(timeInSec)
|
||
|
|
{
|
||
|
|
const minutes = Math.floor(timeInSec / 60);
|
||
|
|
const seconds = Math.floor(timeInSec % 60);
|
||
|
|
const returnedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
|
||
|
|
return `${minutes}:${returnedSeconds}`;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
Array.prototype.forEach.call(audioList, audio => {
|
||
|
|
// setup duration in slider and counter
|
||
|
|
audioElement = audio.getElementsByClassName("audioElement")[0];
|
||
|
|
audioElement.addEventListener('loadedmetadata', event => {
|
||
|
|
event.target.parentElement.getElementsByClassName("audioSlider")[0].max = event.target.duration
|
||
|
|
event.target.parentElement.getElementsByClassName("durationContainer")[0].innerHTML = convertTime(event.target.duration)
|
||
|
|
});
|
||
|
|
|
||
|
|
// set up slider to change counter when used
|
||
|
|
audio.getElementsByClassName("audioSlider")[0].addEventListener("input", event => {
|
||
|
|
event.target.parentElement.getElementsByClassName("timeContainer")[0].innerHTML = convertTime(event.target.value)
|
||
|
|
changingSlider = true;
|
||
|
|
})
|
||
|
|
|
||
|
|
// set slider to change part of music playing when used
|
||
|
|
audio.getElementsByClassName("audioSlider")[0].addEventListener("change", event => {
|
||
|
|
event.target.parentElement.getElementsByClassName("audioElement")[0].currentTime = event.target.value
|
||
|
|
changingSlider = false;
|
||
|
|
})
|
||
|
|
|
||
|
|
// set the audio element to change the sliders value whenever its time updates
|
||
|
|
audioElement.addEventListener("timeupdate", event => {
|
||
|
|
if (changingSlider)
|
||
|
|
{
|
||
|
|
return
|
||
|
|
}
|
||
|
|
event.target.parentElement.getElementsByClassName("audioSlider")[0].value = Math.floor(event.target.currentTime)
|
||
|
|
console.log("pogging")
|
||
|
|
event.target.parentElement.getElementsByClassName("timeContainer")[0].innerHTML = convertTime(event.target.currentTime)
|
||
|
|
})
|
||
|
|
|
||
|
|
// set the play button
|
||
|
|
audio.getElementsByClassName("playButton")[0].addEventListener("click", event => {
|
||
|
|
if (event.target.parentElement.parentElement.parentElement.getElementsByClassName("audioElement")[0].paused)
|
||
|
|
{
|
||
|
|
event.target.parentElement.parentElement.parentElement.getElementsByClassName("audioElement")[0].play()
|
||
|
|
event.target.src = "images/pause.png"
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
event.target.parentElement.parentElement.parentElement.getElementsByClassName("audioElement")[0].pause()
|
||
|
|
event.target.src = "images/play.png"
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|