{"id":24799074,"url":"https://github.com/califken/angular-wavesurfer-service","last_synced_at":"2025-06-14T16:35:52.941Z","repository":{"id":47779192,"uuid":"386686600","full_name":"califken/angular-wavesurfer-service","owner":"califken","description":"This library provides wavesurfer.js as an Angular service and component.","archived":false,"fork":false,"pushed_at":"2021-08-25T15:16:18.000Z","size":678,"stargazers_count":5,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T23:04:51.337Z","etag":null,"topics":["angular","audio","player","wavesurfer","wavesurfer-js"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/califken.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-07-16T15:40:14.000Z","updated_at":"2024-03-04T01:20:11.000Z","dependencies_parsed_at":"2022-09-03T02:41:58.335Z","dependency_job_id":null,"html_url":"https://github.com/califken/angular-wavesurfer-service","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/califken/angular-wavesurfer-service","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/califken%2Fangular-wavesurfer-service","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/califken%2Fangular-wavesurfer-service/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/califken%2Fangular-wavesurfer-service/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/califken%2Fangular-wavesurfer-service/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/califken","download_url":"https://codeload.github.com/califken/angular-wavesurfer-service/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/califken%2Fangular-wavesurfer-service/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259846234,"owners_count":22920888,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","audio","player","wavesurfer","wavesurfer-js"],"created_at":"2025-01-30T02:16:29.386Z","updated_at":"2025-06-14T16:35:52.925Z","avatar_url":"https://github.com/califken.png","language":"TypeScript","readme":"# Angular Wavesurfer Service\n\nThis library provides wavesurfer.js as an Angular service and component.\n\nWavesurfer.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.\n\n## Demo\n\nTry this out on [stackblitz](https://stackblitz.com/edit/angular-wavesurfer-service?file=src/app/app.component.ts)\n\n## Installation\n\nUse your favorite package manager / [npm](https://www.npmjs.com/package/npm) to install.\n\n```bash\nnpm install angular-wavesurfer-service --save\n```\nAdd AngularWavesurferServiceModule to your NgModule.\n```import { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { AppComponent } from './app.component';\nimport { AngularWavesurferServiceModule } from 'angular-wavesurfer-service';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    AngularWavesurferServiceModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\nYou will need to add the following compiler option to your application's tsconfig.json file:\n```\"allowSyntheticDefaultImports\": true```\n\n## Usage\n\n### WaveService: a Simple WaveSurfer Service\nInject the WaveService in your constructor, and assign the object returned by the create() function to a variable for a full WaveSurfer object.  \n\nThe 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.\n\napp.component.ts\n```\nmp3url = 'https://www.kennethcaple.com/api/mp3/richinlovemutedguitarechoing.mp3';\n\nconstructor(public waveService: WaveService) {}\n\nngAfterViewInit() {\n  this.wave = this.waveService.create({container: '#waveservice'});\n  this.wave.load(this.mp3url);\n}\n```\napp.component.html\n```\n\u003cdiv id=\"waveservice\"\u003e\u003c/div\u003e\n\u003cbutton (click)=\"wave.play()\"\u003ePlay\u003c/button\u003e\n\u003cbutton (click)=\"wave.pause()\"\u003ePause\u003c/button\u003e\n```\n\n\n### Wavesurfer Component: a ready to go waveform component.\nYou can use the included \u003cb\u003ewavesurfer\u003c/b\u003e 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.\n```\n\u003cwavesurfer [trackurl]=\"'https://www.kennethcaple.com/api/mp3/richinlovemutedguitarechoing.mp3'\"\u003e\u003c/wavesurfer\u003e\n```\n### Wavesurfer Options\nYou can pass an options object to the Wavesurfer component to adjust parameters of the player.  See [Wavesurfer Options](https://wavesurfer-js.org/docs/options.html) on the Wavesurfer site for a more detailed explanation of each option.\n\nYou can also experiment with several of the WaveSurfer parameters using the \n[Wavesurfer Config Playground](https://wavesurferconfigplayground.web.app/).\n\nThis service currently supports the following options:\n\n    container: string\n    backgroundColor: string\n    cursorColor: string\n    progressColor: string\n    waveColor: string\n    backend: string\n    barGap: number\n    barHeight: number\n    barMinHeight: number\n    barRadius: number\n    barWidth: number\n    autoCenter: boolean\n    hideScrollbar: boolean\n    height: number\n    interact: boolean\n    loopSelection: boolean\n    mediaControls: boolean\n    normalize: boolean\n    partialRender: boolean\n    removeMediaElementOnDestroy: boolean\n    scrollParent: boolean\n    splitChannels: boolean\n    splitChannelsOptionsoverlay: boolean\n    splitChannelsOptionsrelativeNormalization: boolean\n    responsive: boolean\n    skipLength: number\n    maxCanvasWidth: number\n    minPxPerSec: number\n    pixelRatio: number\n    fillParent: boolean\n    cursorWidth: number\n    audioRate: number\n\nExample\n\n```\n\u003cwavesurfer [trackurl]=\"'https://www.kennethcaple.com/api/mp3/richinlovemutedguitarechoing.mp3'\" [wavesurferOptions]=\"{backgroundColor: 'black',waveColor:'red'}\"\u003e\u003c/wavesurfer\u003e\n```\n\n### Wavesurfer Service\n\nImport the Wavesurfer Service directly into your own components to be able to designate other elements as the playback controller.\n\nIn your component: \n\n#### HTML \nGive 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.\n``` \n\u003cbutton  (click)=\"wsservice.play()\"\u003ePlay\u003c/button\u003e\n\u003cdiv id=\"myid\"\u003e\u003c/div\u003e\n```\n#### Component\nInject 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.\n```\nimport { Component, AfterViewInit, OnDestroy } from '@angular/core';\nimport { AngularWavesurferService } from 'angular-wavesurfer-service';\n\n@Component({\n  selector: 'app-wstest',\n  templateUrl: './wstest.component.html',\n  styleUrls: ['./wstest.component.scss']\n})\nexport class WstestComponent implements AfterViewInit, OnDestroy {\n\n  constructor(public wsservice: AngularWavesurferService) {}\n\n  ngAfterViewInit(): void {\n    this.wsservice.load('https://www.kennethcaple.com/api/mp3/richinlovemutedguitarechoing.mp3', {container: '#myid'});\n  }\n}\n```\n\n## Features\n### Click to Play\nAll rendered waveforms are click-to-play.\n### Global Media Control Service\nWhen 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.\n\n## Projects\n\n### Spleeter Online -  [spleeter.online](https://spleeter.online) \nSpleeter 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.\n\n### Submit a project\nIf you have a project that you would like included in this list, please open an issue, submit a pull request or contact me at kennethmfire@gmail.com.\n\n## Contributing\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\n\n## License\nThis work is licensed under a [BSD 3-Clause License](https://opensource.org/licenses/BSD-3-Clause).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalifken%2Fangular-wavesurfer-service","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcalifken%2Fangular-wavesurfer-service","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalifken%2Fangular-wavesurfer-service/lists"}