Question

我正在尝试在我的角度网络应用程序中播放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的{{1}}文件夹中并指定路径：

src

PS：由于StackBlitz间歇性无法识别mp3文件，因此它可能在StackBlitz中不起作用。但这将没有任何问题。任何此类资产都需要添加到src文件夹中的assets文件夹中，然后Angular CLI将其捆绑为this.xhr.open("GET", "assets/plucky.mp3", true);中配置的应用程序包的一部分，因此可以通过相对URL对其进行访问。

这是您推荐的Sample StackBlitz。

这里也是您的推荐人Working Demo。在其中，您应该能够在开发工具的网络标签中看到控制台上的日志和获取音乐文件的调用。

带有xmlHttpRequest的角度加载文件

1 个答案: