Angular 使用 xmlHttpRequest 加载文件

Question

我正在尝试在我的 angular 网络应用程序中播放 mp3 文件。所以我试图用 XMLHttpRequest 将它加载到我的组件中，以将其作为 ArrayBuffer 像这样：

public loadFile = () => {
  if (this.context === undefined) {
    return;
  }
  this.xhr = new XMLHttpRequest();
  this.xhr.open("GET", "./plucky.mp3", true);
  this.xhr.responseType = "arraybuffer";
  this.xhr.onload = this.onLoadComplete;
  this.xhr.send();
}

但是我得到了 ERROR 404 NOT FOUND 尽管 mp3 位于我的组件的同一文件夹中。如何将其加载为 ArrayBuffer?

谢谢。

Answer 1

将文件移动到 src 中的 assets 文件夹并指定路径：

this.xhr.open("GET", "assets/plucky.mp3", true);

PS: 它可能无法在 StackBlitz 中运行，因为 StackBlitz 间歇性地无法识别 mp3 文件。但它会毫无问题地工作。任何此类资产都需要添加到 src 文件夹中的资产文件夹，然后 Angular CLI 将其捆绑为 angular.json 中配置的应用程序包的一部分，因此可以通过相对 URL 访问它。

Here's a Sample StackBlitz for your ref.

Here's also a Working Demo for your ref. In it, you should be able to see the logs on the console and the call to get the music file in the network tab of Dev Tools.

Angular 使用 xmlHttpRequest 加载文件

Angular load file with xmlHttpRequest

audio

xmlhttprequest

arraybuffer

angular