ion-spinner在等待音樂加載時

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 
...... 
}