JavaScript <audio>: не могу обновить currentTime - PullRequest
Новая
       28

JavaScript <audio>: не могу обновить currentTime

0 голосов
/ 20 октября 2018

Я пытаюсь сделать индикатор выполнения для моего html5-аудиоплеера и сделать функцию, чтобы изменить время воспроизведения трека, нажав.Я решил сделать это с помощью ввода [range], но когда я нажимаю на полосу, текущее время воспроизведения не обновляется, дорожка просто воспроизводится с самого начала:

my html: 

<audio controls='controls' class="track">
      <source src="{{ user_lib.audio_file.url }}" type="audio/mpeg">
      <source src="{{ user_lib.audio_file.url }}" type='audio/ogg; codecs=vorbis' />
      <p>Your user agent does not support the HTML5 Audio element.</p>
</audio>

<div class="progress-bar">
        <input type="range" min="0" max="100" value="0" step="1" class="track-pb"
        onchange="PBtap()" id="track-pb"/>
    </div>

my js: 

function PBtap() {
        $('#track-pb').on('input propertychange', function() {

        var currenttrack = $('.track')[0];
        var val = parseInt($(this).val() * currenttrack.duration / 100, 10)
        $('#track-pb').prop("value", val);
        currenttrack.currentTime = val;
    })
}

я пытался использовать 

$(currenttrack).bind('canplay', function() {
            this.currentTime = val;
          });

Что я делаю не так?

Ответы [ 2 ]

0 голосов
/ 20 октября 2018

Это похоже на проблему сферой.В $(currenttrack).bind('canplay', function() {, currenttrack не определено, поскольку оно объявлено в функции.

Кроме того, вы используете встроенный onchange для вызова функции ... И эта функция регистрирует обработчик изменений, способ jQuery,Это один или другой.

Попробуйте: 

var currenttrack = $('.track')[0];
var val = 0;

$('#track-pb').on('input change propertychange', function() {

  val = parseInt($(this).val() * currenttrack.duration / 100, 10)
  $('#track-pb').prop("value", val);
  currenttrack.currentTime = val;
});


currenttrack.on('canplay', function() {
  this.currentTime = val;
});

И удалите onchange="PBtap()" из вашей разметки.

Также ... не используйте устаревший .bind().Вместо этого используйте .on().

0 голосов
/ 20 октября 2018

Это должно работать: 

function PBtap(trackpb) {
    var currenttrack = $('.track')[0];
    var val = parseInt($(trackpb).val() * currenttrack.duration / 100, 10)
    currenttrack.currentTime = val;
}

А в HTML измените onchange="PBtap()" на onchange="PBtap(this)".Когда onchange используется таким образом, по умолчанию this недоступен.

Вы также можете добавить следующее, чтобы изменить значение диапазона при воспроизведении звука: 

setInterval(function () {
  var track = $(".track")[0];
  $("#track-pb")[0].value = track.currentTime / track.duration * 100;
}, 100);

Это будетработать лучше, если onchange изменено на oninput в HTML.

...