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

Question

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

我已经尝试了一些不同的方法 ()，但我还没有成功。

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

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

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

None 其中包含持续时间数据，但我能够通过事件获取文件数据：

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 并将其设置在音频 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 参数并将其保存在数据库中。

Note: Remember to validate the presence of duration. You don't want the user to save the file without this attribute.

希望对大家有所帮助。

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

Angular 2 app - get the duration of a mp3 upload

javascript

mp3

angular2-forms

angular