angular - 使用ionic 4 cordova仅从设备存储中获取音频文件

Question

我正在尝试使用Ionic框架(第4版)创建音频播放器。它应该仅使用存储在用户电话上的本地音频文件。我只需要从设备获取音频文件(FileEntry或完整路径)。

Answer 1

您可能不需要插件，因为Web API确实支持从设备广泛加载文件。您可以执行以下操作:

html:添加Ionic按钮并将文件输入放置在其中。

<ion-button expand="full">
  <ion-icon lazy="true" slot="start" name="musical-notes"></ion-icon>
  <ion-label slot="end">Upload Sound</ion-label>
  <input type="file" (change)="loadSoundFileFromDevice($event)" id="file-input" accept="audio/mpeg, audio/wav">
</ion-button>

请注意，您可以使用mime类型限制某些文件类型。请参阅此处的示例:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types

ts:利用fileReader API。

loadSoundFileFromDevice = (event) => {
  if (!event.target.files[0]) return;
  if (!file.type.match('audio')) return;
  const file = event.target.files[0];
  // do the blob:
  let blobReader = new FileReader();
  blobReader.readAsArrayBuffer(file);
  blobReader.onload = () => {
    let blob: Blob = new Blob([new Uint8Array((blobReader.result as ArrayBuffer))]);
    let blobURL: string = URL.createObjectURL(blob);
    // do the rest with the actual file
  };
  // handle errors:
  blobReader.onerror = (error) => {
    this.foundation.handleError(error);
  };
};

我没有测试此代码，但从理论上讲，一旦获得文件Blob，您就应该能够在 <audio>标记中利用它。