如何在angular project中预加载音频文件？_Angular_Audio_Audio Player

如何在angular project中预加载音频文件？

angular audio

如何在angular project中预加载音频文件？,angular,audio,audio-player,Angular,Audio,Audio Player,我已经做了一个项目。我想在按钮点击事件上播放小的mp3文件，当用户从UI点击各种按钮时，音乐应该根据所选按钮播放。我想预装所有的音乐文件，这是在mp3格式，我的用户界面应该是可见的，只有在屏幕上的mp3文件加载后，在角度。我该怎么做提前感谢Angular 8路由器提供了一个解析属性，该属性使用路由解析程序，并允许您的应用程序在导航到路由之前获取数据（即解析路由数据）。您可以通过实现Resolve接口来创建路由解析器。例如： audio-resolver.service.ts：从'@ang

我已经做了一个项目。我想在按钮点击事件上播放小的mp3文件，当用户从UI点击各种按钮时，音乐应该根据所选按钮播放。我想预装所有的音乐文件，这是在mp3格式，我的用户界面应该是可见的，只有在屏幕上的mp3文件加载后，在角度。我该怎么做

提前感谢

Angular 8路由器提供了一个解析属性，该属性使用路由解析程序，并允许您的应用程序在导航到路由之前获取数据（即解析路由数据）。您可以通过实现Resolve接口来创建路由解析器。例如：

audio-resolver.service.ts：

从'@angular/core'导入{Injectable}；
从'@angular/router'导入{Resolve}；
@可注射（）
导出类AudioResolver实现解析{
音频文件=[
"http://www.teanglann.ie/CanC/nua.mp3",
"http://www.teanglann.ie/CanC/ag.mp3",
"http://www.teanglann.ie/CanC/dul.mp3",
"http://www.teanglann.ie/CanC/freisin.mp3"
];
resolve=（）：Promise=>Promise.all（this.audioFiles.map（this.preloadAudio））
preloadAudio=（url:string）：Promise=>{
const audio=新音频（）；
audio.src=url；
返回新承诺（（res，req）=>audio.addEventListener（'canplaythrough'，（）=>res（url），false））
//文件加载后，承诺将得到解决
//该文件将由浏览器保留为缓存
}
}

如您所见，实现Angular router的Resolve接口的唯一要求是我们的类有一个Resolve方法。从该方法返回的任何内容都将是解析数据，在本例中，返回值为

Promise

，将解析为URL数组

现在，您可以将路由模块设置为包含解析程序：

app.routing.module.ts：

从'@angular/core'导入{NgModule}；
从'@angular/router'导入{Routes，RouterModule}；
从“./components/player/player.component”导入{PlayerComponent}；
从“./services/audio resolver.service”导入{AudioResolver}；
常数路由：路由=[
{path:，组件：PlayerComponent，解析：{songs:ResolverService}
];
@NGD模块({
导入：[RouterModule.forRoot（路由）]，
导出：[路由模块]，
提供者：[音频解析程序]
})
导出类AppRoutingModule{}

在组件中，我们可以使用ActivateRoute的快照对象的data属性访问解析的数据

player.component.ts：

从'@angular/core'导入{Component，OnInit}；
从'@angular/router'导入{ActivatedRoute}；
@组成部分({
选择器：“应用程序播放器”，
templateUrl:“./player.component.html”，
样式URL:['./player.component.scss']
})
导出类PlayerComponent实现OnInit{
歌曲：弦乐[]；
构造函数（专用路由：ActivatedRoute）{}
恩戈尼尼特（）{
this.songs=this.route.snapshot.data.songs；
}
}

player.component.html：

现在，如果您继续查看浏览器网络，您将看到文件在

PlayerComponent

初始化之前加载，并且不再加载。

Angular 8路由器提供一个resolve属性，该属性使用路由解析程序，并允许应用程序在导航到路由之前获取数据（即解析路由数据）。您可以通过实现Resolve接口来创建路由解析器。例如：