setInterval и timeupdate - инициация таймеров

[cupoma58]

Привет. Есть код:

playB.addEventListener("click", function() {
  audio.play();
  audioPlay = setInterval(function() { 
    // момент воспроизведения и общее время
    elapsed = setTime(audio.currentTime); 
    duration = setTime(audio.duration);  
    // проверяем, что переменная treck < 5
    if (elapsed == duration && trak < 5) {
       trak++; // увеличиваем id  
       switchTrak(trak); // меняем трек
    }
    // если id больше или равен 5 
    else if (elapsed == duration && trak >= 5) {
       trak = 0; // возвращаемся к первому
       switchTrak(trak); // меняем трек
    }
  }, 50)
}, false);

Необходимо инициировать (через timeupdate) таймеры, по типу:

audio.addEventListener("timeupdate", function () { 
  elapsed.innerHTML = setTime(audio.currentTime);    
  duration.innerHTML = setTime(audio.duration);                                    
}, false);

P.S.: Вместе - они работать не хотят.
Посоветуйте - что делать?

[Nexus]

https://developer.mozilla.org/en-US/...nt/ended_event
Вместо первого может это использовать?

[roland]

P.S.: Вместе - они работать не хотят.

Вы используете одни и те же переменные для хранения времени проигрывания (elapsed) и длительности трека (duration) с элементами для их отображения на странице? Или это ошибка?

elapsed = setTime(audio.currentTime)
duration = setTime(audio.duration)

elapsed.innerHTML = setTime(audio.currentTime)
duration.innerHTML = setTime(audio.duration)

[cupoma58]

https://developer.mozilla.org/en-US/...nt/ended_event
Вместо первого может это использовать?

Не помогло. Если таймеры инициированы то, при переходе следующий/предыдущий, вместо таймера общей продолжительности - появляется "NaN:NaN:NaN" - плеер - перекашивает, в момент mouseup. А с setInterval - таймеры не работают.

[cupoma58]

используете одни и те же переменные

Смена имени переменной - ни к чему не приводит.

[rgl]

audioPlay = setInterval(....
setInterval возвращает значение, которое потом нужно использовать в clearInterval? Иначе сколько таких интервалов будут соперничать после нескольких кликов?

[Nexus]

Не помогло.

Я уверен, что вы просто неправильно сделали.

[cupoma58]

Я уверен, что вы просто неправильно сделали.

Я отказался от интервала

// расчёт времени:
function setTime(time) { 
  var time = Math.floor(time);
   
  var chases = Math.floor(time / 3600),
      minutes = Math.floor((time - chases * 3600) / 60),
      seconds = Math.floor(time - (chases * 3600 + minutes * 60)), 
      ch = chases,
      min = minutes,
      sec = seconds; 
 
  if(ch < 10){ch = "0" + chases;}
  if(min < 10){min = "0" + minutes;}
  if(sec < 10){sec = "0" + seconds;}
 
  return ch + ":" + min + ":" + sec;
}

var audio = document.getElementById("player"),
    elapsed = document.getElementById("play-time"),
    durtime = document.getElementById("full-time");
// инициация таймеров:
function initTime () { 
  elapsed.innerHTML = setTime(audio.currentTime);    
  durtime.innerHTML = setTime(audio.duration);                                    
}
audio.addEventListener("timeupdate", initTime);

// плей-лист - массив из шести элементов с названиями файлов [0, 1, 2, 3, 4, 5]: 
var playlist = [
                "1.mp3", 
                "2.mp3", 
                "3.mp3", 
                "4.mp3", 
                "5.mp3", 
                "6.mp3"
               ];

// выбор файла:
var trak;
var trek = document.getElementById("play-list");
function choisTrak (numTrak) {
  currentTime = 0;   
  duration = 0;
  audio.src = "./audio_mp3/" + playlist[numTrak];
  trek.innerHTML = playlist[numTrak];
}  

// пуск: 
var play = document.getElementById("play");  
play.addEventListener("click", function() {audio.play();}, false);

// пауза:
var pause = document.getElementById("pause");
pause.addEventListener("click", function() {audio.pause();}, false); 

// предыдущий трек:
var prev = document.getElementById("prev");
prev.addEventListener("click", function() {
  if (trak > 0) {
    trak--; 
    choisTrak(trak); 
    initTime();
  } 
  else {
    trak = 5; 
    choisTrak(trak);
    initTime();
  }
}, false); 

// следующий трек:
var next = document.getElementById("next");
next.addEventListener("click", function() {
  if (trak < 5) {
    trak++; 
    choisTrak(trak);
    initTime();
  } 
  else {
    trak = 0; 
    choisTrak(trak);
    initTime();
  }
}, false); 

// инициируем процесс:
var choise = document.getElementById("progres"),
    seek = document.getElementById("progres-box"); 
    audio.addEventListener("loadedmetadata", function () {
var audioDuration = Math.round(audio.duration);  
    choise.setAttribute("max", audioDuration);
    seek.setAttribute("max", audioDuration);
}, false);

// обновляем прогресс:
audio.addEventListener("timeupdate", function() {
  choise.value = Math.floor(audio.currentTime);
  seek.value = Math.floor(audio.currentTime);
}, false);
  
// выбираем начало воспроизведения:
choise.addEventListener("input", function(e) {
  var progres = e.target.dataset.choise ? e.target.dataset.choise : e.target.value;
  audio.currentTime = progres; 
  choise.value = progres;     
}, false);

choise.addEventListener("mousemove", function (e) {
  var skip = Math.round((e.offsetX / e.target.clientWidth) * parseInt(e.target.getAttribute("max"), 10));
  choise.setAttribute("data-seek", skip); 
  seek.innerHTML = setTime(skip);
  var rect = audio.getBoundingClientRect();
  seek.style.left = `${e.offsetX - rect.left}px`;
}, false);

// контроль звука:
var volume = document.getElementById("sound");
volume.addEventListener("input", function () {
  if (audio.muted) {audio.muted = false;}
  audio.volume = volume.value;
}, false);

Теперь - общее время "сдохло". Оно, не особо-то и нужно, но...эстетика, что-б её.