Question

我刚刚使用播放器组件和播放器服务在Angular2中构建了一个音频播放器。

一切正常，我觉得有更好的方法来做到这一点。

音频对象应该在服务中还是在组件中？

我持怀疑态度，因为我使用了三种不同的可观测量，我不认为这是最好的方法。

player.component.ts：

export class PlayerComponent implements OnInit, OnDestroy {

  // General variables
  private song: Song;
  private currentTime: string;
  private fullTime: string;
  private isPlaying: boolean;
  // Subscription variables
  private songSubscription: any;
  private currentTimeSubscription: any;
  private fullTimeSubscription: any;

  constructor(private _playerService: PlayerService) {
  }

  ngOnInit() {
    this.songSubscription = this._playerService.song.subscribe(data => this.song = data);
    this.currentTimeSubscription = this._playerService.currentTime.subscribe(data => this.currentTime = data);
    this.fullTimeSubscription = this._playerService.fullTime.subscribe(data => this.fullTime = data);
    console.log("Player subscription initialized");
  }

  toggleAudio() {
    this.isPlaying = this._playerService.toggleAudio();
  }

  ngOnDestroy() {
    this.songSubscription.unsubscribe();
    this.currentTimeSubscription.unsubscribe();
    this.fullTimeSubscription.unsubscribe();
    console.log("Player subscription destroyed");
  }

}

player.service.ts：

export class PlayerService {

  private audio: any;
  public song: Subject<Song> = new Subject<Song>();
  public currentTime: Subject<string> = new Subject<string>();
  public fullTime: Subject<string> = new Subject<string>();


  constructor(private _utilityService: UtilityService) {
    this.audio = new Audio();
  }

  setPlayer(song: Song) {
    this.song.next(song);
    this.audio.src = song.audio;
    this.audio.oncanplaythrough = () => {
      this.audio.play();
      this.fullTime.next(
        this._utilityService.getFormatedTime(this.audio.duration)
      );
    };
    this.audio.ontimeupdate = () => {
      this.currentTime.next(
        this._utilityService.getFormatedTime(this.audio.currentTime)
      );
    };
  }

  toggleAudio() {
    if (this.audio.paused) {
      this.audio.play();
    } else {
      this.audio.pause();
    }

    return this.audio.paused;
  }

}

player.component.html：

<ul *ngIf="song" class="player">
  <li class="player-item">
    <a class="player-link" (click)="toggleAudio()">
      <i *ngIf="isPlaying"  class="fa fa-play" aria-hidden="true"></i>
      <i *ngIf="!isPlaying" class="fa fa-pause" aria-hidden="true"></i>
    </a>
  </li>
  <li class="player-item">
    <a class="player-link"><i class="fa fa-volume-up" aria-hidden="true"></i></a>
  </li>
  <li class="player-item">
    <a class="player-link">{{currentTime}}</a>
  </li>
  <li class="player-item">
    <a class="player-link"><i class="fa fa-fast-backward" aria-hidden="true"></i></a>
  </li>
  <li class="player-desc">
    <a class="player-link">{{song.title}} by {{song.artist}}</a>
  </li>
  <li class="player-item">
    <a class="player-link"><i class="fa fa-fast-forward" aria-hidden="true"></i></a>
  </li>
  <li class="player-item">
    <a class="player-link">{{fullTime}}</a>
  </li>
  <li class="player-item">
    <a class="player-link"><i class="fa fa-plus" aria-hidden="true"></i></a>
  </li>
  <li class="player-item">
    <a class="player-link"><i class="fa fa-share" aria-hidden="true"></i></a>
  </li>
</ul>

现在这是一个非常原始的玩家。在添加更多功能之前，我想确保正确实现它。

我感谢任何建议！

有没有更好的方法来实现这个音频播放器？

0 个答案: