npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ng-waveform

v0.2.1

Published

Library to visualize audio waveform. Built as pure Angular library that doesn't wrap any of JS library. With NgWaveform you can create interactive customisable waveform of any audio file in your Angular application.

Downloads

273

Readme

NgWaveform

Library to visualize audio waveform. Built as pure Angular library that doesn't wrap any of JS library. With NgWaveform you can create interactive customisable waveform of any audio file in your Angular application.

Quick start

npm install --save ng-waveform
import { NgWaveformModule } from 'ng-waveform';
import { ITimeUpdateEvent, NgWaveformComponent, IRegionPositions } from 'ng-waveform';

@ViewChild('waveform', { static: false }) waveform: NgWaveformComponent;

onPlayButtonClick() {
  this.waveform.play();
}
onPauseButtonClick() {
  this.waveform.pause();
}
<ng-waveform #waveform class="waveform"
    [src]="src"
    [height]="150"
    [useRegion]="true"
    backgroundColor="#d3d3d3"
    regionBackgroundColor="rgba(255, 255, 255, 0.7)"
    regionStartStickColor="#21f032"
    regionEndStickColor="red"
    regionTextColor="#09417e"
    [withRegionLabels]="true"
    waveColor="#ff11ff"
    (trackLoaded)="onTrackLoaded($event)"
    (rendered)="onTrackRendered($event)"
    (durationChange)="onDurationChange($event)"
    (timeUpdate)="onTimeUpdate($event)"
    (paused)="onPaused()"
    (regionChange)="onRegionChange($event)"
  >
</ng-waveform>

API Reference

NgWaveformComponent

Methods

  • play(start: number = 0): void Play audio, start - starting position

  • pause(): void Stops audio

Events

  • trackLoaded - emits when data fetched from Url, returns time in ms spent for fetching.
  • rendered - emits when waveform is rendered, returns time in ms spent for rendering.
  • durationChange - emits when duration of audio is changed, returns duration value in seconds.
  • timeUpdate - emits when current time of audio changes, returns object that implements interface ITimeUpdateEvent.
  • paused - emits when audio paused. Useful for switch Play/Pause buttons in external control.
  • regionChange - emits when region start or/and end positions change, returns object that implements interface IRegionPositions.

Properties

Name | Description -------------|------------ src: string | Url of src mp3 file height = 100 | Height of component waveColor = '#d3d3d3' | Color of wave backgroundColor = 'transparent' | Background color of component overlayBackgroundColor = 'rgba(0, 0, 0, 0.5)' | Background color of overlay filling component while playing useRegion: boolean | Turn region on withRegionLabels: boolean | Turn region labels on regionBackgroundColor = 'transparent' | Background color of region regionStartStickColor = 'red' | Color of region left border stick regionEndStickColor = 'red' | Color of region right border stick regionTextColor = '#000' | Color of region labels text autoplay | Turn autoplay on load on

Intrfaces

interface ITimeUpdateEvent {
  time: number;
  progress: number;
}
interface IRegionPositions {
  start: number;
  end: number;
}

Credits

Thank you very much for great inspiration wavesurfer.js team.

Conclusion

Feedback, issues and stars will be very appreciated.