Question

我已经尝试了很长时间才能在我的Angular 2 App中获取mp3文件上传的音频时间（秒）。

我尝试了一些不同的方法（one of them），但我还没有能够让它工作。

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

如果我尝试使用@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

我找到的最佳解决方案是结合角度(change)和(canplaythrough)。

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

setFile从文件列表中获取文件，创建对象url并将其设置在audio 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上的post params并将其保存在数据库中。

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

我希望它可以帮助别人。

Angular 2 app - 获取mp3上传的持续时间

1 个答案: