使用 HTMLAudioElement 检测角度变化答案

【问题标题】：Angular change detection with HTMLAudioElement使用 HTMLAudioElement 检测角度变化
【发布时间】：2019-01-03 22:56:59
【问题描述】：

我正在尝试构建一个小型音频播放器，但似乎无法很好地检测变化，例如音轨当前时间。例如，我的组件和模板文件中的曲目播放良好

{{ player.currentTime }}

但时间似乎只在我执行其他事件时更新，例如单击或播放/暂停按钮。它不会在播放曲目时直观地实时更新。似乎是变更检测问题或其他问题？

对于工作示例，请参阅 ngx-admin-demo (https://akveo.com/ngx-admin/#/pages/iot-dashboard) 并稍微向下滚动以查看播放器。如果您按下播放键并停止移动鼠标，您会明白我的意思，除非您正在执行操作，否则它不会更新进度条或时间。

【问题讨论】：

标签： angular html5-audio angular2-changedetection

【解决方案1】：

在您的组件中尝试这样的操作，以鼓励每秒进行一次更改检测，而无需用户执行某些事件来触发更改检测（Angular2+ 仅对 XHR 请求、事件和 setTimeout/setInterval 执行更改检测）：

@Component({
  selector: 'my-player',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: '/path/to/my-player.template.html'
})
class MyPlayer {
  constructor(private ref: ChangeDetectorRef) {
    setInterval(() => {
      this.ref.markForCheck();
    }, 1000);
  }
}

【讨论】：

嗨，肖恩，这对像当前时间这样的事情很有用，但是进度条呢，它每秒跳一次看起来很生涩。我会简单地降低间隔计时器吗？你认为从长远来看这会变得低效吗？
是的——这种变化检测肯定是有成本的。您可以将间隔降低到 250 毫秒或 100 毫秒，以使其更平滑一些。粒度越细，对性能的影响就越大。我不确定您的组件的具体用例是什么，但如果它不是始终可见的东西，那么性能损失可能值得改善用户体验。
谢谢，我用它来在网站的页脚中放置一个可见的音频播放器。你知道这是否是预期的行为吗？我是否错过了其他可以使这项工作如我所想的东西？我正在考虑以某种方式创建一个当前时间的可观察对象并使用异步管道，这样会更好吗？
是的 - 这是预期的行为。 Observable 模式可以工作 - 但您必须让玩家触发某种事件，以便将当前播放时间传递给 Observable 的主题。您也可能在此处遇到相同类型的性能与事件触发粒度问题。如果你走 setInterval 路线，可能值得跟踪 setInterval 返回的间隔 ID，然后在 ngOnDestroy() 函数中对该 ID 调用 clearInterval ......只是为了清理。