Question

在我的音乐应用中，我有一个＆＃34;点击＆＃34;发出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
 ......
 }

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

1 个答案: