Как предварительно загрузить аудио файлы в угловой проект? - PullRequest
Новая
       40

Как предварительно загрузить аудио файлы в угловой проект?

0 голосов
/ 23 октября 2019

Я сделал проект на угловой. Я хочу воспроизвести небольшой файл mp3 при нажатии кнопки, когда пользователь нажимает различные кнопки в пользовательском интерфейсе, музыка должна воспроизводиться на основе выбранной кнопки. Я хочу предварительно загрузить все музыкальные файлы в формате mp3, чтобы мой пользовательский интерфейс отображался на экране только после загрузки mp3-файлов в угловом формате. Как я могу это сделать?

Заранее спасибо

1 Ответ

2 голосов
/ 24 октября 2019

Angular 8 Router предоставляет свойство разрешения, которое принимает распознаватель маршрутов и позволяет вашему приложению получать данные перед переходом к маршруту (т. Е. Разрешать данные маршрута). Вы можете создать распознаватель маршрутов, внедрив интерфейс Resolve. Например:

audio-resolver.service.ts: 

  import { Injectable } from '@angular/core';
  import { Resolve } from '@angular/router';

  @Injectable()
  export class AudioResolver implements Resolve<Promise<string[]>>{

    audioFiles = [
      "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<string[]> => Promise.all(this.audioFiles.map(this.preloadAudio))

    preloadAudio = (url: string): Promise<string> => {
      const audio = new Audio();
      audio.src = url;
      return new Promise((res, req) => audio.addEventListener('canplaythrough', () => res(url), false))
      // once file is loaded, the promise will be resolved
      // the file will be kept by the browser as cache
    }
  }

Как видите, единственное требование для реализации интерфейса Resolve в Angular-маршрутизаторе - наличие в нашем классе метода resol. Все, что будет возвращено из этого метода, будет разрешенными данными, в нашем случае возвращаемым значением будет Promise<string[]>, которое будет преобразовано в массив urls.

Теперь вы можете настроить наш модуль маршрутизации для включения нашего преобразователя:

app.routing.module.ts: 

  import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { PlayerComponent } from './components/player/player.component';
  import { AudioResolver} from './services/audio-resolver.service';

  const routes: Routes = [
    { path: "", component: PlayerComponent, resolve: { songs: ResolverService } }
  ];

  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: [AudioResolver]
  })
  export class AppRoutingModule { }

В компоненте мы можем получить доступ к разрешенным данным, используя свойство data объекта снимка экрана ActivatedRoute.

player. component.ts: 

  import { Component, OnInit } from '@angular/core';
  import { ActivatedRoute } from '@angular/router';

  @Component({
    selector: 'app-player',
    templateUrl: './player.component.html',
    styleUrls: ['./player.component.scss']
  })
  export class PlayerComponent implements OnInit {
    songs: string[];

    constructor(private route: ActivatedRoute) { }

    ngOnInit() {
        this.songs = this.route.snapshot.data.songs;
    }
  }

player.component.html: 

<audio *ngFor="let src of songs" [src]="src" controls="" ><br></audio>

Теперь, если вы пойдете дальше и посмотрите на сеть браузера, вы увидите, что файлы загружаются доPlayerComponent инициализирован и больше никогда не загружается.

...