noUISlider with Jquery does not assign as parameter "audio.currentTime"

Question

noUISlider with Jquery does not assign as parameter "audio.currentTime"

Navigation

#1 by (0 votes)

3

The creation in the HTML of the slider is this, I use a framework, the nouislider. The Slider is because I am creating a player with HTML and jQuery together with Bootstrap. The slider would have to work, logically, to advance as the audio plays.

<div id="slider" class="slider shor slider-success"> </div>

In the JS I have this:

var slider = document.getElementById('slider'); 
audio = document.getElementById('audio1');
  $('#play1').click(function () {
   if ($("#audio1").get(0).paused) {
       $("#audio1").get(0).play();
       document.getElementById('tempo_atual').innerHTML = secToStr( audio1.currentTime);
       document.getElementById('tempo_total').innerHTML = secToStr( audio1.duration );
   } else {
       $("#audio1").get(0).pause();
  }
});
audio.addEventListener('timeupdate', atualizar , false);

noUiSlider.create(slider, {
    start: 0,
    range: {
        'min': 0,
        'max': audio.duration
    }
});
//slider1Value = document.getElementById('slider1-span'),
slider.noUiSlider.on('update', function( values, handle ){
    //slider1Value.innerHTML = values[handle];
  position = values[handle];
  audio.currentTime = position;
});

function atualizar(){
  document.getElementById('tempo_atual').innerHTML = secToStr( audio.currentTime);
  document.getElementById('tempo_total').innerHTML = secToStr( audio.duration);
}

What I can think of is that in the function actualizar() go something like this:

slider.noUiSlider.set(audio.currentTime);

BUT IT DOES NOT WORK FOR ME. Do I do it in the wrong place? Do I use the .set() wrong? How can I solve this problem?

Alvaro Montoro: Thanks for the corrections, it happens is my first time using Stack Overflow, in addition to writing everything in a hurry.

javascript jquery html5 bootstrap

asked by YelloWhale 28.02.2016 в 04:43

source

1 answer

Will not let me enter the data in an array structure Update in laravel with primary key other than id

score 0 · Accepted Answer

The problem is when you create the slider:

noUiSlider.create(slider, {
  start: 0,
  range: {
    'min': 0,
    'max': audio.duration
  }
});

Because at that moment, you have not finished loading the audio, you do not have audio.duration and you do not know how long it lasts (if you look at the console of errors you will see that there is a fault that says something about the range does not have a numerical value).

The solution is simple: do not initialize the slider until the audio is finished loading. To do this, put the code that initializes the slider in a function that is called when the event onloadeddata of the audio is launched:

audio.onloadeddata = function() {
  // definición del slider y sus eventos aquí
}

Apart from that, in order for the slider to advance with the sound, you must add the code that you indicate in the function atualizar() . But beware, then another problem appears when the audio is played: when you change the value of the slider the currentTime of the audio is updated (in slider.noUiSlider.on('update'... ), and when the currentTime of the audio is updated the value of the slider is changed ( in atualizar() ), which leads to a loop of updates and changes in value that makes the sound heard badly (or not heard directly).

One possible solution is to use a sentinel variable and have the value of the slider affect only the value of currentTime if the audio is not playing. In this way they do not affect each other and you already hear well.

Here I leave an example changing the minimum your code (and adding HTML that was missing):

function secToStr(val) {
  return val;
}

function atualizar(){
  document.getElementById('tempo_atual').innerHTML = secToStr( audio.currentTime);
  document.getElementById('tempo_total').innerHTML = secToStr( audio.duration);
  slider.noUiSlider.set(audio.currentTime);
}


var slider = document.getElementById('slider'); 
audio = document.getElementById('audio1');
$('#play1').click(function () {
  if ($("#audio1").get(0).paused) {
    $("#audio1").get(0).play();
    document.getElementById('tempo_atual').innerHTML = secToStr( audio1.currentTime);
    document.getElementById('tempo_total').innerHTML = secToStr( audio1.duration );
  } else {
    $("#audio1").get(0).pause();
  }
});

audio.addEventListener('timeupdate', atualizar , false);

// espera a que se cargue el audio para inicializar el slider
audio.onloadeddata = function() {
  noUiSlider.create(slider, {
    start: 0,
    range: {
      'min': 0,
      'max': audio.duration
    }
  });

  //slider1Value = document.getElementById('slider1-span'),
  slider.noUiSlider.on('update', function( values, handle ){
    // para que el slider avance con el audio
    if (audio.paused) {
      //slider1Value.innerHTML = values[handle];
      position = values[handle];
      audio.currentTime = position;
    }
  });

}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.3.0/nouislider.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.3.0/nouislider.js"></script>

<div id="play1">Play/Pause Audio</div>
<div id="tempo_atual">0</div>
<div id="tempo_total">0</div>

<audio id="audio1">
  <source src="http://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
  <source src="http://www.w3schools.com/tags/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<div id="slider" class="slider shor slider-success"> </div>