1

По сути нужно сделать полоску времени. Есть ползунок <input> и нужно, чтобы через каждую секунду изменялось его положение в зависимости от длительности аудио. Желательно реализовать через Javascript. Причем я знаю как изменять атрибут value с каждой секундой, но ползунок на сайте от этого двигаться не стал

var curtime = 0, Song = new Audio(), duration=[150,160,170];//Условная длительность в секундах. для каждой песни своя
//curtime в диапозоне от 0 до 100. Это для ползунка
<!-- begin snippet: js hide: false console: true babel: false -->

<input class="timeline_range" id="rangeeleven" type="range" min="0" max="100" value="0"> <!---Ползунок--->

1 ответ 1

0

var curtime = 0, duration = [10, 260, 570];
var inp = document.querySelectorAll( '.timeline_range' );

var tick = [];
for( var i = 0; i < inp.length; i++ ){
  tick[i] = new Tick();
  tick[i].tac( inp[i], duration[i], curtime );
}

setTimeout(()=> {tick[2].killtac()}, 15000); // Тест, остановка работает.

function Tick() {
  var interval;
  
  this.tac = function( input, duration, time ){
    var val = +time;
    var i = Math.floor( time / duration );
    var display = input.nextElementSibling;
    interval = setInterval(function(){
      if( i >= duration ){ clearInterval( interval ); }

      input.value = val;      
      val += 100 / duration;

      display.textContent = (i++) + " / " + duration;
    }, 1000);
  };
  
  this.killtac = function(){
    clearInterval( interval );
  }
}
<input class="timeline_range" type="range" min="0" max="100" value="0">
<span class="time"></span>
<br>
<input class="timeline_range" type="range" min="0" max="100" value="0">
<span class="time"></span>
<br>
<input class="timeline_range" type="range" min="0" max="100" value="0">
<span class="time"></span>

P.s. Функции - конструкторы

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.