I am trying to create a custom interaface for the audio
tag but am having trouble setting the the audio.currentTime
value. When I try to set the audio position by dragging the slider, it snaps back to 0 and when checking audio.currentTime
in the developer console, it still returns 0. Here is what I have so far:
const audio = $("#audio")[0];
const progress = $("#progress");
const time = $("#time");
const duration = $("#duration");
let tmpTime = 0;
audio.onloadedmetadata = (e) => {
progress.attr("max", e.target.duration);
progress.val(0);
const date = new Date(e.target.duration * 1000)
.toISOString()
.slice(11, 19);
duration.text(date);
};
audio.ontimeupdate = (e) => {
progress.val(e.target.currentTime);
const date = new Date(audio.currentTime * 1000)
.toISOString()
.slice(11, 19);
time.text(date);
};
progress.on("input", (e) => {
tmpTime = e.target.value;
const date = new Date(tmpTime * 1000)
.toISOString()
.slice(11, 19);
time.text(date);
});
progress.on("change", (e) => {
audio.currentTime = parseInt(e.target.value);
});