sourav-das/stem-separator

1# <img src="https://user-images.githubusercontent.com/381895/226091100-f5567a28-7736-4d37-8f84-e08f297b7e1a.png" alt="logo" height="60" valign="middle" /> wavesurfer.js2 3[![npm](https://img.shields.io/npm/v/wavesurfer.js)](https://www.npmjs.com/package/wavesurfer.js) [![sponsor](https://img.shields.io/badge/sponsor_us-🤍-%23B14586)](https://github.com/sponsors/katspaugh)4 5**Wavesurfer.js** is an interactive waveform rendering and audio playback library, perfect for web applications. It leverages modern web technologies to provide a robust and visually engaging audio experience.6 7<img width="626" alt="waveform screenshot" src="https://github.com/katspaugh/wavesurfer.js/assets/381895/05f03bed-800e-4fa1-b09a-82a39a1c62ce">8 9**Gold sponsor 💖** [Closed Caption Creator](https://www.closedcaptioncreator.com)10 11# Table of contents12 131. [Getting started](#getting-started)142. [API reference](#api-reference)153. [Plugins](#plugins)164. [CSS styling](#css-styling)175. [Frequent questions](#questions)186. [Development](#development)197. [Tests](#tests)208. [Feedback](#feedback)21 22## Getting started23 24Install and import the package:25 26```bash27npm install --save wavesurfer.js28```29```js30import WaveSurfer from 'wavesurfer.js'31```32 33Alternatively, insert a UMD script tag which exports the library as a global `WaveSurfer` variable:34```html35<script src="https://unpkg.com/wavesurfer.js@7"></script>36```37 38Create a wavesurfer instance and pass various [options](http://wavesurfer.xyz/docs/options):39```js40const wavesurfer = WaveSurfer.create({41  container: '#waveform',42  waveColor: '#4F4A85',43  progressColor: '#383351',44  url: '/audio.mp3',45})46```47 48To import one of the plugins, e.g. the [Regions plugin](https://wavesurfer.xyz/examples/?regions.js):49```js50import Regions from 'wavesurfer.js/dist/plugins/regions.esm.js'51```52 53Or as a script tag that will export `WaveSurfer.Regions`:54```html55<script src="https://unpkg.com/wavesurfer.js@7/dist/plugins/regions.min.js"></script>56```57 58TypeScript types are included in the package, so there's no need to install `@types/wavesurfer.js`.59 60See more [examples](https://wavesurfer.xyz/examples).61 62## API reference63 64See the wavesurfer.js documentation on our website:65 66 * [methods](https://wavesurfer.xyz/docs/methods)67 * [options](http://wavesurfer.xyz/docs/options)68 * [events](http://wavesurfer.xyz/docs/events)69 70## Plugins71 72We maintain a number of official plugins that add various extra features:73 74 * [Regions](https://wavesurfer.xyz/examples/?regions.js) – visual overlays and markers for regions of audio75 * [Timeline](https://wavesurfer.xyz/examples/?timeline.js) – displays notches and time labels below the waveform76 * [Minimap](https://wavesurfer.xyz/examples/?minimap.js) – a small waveform that serves as a scrollbar for the main waveform77 * [Envelope](https://wavesurfer.xyz/examples/?envelope.js) – a graphical interface to add fade-in and -out effects and control volume78 * [Record](https://wavesurfer.xyz/examples/?record.js) – records audio from the microphone and renders a waveform79 * [Spectrogram](https://wavesurfer.xyz/examples/?spectrogram.js) – visualization of an audio frequency spectrum (written by @akreal)80 * [Hover](https://wavesurfer.xyz/examples/?hover.js) – shows a vertical line and timestmap on waveform hover81 82## CSS styling83 84wavesurfer.js v7 is rendered into a Shadow DOM tree. This isolates its CSS from the rest of the web page.85However, it's still possible to style various wavesurfer.js elements with CSS via the `::part()` pseudo-selector.86For example:87 88```css89#waveform ::part(cursor):before {90  content: '🏄';91}92#waveform ::part(region) {93  font-family: fantasy;94}95```96 97You can see which elements you can style in the DOM inspector – they will have a `part` attribute.98See [this example](https://wavesurfer.xyz/examples/?styling.js) to play around with styling.99 100## Questions101 102Have a question about integrating wavesurfer.js on your website? Feel free to ask in our [Discussions forum](https://github.com/wavesurfer-js/wavesurfer.js/discussions/categories/q-a).103 104However, please keep in mind that this forum is dedicated to wavesurfer-specific questions. If you're new to JavaScript and need help with the general basics like importing NPM modules, please consider asking ChatGPT or StackOverflow first.105 106### FAQ107 108<details>109  <summary>I'm having CORS issues</summary>110  Wavesurfer fetches audio from the URL you specify in order to decode it. Make sure this URL allows fetching data from your domain. In browser JavaScript, you can only fetch data eithetr from <b>the same domain</b> or another domain if and only if that domain enables <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS</a>. So if your audio file is on an external domain, make sure that domain sends the right Access-Control-Allow-Origin headers. There's nothing you can do about it from the requesting side (i.e. your JS code).111</details>112 113<details>114  <summary>Does wavesurfer support large files?</summary>115  Since wavesurfer decodes audio entirely in the browser using Web Audio, large clips may fail to decode due to memory constraints. We recommend using pre-decoded peaks for large files (see <a href="https://wavesurfer.xyz/examples/?predecoded.js">this example</a>). You can use a tool like <a href="https://codeberg.org/chrisn/audiowaveform">audiowaveform</a> to generate peaks.116</details>117 118<details>119  <summary>What about streaming audio?</summary>120  Streaming audio is supported only with <a href="https://wavesurfer.xyz/examples/?predecoded.js">pre-decoded peaks and duration</a>.121</details>122 123<details>124  <summary>There is a mismatch between my audio and the waveform. How do I fix it?</summary>125  If you're using a VBR (variable bit rate) audio file, there might be a mismatch between the audio and the waveform. This can be fixed by converting your file to CBR (constant bit rate).126  <p>Alternatively, you can use the <a href="https://wavesurfer.xyz/examples/?webaudio-shim.js">Web Audio shim</a> which is more accurate.</p>127</details>128 129<details>130  <summary>How do I connect wavesurfer.js to Web Audio effects?</summary>131Generally, wavesurfer.js doesn't aim to be a wrapper for all things Web Audio. It's just a player with a waveform visualization. It does allow connecting itself to a Web Audio graph by exporting its audio element (see <a href="https://wavesurfer.xyz/examples/?4436ec40a2ab943243755e659ae32196">this example</a>) but nothign more than that. Please don't expect wavesurfer to be able to cut, add effects, or process your audio in any way.132</details>133 134## Development135 136To get started with development, follow these steps:137 138 1. Install dev dependencies:139 140```141yarn142```143 144 2. Start the TypeScript compiler in watch mode and launch an HTTP server:145 146```147yarn start148```149 150This command will open http://localhost:9090 in your browser with live reload, allowing you to see the changes as you develop.151 152## Tests153 154The tests are written in the Cypress framework. They are a mix of e2e and visual regression tests.155 156To run the test suite locally, first build the project:157```158yarn build159```160 161Then launch the tests:162```163yarn cypress164```165 166## Feedback167 168We appreciate your feedback and contributions!169 170If you encounter any issues or have suggestions for improvements, please don't hesitate to post in our [forum](https://github.com/wavesurfer-js/wavesurfer.js/discussions/categories/q-a).171 172We hope you enjoy using wavesurfer.js and look forward to hearing about your experiences with the library!173