时间戳

首页 > 解决方案 > Angular 2 应用程序 - 获取 mp3 上传的持续时间

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

问题描述

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

我尝试了一些不同的方法（其中一种），但我还不能让它工作。

我希望以 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"

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

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

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

标签： javascriptangularmp3angular2-forms

解决方案

我发现的最佳解决方案是结合 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给 post 参数ngSubmit并将其保存在数据库中。

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

我希望它可以帮助某人。

推荐阅读