时间戳

首页 > 解决方案 > 带有 xmlHttpRequest 的角度加载文件

angular - 带有 xmlHttpRequest 的角度加载文件

问题描述

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

谢谢你。

标签： angularaudioxmlhttprequestarraybuffer

解决方案

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

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

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

这是您参考的示例 StackBlitz。

这也是您的参考的工作演示。在其中，您应该能够看到控制台上的日志以及在开发工具的网络选项卡中获取音乐文件的调用。

推荐阅读