Возможно ли привязать HTML5 аудио currentTime к значению диапазона ввода в Angular2?

Question

Я пытаюсь сделать панель управления для аудиоплеера.У меня есть аудиоплеер HTML 5, созданный с var audioPlayer = new Audio().Я хотел бы связать HTML <input type="range"> так, чтобы 1) диапазон отражал положение звука, но также когда я щелкаю диапазон, он изменяет положение звука на новое положение.Я делаю так:

<input type="range" min="0" max="{{ audioPlayer.duration }}" [value]="audioPlayer.currentTime" (input)="audioPlayer.currentTime = $event.target.value">

Я могу изменить currentTime, нажимая ползунок диапазона, но ползунок диапазона не перемещается при изменении currentTime, поэтому он не отражаеттекущая позиция аудио.

Что я здесь не так делаю?Почему значение не связывается должным образом?

Answer 1

Помимо отсутствующей привязки ngModel, у меня была и другая проблема.Свойство Audio-object currentTime выглядит как метод получения / установки, поэтому прямое связывание не работает.

Я решил эту проблему, связав вместо этого ввод диапазона с локальной числовой переменной playbackPosition изатем к объекту аудиоплеера добавлен обратный вызов ontimeupdate, который копирует значение currentTime в переменную playbackPosition:

  this.audioPlayer = new Audio();
  this.audioPlayer.ontimeupdate = () => {
    this.playbackPosition = this.audioPlayer.currentTime;
    console.log("timeupdate")
  }

Answer 2

Используйте ngModel для двусторонней привязки :

<input 
  type="range" 
  min="0"
  max="{{max}}"
  [(ngModel)]="currentTime"/>

Вот рабочий Stackblitz: https://stackblitz.com/edit/two-way-range-input