可以将 HTML5 音频 currentTime 绑定到 Angular2 中的输入范围值吗？答案

【问题标题】：Possible to bind HTML5 audio currentTime to input range value in Angular2?可以将 HTML5 音频 currentTime 绑定到 Angular2 中的输入范围值吗？
【发布时间】：2018-05-20 19:22:44
【问题描述】：

我正在尝试为音频播放器制作一个擦洗栏。我有一个使用var audioPlayer = new Audio() 创建的 HTML 5 音频播放器。我想绑定一个 HTML <input type="range"> 以便 1) 范围反映音频位置，而且当我单击范围时，它会将音频位置更改为新位置。我是这样做的：

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

我可以通过单击范围滑块来更改currentTime，但是当currentTime 更改时范围滑块不会移动，因此它不会反映当前的音频位置。

我在这里做错了什么？为什么值没有正确绑定？

【问题讨论】：

标签： angular html5-audio

【解决方案1】：

除了缺少 ngModel 绑定之外，我还遇到了另一个问题。 Audio-object 的属性 currentTime 似乎是一个 getter/setter，因此直接绑定似乎不起作用。

我通过将范围输入绑定到本地数字变量playbackPosition 解决了这个问题，然后将ontimeupdate-callback 添加到音频播放器对象，将currentTime 值复制到playbackPosition 变量：

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

【讨论】：

【解决方案2】：

将ngModel 用于two-way binding：

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

这是一个有效的 Stackblitz：https://stackblitz.com/edit/two-way-range-input

【讨论】：

谢谢！我确实缺少 ngModel 的东西，我试图绑定到值。但是，即使它适用于您示例中的数字，由于某种原因，当我尝试绑定到音频播放器属性 currentTime 时，会发生单向或双向绑定。
您确定您使用的是[(ngModel)] 而不是[(value)]？尝试使用我在您的代码中提供的示例。我更新了它以使用一个名为 audioPlayer 的对象和一个 currentTime 属性。
是的……我仔细检查了一遍。但是我的 audioPlayer 属于 Audio() 类型，而 currentTime 是一个在声音播放时更新的属性。那里是否存在一些冲突，您无法按原样绑定到该属性？我会尝试再测试一些...
是的，就是这样。我通过向音频对象添加“ontimeupdate”回调来解决这个问题：audioPlayer.ontimeupdate = () => { this.playposition = this.audioPlayer.currentTime } 然后我使用您的解决方案将 playposition 变量与 ngModel 绑定。（输入）也必须操纵播放位置而不是 audioPlayer.currentTime。里面有些东西可以防止它被束缚。
啊…… currentTime 不是一个变量，而是一个 getter/setter，所以绑定不起作用……