Question

我正在typescript项目中实现waveurfer-js，播放器打开，但是我找不到任何控件来播放暂停或静音事件，

Index.HTML

   <script src="https://unpkg.com/wavesurfer.js"></script>

CSS

   <div id="waveform"></div>

TS

    import WaveSurfer from 'wavesurfer.js';
    var wavesurfer = Object.create(WaveSurfer);

@Component({
  selector: 'app-audio-page',
  templateUrl: './audio-page.component.html',
  styleUrls: ['./audio-page.component.scss'],
})

    export class AudioPageComponent implements OnInit {

  constructor(private bottomSheetRef: 
MatBottomSheetRef<AudioPageComponent>) { }

  audiofile = 
 "http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/
song_cjrg_teasdale_64kb.mp3";

  ngOnInit() {

  wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: '#a8d4e4',
  progressColor: '#1a99be',
  backend: 'MediaElement',
});

  wavesurfer.load(this.audiofile);

  wavesurfer.on('ready', function () {
  wavesurfer.play();

  });


}


  openLink(event: MouseEvent): void {
    this.bottomSheetRef.dismiss();
    event.preventDefault();
  }

}

当我尝试绑定

之类的事件时

(click)="wavesurfer.playPause()"

出现错误“无法读取未定义的属性'playPause'”

Answer 1

您需要像这样创建WaveSurfer对象：

describe('Marble testing with timeout', () => {

  let source;

  beforeEach(() => {
    source = cold('a', { a: { id: 'a' } }).pipe(
      timeout(500),
      filter((a) => false),
      catchError(err => {
        return of({ timeout: true })
      }),
      take(1)
    );
  });

  it('should work with scheduler and expectObservable', () => {
    const scheduler = getTestScheduler();
    scheduler.run(({ expectObservable }) => {
      expectObservable(source).toBe('500ms (0|)', [{ timeout: true }]);
    });
  });
});

在Typescript中实现Wavesurfer-js

1 个答案: