等待音乐加载时的离子旋转器

Question

在我的音乐应用程序中，我有一个“点击”功能，它发出一个 http 请求并从服务器播放 .mp3 文件。我的问题是，有时应用程序需要一段时间才能从服务器获取音频，这就是我添加离子旋转器的原因。我希望微调器仅在音频加载时显示，然后消失。

Home.html

<ion-card-content (click)="play(sound)">
      <div class="wrapper">
      <ion-spinner class="color-green" name="{{ sound.spinner }}"></ion-spinner>
      <img src="{{ sound.imageUrl }}" />       
      </div>     

    </ion-card-content>

Home.ts

/* Plays a sound, pausing other playing sounds if necessary */
  play(sound) {



console.log(sound)
if(this.media) {      
  this.media.pause();      
}
this.media = new Audio(sound.file);    
this.media.load();
this.media.play();
 }

Answer 1

在 Home.ts 中添加以下代码

<ion-card-content (click)="play(sound)">
      <div class="wrapper">
      <ion-spinner class="color-green" [name]="sound.spinner" [paused]="toggleSpinner"></ion-spinner>
      <img src="{{ sound.imageUrl }}" />       
      </div>     

    </ion-card-content>

在构造函数中

toggleSpinner= false

 play(sound) {
    toggleSpinner= true
 ......
 }