使用XMLHttpRequest角加载文件

Question

我想在我的角度web应用程序播放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

将文件移动到assets文件夹中src，并给该路径：

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

PS：这可能不是在StackBlitz为StackBlitz间歇性无法识别的MP3文件的工作的原因所在。但是，它的工作没有任何问题。任何这样的资产需要被添加到资产文件夹中的src文件夹，然后角CLI捆绑它作为应用程序包的一部分作为被配置在angular.json并因此它是通过相对URL访问。

---

以下是为您的参考一Sample StackBlitz。

---

这里也为您的参考一Working Demo。在这里面，你应该能够看到控制台和调用来获取音乐文件中的开发工具的网络选项卡上的日志。