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

angular-wavesurfer-service

v2.1.1

Published

This library provides wavesurfer.js as an Angular service and component.

Downloads

194

Readme

Angular Wavesurfer Service

This library provides wavesurfer.js as an Angular service and component.

Wavesurfer.js is a customizable audio waveform visualization, built on top of Web Audio API and HTML5 Canvas. With wavesurfer.js you can create anything from an HTML5 audio player to a sophisticated DJ application.

Examples

WaveService

Wavesurfer Component

Installation

Use your favorite package manager / npm to install.

npm install angular-wavesurfer-service --save

Add AngularWavesurferServiceModule to your NgModule.

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { AngularWavesurferServiceModule } from 'angular-wavesurfer-service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularWavesurferServiceModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

You will need to add the following compiler option to your application's tsconfig.json file: "allowSyntheticDefaultImports": true

Usage

WaveService: a Simple WaveSurfer Service

Inject the WaveService in your constructor, and assign the object returned by the create() function to a variable for a full WaveSurfer object.

The create function requires a WaveSurfer configuration object with at least the container property set to an existing element's selector. See Wavesurfer Options below for more configuration options.

app.component.ts

mp3url = 'https://www.kennethcaple.com/api/mp3/richinlovemutedguitarechoing.mp3';

constructor(public waveService: WaveService) {}

ngAfterViewInit() {
  this.wave = this.waveService.create({container: '#waveservice'});
  this.wave.load(this.mp3url);
}

app.component.html

<div id="waveservice"></div>
<button (click)="wave.play()">Play</button>
<button (click)="wave.pause()">Pause</button>

Wavesurfer Component: a ready to go waveform component.

You can use the included wavesurfer click-to-play component anywhere in your app. It requires a URL to an audio file. Be sure to add the single quotes within the double quotes, if the track URL is not bound to a variable.

<wavesurfer [trackurl]="'https://www.kennethcaple.com/api/mp3/richinlovemutedguitarechoing.mp3'"></wavesurfer>

Wavesurfer Options

You can pass an options object to the Wavesurfer component to adjust parameters of the player. See Wavesurfer Options on the Wavesurfer site for a more detailed explanation of each option.

You can also experiment with several of the WaveSurfer parameters using the Wavesurfer Config Playground.

This service currently supports the following options:

container: string
backgroundColor: string
cursorColor: string
progressColor: string
waveColor: string
backend: string
barGap: number
barHeight: number
barMinHeight: number
barRadius: number
barWidth: number
autoCenter: boolean
hideScrollbar: boolean
height: number
interact: boolean
loopSelection: boolean
mediaControls: boolean
normalize: boolean
partialRender: boolean
removeMediaElementOnDestroy: boolean
scrollParent: boolean
splitChannels: boolean
splitChannelsOptionsoverlay: boolean
splitChannelsOptionsrelativeNormalization: boolean
responsive: boolean
skipLength: number
maxCanvasWidth: number
minPxPerSec: number
pixelRatio: number
fillParent: boolean
cursorWidth: number
audioRate: number

Example

<wavesurfer [trackurl]="'https://www.kennethcaple.com/api/mp3/richinlovemutedguitarechoing.mp3'" [wavesurferOptions]="{backgroundColor: 'black',waveColor:'red'}"></wavesurfer>

Wavesurfer Service

Import the Wavesurfer Service directly into your own components to be able to designate other elements as the playback controller.

In your component:

HTML

Give a unique ID to an element and call the Wavesurfer Service's play function as the handler for an event, such as a click on a button.

<button  (click)="wsservice.play()">Play</button>
<div id="myid"></div>

Component

Inject the Wavesurfer Service into your component, and in the AfterViewInit lifecycle method, load your audio file and pass the options object to the load function, specifying the element ID for the container in which Wavesurfer should render.

import { Component, AfterViewInit, OnDestroy } from '@angular/core';
import { AngularWavesurferService } from 'angular-wavesurfer-service';

@Component({
  selector: 'app-wstest',
  templateUrl: './wstest.component.html',
  styleUrls: ['./wstest.component.scss']
})
export class WstestComponent implements AfterViewInit, OnDestroy {

  constructor(public wsservice: AngularWavesurferService) {}

  ngAfterViewInit(): void {
    this.wsservice.load('https://www.kennethcaple.com/api/mp3/richinlovemutedguitarechoing.mp3', {container: '#myid'});
  }
}

Features

Click to Play

All rendered waveforms are click-to-play.

Global Media Control Service

When playing any waveform rendererd with this service, all other players instantiated by this service will stop. This is made possible by an included Globa Media Control Service RXJS behavior subject that the components listen to for notification to stop when another player is going to play.

Projects

Spleeter Online - spleeter.online

Spleeter Online extracts the vocal stem from any mp3 or wav file. The service is an interface to Deezer's Spleeter stem separation library that uses Tensorflow with pretrained models written in Python.

Submit a project

If you have a project that you would like included in this list, please open an issue, submit a pull request or contact me at [email protected].

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

This work is licensed under a BSD 3-Clause License.