DR：在本文中，您将学习如何使用Angular和RxJS开发音频播放器应用程序。您将使用RxJS处理音频操作和应用程序状态。为了保护应用程序的安全，您将使用Auth0。如果需要，您可以在这个GitHub存储库中找到最终的代码。介绍创建一个音频播放器总是一项艰巨的任务，尤其是当您考虑管理媒体的状态、对媒体事件做出反应以及在UI（用户界面）上正确反映这些更改时。因此，在本文中，您将使用角度和角度材质（与其他一些库一起）轻松解决这些挑战。为了以反应式的方式处理媒体播放，您将用RxJS Observable包装JavaScript的Audio对象，还将使用RxJS来管理音频播放器的状态。要通过应用程序提供安全的用户体验，您将通过Auth0添加用户身份验证。先决条件由于您要使用Angular，因此需要安装节点.js在你的开发机器中。因此，如果您还没有这样做，请转到的下载页面节点.js然后按照那里的说明操作。安装后，您需要通过npm安装Angular CLI：npm安装-g@angular/cli如果您使用的是npmv5.2+，您可以使用npx来使用@angular/cli，而无需安装它，方法是运行npx@angular/cli[跟随ng global命令的选项]搭建应用程序在安装了所有的环境依赖项之后，您可以集中精力构建您的角度应用程序。为此，请在终端上发出以下命令：ng新角度音频你还可以使用scaffold应用程序：npx@angular/cli新角度音频这个命令会问你三个问题：是否要添加角度布线？（y/N）：您可以输入y（是），因为您将在应用程序中使用角度路由。您要使用哪种样式表格式？（使用箭头键）：从给定的选项中选择SCS。你愿意在谷歌的隐私政策下，与Angular团队分享匿名使用数据吗https://policies.google.com/privacy有关详细信息以及如何更改此设置，请参阅。（y/N）：如果你想与Google共享数据，请按y或N。运行应用程序继续之前，请确保可以在浏览器中启动应用程序。直接使您的音频工作角度：cd角度音频到达后，您只需运行：npm启动在浏览器中，访问：4200/打开应用程序。正在安装项目依赖项确认可以在浏览器中运行基本应用程序后，可以通过安装依赖项开始构建此应用程序。要构建音频播放器，您将使用角度材质库。您可以使用ng add命令安装它：ng添加@角度/材料这个命令会问你三个问题：选择预先构建的主题名称，或为自定义主题选择"自定义"：选择靛蓝/粉色为手势识别设置HammerJS？：您可以输入y（是），因为您需要手势识别。为角度材质设置浏览器动画？（Y/n）：您可以再次输入Y（是），因为您需要动画。你还将使用力矩.js操纵日期和时间。通过npm安装：npm install—节省时间注：RxJS与Angular捆绑提供利用角度材料开发音频播放器用户界面在本节中，您将设计应用程序的UI。最后，您的应用程序将如下所示：由于你的应用程序将使用角度材质组件，你需要将它们导入根NgModule中。为此，请使用ng generate命令创建材质模块：ng生成模块材料--module=app--flatng generate module命令使用给定的名称创建模块；在您的示例中，名称是material。--module=app选项允许您指定要在哪个模块中导入新模块，--flat会将模块创建到根目录中，而不需要创建额外的文件夹。上一个命令将生成材料.模块在/src/app目录中。将该文件的内容替换为以下代码：//src/应用程序/材料.模块.ts从"@angular/core"导入{NgModule}；进口{MatButton模块，MatListModule，MatSliderModule公司，MatIconModule公司，Mattoolbar模块，MatCard模块}从"@角度/材料"；常数模=[MatButton模块，MatListModule，MatSliderModule公司，MatIconModule公司，Mattoolbar模块，MatCard模块];@NG模块({导入：模块，导出：模块})导出类MaterialModule{}然后，使用@angular/cli创建app player组件：ng生成组件页面/播放器——模块应用程序它将生成一个player.component.tssrc/app/pages/player/目录中的文件和其他必需的文件。音频播放器HTML在./src/pages/player目录中，可以找到player.component.html文件。在这个文件中，您将添加一些HTML来定义播放器结构。正如您将看到的，顶层元素是一个带有容器类的div。在顶部，您将有一个导航栏，其中包含内的应用程序名称。在标题下面，有一个带有类内容的div元素，其中有应用程序的徽标，还有一个带有媒体文件列表的。最后，带有class.media footer的footer div元素将有两个元素。在第一个中，将有一个。这将允许用户更改音频曲目的当前时间。在第二个中，您将拥有其余的播放控件。替换src/app/pages/player的内容/player.component.html代码如下：

音频播放器

音乐备忘

音频播放器

歌曲音乐注释{文件名}}由{文件.artist}}音量增大错误