title: How to get a Waveform Music Player with Angular/Typescript
body: <p>My goal is to set up a simple music player in my angular 8 project, that displays the inserted music in static wave form, similar to soundclouds player:</p>
  
  <p><a href="https://i.stack.imgur.com/fQ6Tt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fQ6Tt.png" alt="enter image description here"></a></p>
  
  <p>According to my search, this can be done with either:</p>
  
  <p><strong>Peaks JS</strong>: <a href="https://medium.com/better-programming/peaks-js-interact-with-audio-waveforms-b7cb5bd3939a" rel="nofollow noreferrer">https://medium.com/better-programming/peaks-js-interact-with-audio-waveforms-b7cb5bd3939a</a> <br>
  <strong>Amplitude JS</strong> : <a href="https://521dimensions.com/open-source/amplitudejs/docs/configuration/" rel="nofollow noreferrer">https://521dimensions.com/open-source/amplitudejs/docs/configuration/</a> <br>
  <strong>or Wavesurfer JS</strong>: <a href="https://wavesurfer-js.org/" rel="nofollow noreferrer">https://wavesurfer-js.org/</a></p>
  
  <p>Unfortunately, none of them has a decent documentation on how to import this properly to angular or typescript in general. </p>
  
  <p>I tried it with Wavesurfer JS but failed.</p>
  
  <p>component.ts :</p>
  
  <pre><code> import { WaveSurfer } from 'wavesurfer.js';
  
      export class MusicComponent {
  
      public wavesurfer
  
        constructor() {
  
          this.wavesurfer = WaveSurfer.create({
            container: '#waveform',
            waveColor: 'violet',
            progressColor: 'purple'
          });
  
          this.wavesurfer.load('./assets/img/hollywood.wav');
  
  
  
        }
  
      }
  </code></pre>
  
  <p>html </p>
  
  <pre><code> &lt;div id="waveform"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The questions are now:<br>
  1. Is there some other good practice on how to implement such a player with angular, that i didnt find.<br>
  2. Is there a way to make wavesurf work in Angular, or is my code wrong.</p>