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

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> 标记中利用它。