WaveSurfer加载指示器

问题描述

我正在Angular项目中使用ngx-spinner组件（以显示加载指示器）和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();
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）