在本文中，您将学习如何使用Ionic框架和Angular开发移动音频播放器应用程序。您将使用RxJS和observable处理音频操作，还将探索如何使用NgRx管理应用程序的状态。为了保护应用程序的安全，返利机器人软件，您将使用Auth0。如果需要，您可以在这个GitHub存储库中找到最终的代码。介绍创建一个音频播放器总是一个令人畏惧的任务。特别是当您考虑管理媒体的状态、对媒体事件做出反应以及在UI（用户界面）上正确反映这些更改时。因此，在本文中，您将使用Angular和Ionic（以及其他一些库）来轻松解决这些问题。为了以反应式的方式处理媒体播放，您将使用RxJS Observable调整JavaScript的Audio对象，并使用NgRx存储来管理音频播放器的状态。除此之外，您还将使用Auth0来保护您的移动应用程序，在随后的文章中，中国云，您将学习如何创建一个安全的后端来向您的应用程序提供音乐文件列表（目前，您将使用一个带有静态数据的模拟服务）。"让我们使用@Ionicframework、@angular、RxJS和NgRx来构建移动音频播放器应用程序。"在推特上留言离子显影的先决条件因为你要做一个移动应用程序，你需要有构建应用程序所需的sdk。在本文中，物联网关键技术，您将使用Cordova将您的Ionic应用程序打包到本机移动软件包中。以下部分显示了在开始开发应用程序之前需要遵循的步骤。为iOS安装本机SDK对于iOS平台，您需要在其上安装MacOSX环境和Xcode。有关在Mac OS X环境中配置本机SDK的详细信息，请查看此参考。安装Xcode之后，还需要一些命令行工具和ios部署工具来运行模拟器。要安装这些工具，请执行以下操作：在命令行中，运行xcode select--install来安装xcode命令行工具。然后，运行npm install-g ios deploy来安装ios deploy工具。如果你没有节点.js和NPM安装在您的机器上，请检查此参考资料上的说明。为Android安装本机SDK对于Android应用程序，您需要有Android sdk和一些工具。下面的步骤简要说明如何在您的环境中安装这些SDK和工具。但是，如果您需要更多信息，可以查看此链接以获得有关如何安装所有内容的更详细的说明：JDK：您需要安装一个JDK，并将JAVA_HOME环境变量指向JDK安装。Gradle：您还需要安装Gradle并将其添加到环境变量中的PATH变量中。androidsdk：最重要的是，你需要androidsdk为你的应用生成apk文件。因此，安装Android Studio IDE，并使用sdkmanager安装以下内容：Android平台SDK；为该SDK版本构建工具；以及Android支持库。在这些之后，物联网系统，大数据的4，您需要将ANDROID_HOME环境变量设置为您的ANDROID SDK位置。还建议将androidsdk的tools、tools/bin和platform tools目录添加到PATH变量中。安装节点.js和工具如前所述，您需要安装节点.js在你的开发机器中。因此，如果您还没有这样做，请转到的下载页面节点.js然后按照那里的说明操作。安装后，您需要通过npm安装Cordova CLI和Ionic CLI：npm安装-g ionic cordova搭建离子应用程序安装完所有的环境依赖项后，你可以集中精力搭建你的离子应用程序。为此，请在终端上发出以下命令：离子启动音频播放器空白此命令将询问您两个问题：您是否希望将您的新应用程序与Cordova集成以针对本机iOS和Android？（y/N）：您可以输入y（是），因为您要为移动设备构建应用程序。安装免费的Ionic Pro SDK并连接应用程序？（Y/n）：按n键，因为在本教程中您不需要使用任何Ionic Pro功能。运行应用程序继续之前，请确保可以在某些移动设备或模拟器上启动应用程序。例如，如果您在Mac OS X环境中，并且希望使用模拟器来测试应用程序，则可以简单地运行：#对于iOS应用程序ionic cordova跑步ios-lc注意：上面的lc意味着你想让Ionic启动一个服务器来实时重新加载www文件（l）并将控制台日志打印到终端（c）。作为参考，以下是您在瞄准当前开发机器（即其上的浏览器）或Android时可以使用的其他命令：#本地服务爱奥尼亚发球#对于android应用程序ionic cordova运行android正在安装项目依赖项在确认可以在某些移动设备中运行基本应用程序后，可以从安装依赖项开始。要构建移动音频播放器，您将使用以下NPM库：@angular/animations：通过添加一些动画来改进你的应用程序用户体验的软件包；@ngrx/store：一个集成RxJS和Angular应用程序的库，帮助您管理应用程序的状态；力矩.js：一个帮助在JavaScript中操作日期和时间的库；auth0js:JavaScript应用程序的官方auth0库；@auth0/cordova：cordova应用程序的官方auth0库；rxjs:JavaScript的反应式编程库；rxjs compat：一个与rxjs版本6之前的向后兼容的包；要安装这些库，可以使用以下命令：#确保您在项目根目录中cd音频播放器#安装所有库npm安装--save@angular/animations@ngrx/store moment auth0 js@types/auth0 js@auth0/cordovarxjs@6.2.1款rxjs兼容@6.2.1注意：在上面的命令中，您同时安装了rxjs@6.2.1款以及rxjs兼容@6.2.1因为爱奥尼亚（至少在撰写本文时）附带了Angular 5，而且Angular 5使用RXJS5API。创建一个Ionic服务来管理播放安装应用程序的依赖项后，可以开始使用播放功能。创建RxJS Observable您将要创建的可观察对象是应用程序的中心部分。RxJS附带了一个名为create的helper函数来帮助您创建定制的观察值。它以subscribe函数作为输入。可观察。创建（订阅）：可观察；这个subscribe函数接受一个观察者对象并返回一个函数。Observer对象提供三种方法：next、error和complete。要发出值，可以调用观察者。下一个方法。如果出现错误，可以使用观察者错误函数抛出错误并使可观察到的停止。如果不再需要观察者，并且没有更多的值要发出，可以调用观察者。完成方法。还有，打电话可观察。创建将返回一个可以通过subscribe方法订阅的Observable。此方法返回一个函数，当您想从observable取消订阅时，可以调用该函数。不要把可观察。创建（订阅）和可观察的订阅(). 以前的subscribe函数是可观察。创建，这有点像可观察对象的蓝图，后者是调用可观察对象执行的蓝图。在你的音频播放器应用程序中，你要创建一个observable来获取关于媒体事件的通知，比如播放、暂停、时间更新等等。因此，基本上，您将在observable中收听Audio（）的媒体事件，然后通过观察者。下一个方法。现在你明白了为什么你需要一个可观察的，你可以开始在你的爱奥尼亚应用程序中创建一个服务：ionic生成提供商音频这将在一个名为音频.ts在./src/providers/audio/下，此服务将添加到应用程序模块.ts。替换音频.ts归档方式：从"@angular/core"导入{Injectable}；从'rxjs'导入{Observable，Subject}；从'rxjs/operators'导入{takeUntil}；从"moment"导入*作为moment；@可注射（）导出类音频提供程序{私有站点$=new Subject（）；private audioObj=new Audio（）；构造函数（）{}私有streamObservable（url）{让事件=["已结束"、"错误"、"播放"、"正在播放"、"暂停"、"timeupdate"、"canplay"、"loadedmetadata"、"loadstart"];const addEvents=函数（对象、事件、处理程序）{事件.forEach（事件=>{目标地址侦听器（事件，处理程序）；});};const removeEvents=函数（对象、事件、处理程序）{事件.forEach（事件=>{对象移除事件侦听器（事件，处理程序）；});};返回可观察。创建（观察者=>{//播放音频此.audioObj.src=网址；此音频对象加载();这是一部音乐剧();//媒体活动const handler=（event）=>观察者。下一个（事件）；附加事件(这个是audioObj，事件，处理程序）；return（）=>{//别玩了这个声音对象暂停();此音频对象当前时间=0；//删除事件侦听器移除事件(这个是audioObj，事件，处理程序）；};});}}现在，无论何时你想播放一个新的音频文件，你都要创建这个可观察的文件，并监听所有这些媒体事件。您将通过以下方法添加一个新的AudioStream（）方法：// ... 导入语句。。。导出类音频提供程序{// ... 构造函数和其他方法。。。播放流（url）{返回这是streamObservable（url）.管道(这个。住手$));}}需要注意的是，如果这个。住手$表示任何值。结束AudioProvider服务现在您已经具备了AudioProvider服务的基础，您可以开发它的其余方法：play、pause、stop、seekTo和formatTime。由于它们的实现是不言而喻的，您只需将这五个方法添加到AudioProvide中