Angular 2 应用程序 - 获取 mp3 上传的持续时间

Question

我一直在尝试在我的 Angular 2 应用程序中获取 mp3 文件上传的音频时间（秒）。

我尝试了一些不同的方法 (one of them)，但我还不能让它工作。

我希望以 Angular 的方式进行 - 无需为 URL.createObjectURL() 调用 document.querySelector(...) 或 window.URL。

如果我尝试使用@ViewChild('file') 和使用(change) 调用的字段上的函数并使用$event 和ViewChild 调用它：

<input #file type="file" class="form-control-file" (change)="setFileField($event, file)">

它们都不包含持续时间数据，但我可以通过事件获取文件数据：

let files: FileList = event.target.files;
let file: File = files[0];

// File data from the event
lastModified: 1526819830000
lastModifiedDate: Sun May 20 2018 14:37:10 GMT+0200 (CEST) {}
name: "Det lægende samspil mellem det ydre og det indre mørke_pt1 - med Anders Laugesen.mp3"
size: 18792325
type: "audio/mp3"

如果我等待并尝试遍历 (ngSubmit) 上的 FormGroup 数据，则数据也不存在。

我读到了一个名为 (loadedmetadata) 的事件，但我无法让它在我的应用程序中运行。

如果我想以 Angular 方式进行，我应该怎么做才能在 Angular 2 应用程序中获取此文件上传的持续时间？

Answer 1

我发现的最佳解决方案是结合 angulars (change) 和 (canplaythrough)。

<input type="file" class="form-control-file" (change)="setFileField($event)">
<audio #dom_audio (canplaythrough)="setDuration($event)" id="audio"></audio>

setFile 从文件列表中获取文件，创建对象 url 并将其设置在音频 html 标记中：

setFile(event) {
  let files: FileList = event.target.files;
  if (files.length > 0) {
    this.file = files[0];
  }
  if(this.file.name.match(/\.(avi|mp3|mp4|mpeg|ogg)$/i)){
    let obUrl = URL.createObjectURL(this.file);
    this.dom_audio.nativeElement.setAttribute('src', obUrl);
  }
}

然后，当音频文件可以播放时 - .duration 属性已准备好保存：

setDuration(load_event): void {
  this.duration = Math.round(load_event.currentTarget.duration);
}

然后我将this.duration 传递给ngSubmit 上的帖子参数并将其保存在数据库中。

注意：记得验证持续时间的存在。您不希望用户在没有此属性的情况下保存文件。

我希望它可以帮助别人。