带有 xmlHttpRequest 的角度加载文件

【问题标题】：Angular load file with xmlHttpRequest带有 xmlHttpRequest 的角度加载文件
【发布时间】：2019-07-03 19:50:00
【问题描述】：

我正在尝试在我的 Angular 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？

谢谢。

【问题讨论】：

标签： angular audio xmlhttprequest arraybuffer

【解决方案1】：

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

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

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

这里有一个Sample StackBlitz 供您参考。

这里还有一个Working Demo 供您参考。在其中，您应该能够看到控制台上的日志以及在开发工具的网络选项卡中获取音乐文件的调用。

【讨论】：