Приложение Angular 2 - получите продолжительность загрузки mp3 - PullRequest
Новая
       6

Приложение Angular 2 - получите продолжительность загрузки mp3

0 голосов
/ 25 мая 2018

Я долго пытался получить аудио время (в секундах) загрузки mp3-файла в моем приложении Angular 2.

Я пробовал несколько разных подходов ( один из них ), но я пока не смог заставить его работать.

Я надеялся сделатьУгловой способ - без вызова 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), данные не 't также там.

Я читал о событии под названием (loadedmetadata), но я не могу заставить его работать в моем приложении.

Что я должен сделать, чтобы получить продолжительностьзагрузить этот файл в приложение Angular 2, если я хочу сделать это Angular способом?

1 Ответ

0 голосов
/ 28 мая 2018

Лучшим решением, которое я нашел, было объединение углов (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 и сохраняет его в базе данных.

Примечание: Не забудьте проверить наличие длительности.Вы не хотите, чтобы пользователь сохранял файл без этого атрибута.

Надеюсь, это кому-нибудь поможет.

...