title: How to implement wavesurfer-js in typescript
body: <p>I am using wavesurfer-js angular 6  application,the player opens with no controls and also with an error says :</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'wavesurfer' of undefined</p>
  </blockquote>
  
  <p>Here is my ts code :</p>
  
  <pre><code>import { Component, AfterViewInit, OnInit } from '@angular/core';
  import { MatBottomSheetRef } from '@angular/material';
  import WaveSurfer from 'wavesurfer.js';
  import VideojsWavesurfer from 'videojs-wavesurfer';
  import SpectrogramPlugin from 
  'wavesurfer.js/dist/plugin/wavesurfer.spectrogram.min.js';
  @Component({
    selector: 'app-audio-page',
    templateUrl: './audio-page.component.html',
    styleUrls: ['./audio-page.component.scss'],
  })
  export class AudioPageComponent implements OnInit {
    public wavesurfer: WaveSurfer;
    constructor(private bottomSheetRef: 
  MatBottomSheetRef&lt;AudioPageComponent&gt;){ }
  
    ngOnInit() {
      let audiofile = 
   "https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox
  /song_cjrg_teasdale_64kb.mp3"
      this.wavesurfer = WaveSurfer.create({
    container: '#waveform',
    height:100,
    waveColor : 'red',
    scrollParent: true,
    progressColor: 'purple',
    plugins: [
        SpectrogramPlugin.create({
            container: "#wave-spectrogram"
        })
    ]
  });
  
  this.wavesurfer.load(audiofile);        
  
    this.wavesurfer.on('ready', function () {
        this.wavesurfer.play();
    });
  
   }
  
  } 
  </code></pre>
  
  <p>and my HTML :</p>
  
  <pre><code>  &lt;div id="waveform"&gt;&lt;/div&gt;
    &lt;div id="wave-spectrogram"&gt;&lt;/div&gt;
  </code></pre>