ng-audio-visualizer v1.1.0

NgAudioVisualizer

NgAudioVisualizer is an angular package visualizes audio files

Installation

npm i ng-audio-visualizer
yarn add ng-audio-visualizer

Images

Usage

1. Use the component directly

1. Add NgAudioVisualizerModule to your module

import { NgAudioViisualizerModule } from 'ng-audio-visualizer';

@NgModule({
  ...
  imports: [
    ....
    NgAudioVisualizerModule,
    ....
  ],
  ....
})
export class YourModule { }

2. Then you can use the component in your template

<ng-audio-visualizer [title]="title" [url]="url"></ng-audio-visualizer>

3. you can pause and play the audio

<ng-audio-visualizer [title]="title" [url]="url" #player></ng-audio-visualizer>

@Component({
    ....
 })
export class WrapperComponent implements OnInit {
    ...
    @ViewChild("player") player!: NgAudioVisualizer;
    ...
    
    playAudio(){
        this.player.play();
    }
    
    pauseAudio(){
        this.player.pause();
    }
  
}

2. Use the Circular Visulaizer Class

1. First in your component initilize the player
2. Add <canvas> in your template
3. create visulaizer object
4. You're good to go

Component Template:

...
<canvas #visualCanavas></canvas>
...

Inputs For Component

Typescript:

...
import { Player, CircularVisualizer } from 'ng-audio-visualizer';
...

@Component({
    ....
 })
export class CoolComponent implements OnInit, AfterViewInit {
    ...
    @ViewChild("visualCanavas") visualCanvasRef!: HTMLCanvasElement;
    player: Player;
    visulaizer: CircularVisualizer;
    ...
    
  ngOnInit() {
    const inputs = {....}
    this.player = new Player(inputs);
    this.player.init();
  }
  
  ngAfterViewInit(){
    const params = {
      player: this.player,
      canvas: this.visualCanvasRef.nativeElement,
      ....
    };
    
    this.visulaizer = new CircularVisualizer(params);
  }
}

Player Parmas

Visulaizer Config

Methods

those methods are both exposed by the player class and the component | Method | Description | | :-------------: | :-------------: | | play() | play the audio | | pause() | pause the audio |

those are exposed only by the player class | Method | Description | | :-------------: | :-------------: | | changeUrl(url: string) | | | seek(seconds: number) | | | getFrequencyData$() | returns an observable emits the frequency data each animation frame | | toggle() | toggles between play and pause | | isPlaying$() | returns an observable emits each time the state of the playing changes | | isPlaying() | same as the one above but sync | | getDuration() | returns the track duration | | getTime$() | returns an observable emits the current time of the audio | | getTime() | same as the one above but sync | | destroy() | clean the object, should be called before destroying the component |

Author

Mouhand Alkadri Linkedin Github Twitter Facebook

Credits

some code pieces was inspired by DavidLazic in this repo AudioVisulaizer

License

MIT