仅从带有离子4科尔多瓦设备的存储中获取音频文件

Question

我正在尝试使用Ionic框架（v。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>标签中使用它。