Javascript 使用WaveSurfer加载时的指示器

我在角度项目中使用ngx微调器组件（显示加载指示器）和WaveSurfer组件

微调器存在一些问题

第一个问题

当我加载音频文件并运行加载指示器（spinner.show方法）时，将显示该指示器。之后，在调试器中，我看到“this.wavesurfer.on ready”事件有一个条目，但指示器继续旋转。用鼠标单击屏幕或最小化窗口并再次打开后，指示器将隐藏

import WaveSurfer from 'wavesurfer.js';
import { NgxSpinnerService } from "ngx-spinner";

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

constructor(private spinner: NgxSpinnerService) { }

...

listenwav(url:string){
  this.spinner.show();
  this.wavesurfer.load(url);
}

this.wavesurfer.on('ready', () => {
  this.spinner.hide();  
  this.wavesurfer.enableDragSelection({});      
  this.loadRegions(this.currentRec.markers);
  this.loadCloseButton();   
  this.wavesurfer.playPause();
});
...........
}

**第二个问题**

我动态地为光谱图使用插件初始化。加载光谱图后，指示器开始显示。这可能需要几秒钟（取决于音频文件的大小）。该指示器以与第一个选项相同的方式隐藏（单击等后）

clickBtn(){
  this.spinner.show();
  this.initAndLoadSpectrogram();
  this.spinner.hide();
}

initAndLoadSpectrogram() {    
    this.wavesurfer.stop();
    this.wavesurfer.addPlugin(Spectrogram.create({
      container: "#wave-spectrogram",
      labels: true
    }));
    this.wavesurfer.initPlugin('spectrogram');    
    this.wavesurfer.play();
  }