[ { "path": ".editorconfig", "content": "# http://editorconfig.org\n\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n" }, { "path": ".github/FUNDING.yml", "content": "github: [katspaugh]\n" }, { "path": ".github/ISSUE_TEMPLATE/bug-report.md", "content": "---\nname: Bug report\nabout: Report a bug you found in wavesurfer.js\ntitle: ''\nlabels: bug\nassignees: ''\n\n---\n\n\n\n## Bug description\n\n\n## Environment\n - Browser: Chrome\n\n## Minimal code snippet\n\n\n## Expected result\n\n\n## Obtained result\n\n\n## Screenshots\n" }, { "path": ".github/ISSUE_TEMPLATE/question.md", "content": "---\nname: Question\nabout: Have a question or facing a roadblock with wavesurfer?\ntitle: 'DO NOT CREATE THIS ISSUE – 不要创建这个 issue！'\nlabels: question\nassignees: ''\n---\n\n⚠️ READ CAREFULLY: ⚠️\n\nDo NOT create an ISSUE if it's a question. Post it IN THE Q&A FORUM instead.\n\n请改为创建一个问答讨论帖！\n\n👉 https://github.com/katspaugh/wavesurfer.js/discussions/categories/q-a\n\nThank you.\n" }, { "path": ".github/PULL_REQUEST_TEMPLATE.md", "content": "## Short description\nResolves #\n\n## Implementation details\n\n\n## How to test it\n\n\n## Screenshots\n\n\n## Checklist\n* [ ] This PR is covered by e2e tests\n* [ ] It introduces no breaking API changes\n" }, { "path": ".github/workflows/build/action.yml", "content": "name: 'Build'\n\ndescription: 'Build the app'\n\nruns:\n using: 'composite'\n steps:\n - name: Build\n shell: bash\n run: yarn build\n" }, { "path": ".github/workflows/e2e.yml", "content": "name: e2e\n\non:\n pull_request:\n\njobs:\n e2e:\n runs-on: ubuntu-latest\n name: E2E tests\n steps:\n - uses: actions/checkout@v4\n\n - uses: ./.github/workflows/yarn\n\n - uses: browser-actions/setup-chrome@v1\n\n - name: Install Cypress\n run: |\n ./node_modules/.bin/cypress install\n\n - uses: ./.github/workflows/build\n\n - uses: cypress-io/github-action@v4\n with:\n spec: cypress/e2e/*.cy.js\n browser: chrome\n record: false\n\n - uses: actions/upload-artifact@v4\n if: failure()\n with:\n name: cypress-screenshots\n path: cypress/screenshots\n" }, { "path": ".github/workflows/label-sponsors.yml", "content": "name: Label sponsors\non:\n pull_request:\n types: [opened]\n issues:\n types: [opened]\njobs:\n build:\n name: is-sponsor-label\n runs-on: ubuntu-latest\n steps:\n - uses: JasonEtco/is-sponsor-label-action@v1\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n" }, { "path": ".github/workflows/lint.yml", "content": "name: Lint\non: [pull_request]\n\njobs:\n eslint:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n\n - uses: ./.github/workflows/yarn\n\n - name: Run lint\n run: npm run lint:report\n continue-on-error: true\n\n - name: Annotate code with linting results\n uses: ataylorme/eslint-annotate-action@v3\n with:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n report-json: \"eslint_report.json\"\n" }, { "path": ".github/workflows/release.yml", "content": "name: Release\n\non:\n push:\n branches:\n - main\n\npermissions:\n contents: write\n\njobs:\n publish-npm:\n runs-on: ubuntu-latest\n steps:\n - name: Checkout\n uses: actions/checkout@v3\n with:\n fetch-depth: 0\n\n - name: Extract version\n id: version\n run: |\n OLD_VERSION=$(npm show . version)\n NEW_VERSION=$(node -p 'require(\"./package.json\").version')\n if [ $NEW_VERSION != $OLD_VERSION ]; then\n echo \"New version $NEW_VERSION detected\"\n echo \"version=$NEW_VERSION\" >> $GITHUB_OUTPUT\n git log \"$OLD_VERSION\"..HEAD --pretty=format:\"* %s by %ae\" | sed -E 's/by [0-9]+\\+(.+)@users.noreply.github.com/by @\\1/g' | sed -E 's/ by @?katspaugh.*//g' > TEMP_CHANGELOG.md\n echo -e \"\\n\\n---\\n[![npm](https://img.shields.io/npm/v/wavesurfer.js)](https://www.npmjs.com/package/wavesurfer.js/v/$NEW_VERSION)\" >> TEMP_CHANGELOG.md\n else\n echo \"Version $OLD_VERSION hasn't changed, skipping the release\"\n fi\n\n - name: Create a git tag\n if: ${{ steps.version.outputs.version }}\n run: git tag $NEW_VERSION && git push --tags\n env:\n NEW_VERSION: ${{ steps.version.outputs.version }}\n\n - name: GitHub release\n if: ${{ steps.version.outputs.version }}\n uses: softprops/action-gh-release@v1\n id: create_release\n with:\n draft: false\n prerelease: false\n name: ${{ steps.version.outputs.version }}\n tag_name: ${{ steps.version.outputs.version }}\n body_path: TEMP_CHANGELOG.md\n env:\n GITHUB_TOKEN: ${{ github.token }}\n\n - uses: actions/setup-node@v3\n if: ${{ steps.version.outputs.version }}\n with:\n node-version: '16.x'\n registry-url: 'https://registry.npmjs.org'\n\n - uses: ./.github/workflows/yarn\n if: ${{ steps.version.outputs.version }}\n\n - name: Publish to NPM\n if: ${{ steps.version.outputs.version }}\n env:\n NODE_AUTH_TOKEN: ${{ secrets.npm_token }}\n run: npm publish\n" }, { "path": ".github/workflows/unit-tests.yml", "content": "name: Unit Tests\non: [pull_request]\n\njobs:\n jest:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - uses: ./.github/workflows/yarn\n - name: Run unit tests\n run: yarn test:unit\n" }, { "path": ".github/workflows/yarn/action.yml", "content": "name: 'Yarn'\n\ndescription: 'Install node modules'\n\nruns:\n using: 'composite'\n steps:\n - uses: actions/setup-node@v3.6.0\n with:\n node-version: 20\n\n - name: Yarn cache\n uses: actions/cache@v3\n with:\n path: '**/node_modules'\n key: node-modules-${{ hashFiles('**/yarn.lock') }}\n\n - name: Yarn install\n shell: bash\n run: yarn install --immutable\n" }, { "path": ".gitignore", "content": ".DS_Store\ndist\ndocs\nnode_modules\nyarn-error.log\ncypress/screenshots\ncypress/downloads\ncypress/videos\ncypress/**/__diff_output__/\n.env\ncoverage/\neslint_report.json\n" }, { "path": ".prettierrc", "content": "{\n \"tabWidth\": 2,\n \"printWidth\": 120,\n \"trailingComma\": \"all\",\n \"singleQuote\": true,\n \"semi\": false,\n \"endOfLine\": \"auto\"\n}\n" }, { "path": "AGENTS.md", "content": "# Coding Conventions\n\n- Use TypeScript. Prefer ES modules.\n- Follow the repo Prettier configuration (2 spaces, print width 120, single quotes, no semicolons, trailing commas).\n- Do not commit files from `dist` or `node_modules`.\n\n# Programmatic Checks\n\n1. `yarn lint`\n\nRun these after making changes. If a command fails due to environment limits, note this in the PR.\n\n# Pull Request Guidelines\n\nWhen opening a PR, use the provided template and include:\n- **Short description**\n- **Implementation details**\n- **How to test it**\n- **Checklist** with the items from `.github/PULL_REQUEST_TEMPLATE.md`.\n\nThe title of the PR should follow the semantic commit convention (e.g. `fix(Regions): remove unused variable`).\n" }, { "path": "AI_OVERVIEW.md", "content": "# Repository Overview for AI Agents\n\nThis document gives a condensed view of the project structure and build process so that AI tools (like Codex) can reason about the codebase without scanning every file.\n\n## Project Structure\n\n- **`src/`** – TypeScript source files for the library. The entry point is [`wavesurfer.ts`](../src/wavesurfer.ts). Other files implement features such as the player, plugins, and utilities.\n- **`examples/`** – Stand‑alone demos used for manual testing and documentation. Each example is an HTML page importing the library and demonstrating a specific feature.\n- **`cypress/`** – End‑to‑end and visual regression tests powered by Cypress. Tests live in `cypress/e2e` and snapshots reside in `cypress/snapshots`.\n- **`scripts/`** – Helper scripts for cleaning the build directory and creating new plugins.\n- **Root config files** – `package.json` defines the build, lint, and test commands. TypeScript configuration is in `tsconfig.json`, and linting rules are in `.eslintrc` and `.prettierrc`.\n\n## Common Tasks\n\n- **Install dependencies**: `yarn`\n- **Run the dev server**: `yarn start` (compiles TypeScript in watch mode and serves examples on )\n- **Build for production**: `yarn build`\n- **Run lint checks**: `yarn lint`\n- **Run Cypress tests**: `yarn cypress`\n\n## Contribution Notes\n\n- Follow the coding conventions in [`AGENTS.md`](AGENTS.md).\n- Do not commit generated files from `dist/` or `node_modules/`.\n\nThis overview should help an AI agent quickly locate relevant source files and scripts without traversing the entire repository.\n" }, { "path": "CONTRIBUTING.md", "content": "# CONTRIBUTING to wavesurfer.js\n\nHello there,\n\nFirstly, a heartfelt thank you! We sincerely appreciate your interest in wavesurfer.js and are really excited to see your contributions to our community.\n\nHere are a few guidelines to keep in mind when you're ready to contribute:\n\n## 1. Search in Existing Issues\n\nBefore submitting a new issue, we kindly ask you to take a moment to search through our [existing issues](https://github.com/katspaugh/wavesurfer.js/issues?q=is%3Aissue). There's a chance that someone has already raised the point you're interested in. This step helps to keep our issues page clean and productive.\n\n## 2. Questions and Feature Requests\n\nGot a burning question or a brilliant feature idea? That's fantastic! But instead of the issues section, we ask you to post these in our [Discussions](https://github.com/katspaugh/wavesurfer.js/discussions/categories/ideas) forum. This helps to separate enhancement ideas and questions from the bugs and issues which need immediate attention from the developers.\n\nTo visit the forum, [click here](https://github.com/katspaugh/wavesurfer.js/discussions).\n\n## 3. Reporting Bugs\n\nStumbled upon a bug? Sorry about that! We're constantly working to improve wavesurfer.js and your bug reports help us do just that.\n\nWhen you post a bug report, please include the necessary code that will help us reproduce the bug. The more details you provide, the quicker we can get to the root of the problem and resolve it.\n\nBy following these guidelines, you're helping us maintain a productive, organized community. We can't wait to see your contributions to wavesurfer.js. Thank you again for your help!\n" }, { "path": "LICENSE", "content": "BSD 3-Clause License\n\nCopyright (c) 2012-2023, katspaugh and contributors\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without\nmodification, are permitted provided that the following conditions are met:\n\n* Redistributions of source code must retain the above copyright notice, this\n list of conditions and the following disclaimer.\n\n* Redistributions in binary form must reproduce the above copyright notice,\n this list of conditions and the following disclaimer in the documentation\n and/or other materials provided with the distribution.\n\n* Neither the name of the copyright holder nor the names of its\n contributors may be used to endorse or promote products derived from\n this software without specific prior written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\"\nAND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE\nIMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE\nFOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL\nDAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR\nSERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER\nCAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,\nOR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE\nOF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\n" }, { "path": "README.md", "content": "# \"logo\" wavesurfer.js\n\n[![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)\n\n**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.\n\n\"waveform\n\n**Gold sponsor 💖** [Closed Caption Creator](https://www.closedcaptioncreator.com)\n\n# Table of contents\n\n1. [Getting started](#getting-started)\n2. [API reference](#api-reference)\n3. [Plugins](#plugins)\n4. [CSS styling](#css-styling)\n5. [Frequent questions](#questions)\n6. [Development](#development)\n7. [Tests](#tests)\n8. [Feedback](#feedback)\n\n## Getting started\n\nInstall and import the package:\n\n```bash\nnpm install --save wavesurfer.js\n```\n```js\nimport WaveSurfer from 'wavesurfer.js'\n```\n\nAlternatively, insert a UMD script tag which exports the library as a global `WaveSurfer` variable:\n```html\n\n```\n\nCreate a wavesurfer instance and pass various [options](http://wavesurfer.xyz/docs/options):\n```js\nconst wavesurfer = WaveSurfer.create({\n container: '#waveform',\n waveColor: '#4F4A85',\n progressColor: '#383351',\n url: '/audio.mp3',\n})\n```\n\nTo import one of the plugins, e.g. the [Regions plugin](https://wavesurfer.xyz/examples/?regions.js):\n```js\nimport Regions from 'wavesurfer.js/dist/plugins/regions.esm.js'\n```\n\nOr as a script tag that will export `WaveSurfer.Regions`:\n```html\n\n```\n\nTypeScript types are included in the package, so there's no need to install `@types/wavesurfer.js`.\n\nSee more [examples](https://wavesurfer.xyz/examples).\n\n## API reference\n\nSee the wavesurfer.js documentation on our website:\n\n * [methods](https://wavesurfer.xyz/docs/methods)\n * [options](http://wavesurfer.xyz/docs/options)\n * [events](http://wavesurfer.xyz/docs/events)\n\n## Plugins\n\nWe maintain a number of official plugins that add various extra features:\n\n * [Regions](https://wavesurfer.xyz/examples/?regions.js) – visual overlays and markers for regions of audio\n * [Timeline](https://wavesurfer.xyz/examples/?timeline.js) – displays notches and time labels below the waveform\n * [Minimap](https://wavesurfer.xyz/examples/?minimap.js) – a small waveform that serves as a scrollbar for the main waveform\n * [Envelope](https://wavesurfer.xyz/examples/?envelope.js) – a graphical interface to add fade-in and -out effects and control volume\n * [Record](https://wavesurfer.xyz/examples/?record.js) – records audio from the microphone and renders a waveform\n * [Spectrogram](https://wavesurfer.xyz/examples/?spectrogram.js) – visualization of an audio frequency spectrum (written by @akreal)\n * [Hover](https://wavesurfer.xyz/examples/?hover.js) – shows a vertical line and timestmap on waveform hover\n\n## CSS styling\n\nwavesurfer.js v7 is rendered into a Shadow DOM tree. This isolates its CSS from the rest of the web page.\nHowever, it's still possible to style various wavesurfer.js elements with CSS via the `::part()` pseudo-selector.\nFor example:\n\n```css\n#waveform ::part(cursor):before {\n content: '🏄';\n}\n#waveform ::part(region) {\n font-family: fantasy;\n}\n```\n\nYou can see which elements you can style in the DOM inspector – they will have a `part` attribute.\nSee [this example](https://wavesurfer.xyz/examples/?styling.js) to play around with styling.\n\n## Questions\n\nHave 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).\n\nHowever, 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.\n\n### FAQ\n\n
\n I'm having CORS issues\n 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 the same domain or another domain if and only if that domain enables CORS. 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).\n
\n\n
\n Does wavesurfer support large files?\n 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 this example). You can use a tool like audiowaveform to generate peaks.\n
\n\n
\n What about streaming audio?\n Streaming audio is supported only with pre-decoded peaks and duration.\n
\n\n
\n There is a mismatch between my audio and the waveform. How do I fix it?\n 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).\n

Alternatively, you can use the Web Audio shim which is more accurate.

\n
\n\n
\n How do I connect wavesurfer.js to Web Audio effects?\nGenerally, 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 this example) but nothign more than that. Please don't expect wavesurfer to be able to cut, add effects, or process your audio in any way.\n
\n\n## Development\n\nTo get started with development, follow these steps:\n\n 1. Install dev dependencies:\n\n```\nyarn\n```\n\n 2. Start the TypeScript compiler in watch mode and launch an HTTP server:\n\n```\nyarn start\n```\n\nThis command will open http://localhost:9090 in your browser with live reload, allowing you to see the changes as you develop.\n\n## Tests\n\nThe tests are written in the Cypress framework. They are a mix of e2e and visual regression tests.\n\nTo run the test suite locally, first build the project:\n```\nyarn build\n```\n\nThen launch the tests:\n```\nyarn cypress\n```\n\n## Feedback\n\nWe appreciate your feedback and contributions!\n\nIf 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).\n\nWe hope you enjoy using wavesurfer.js and look forward to hearing about your experiences with the library!\n" }, { "path": "cypress/e2e/abort.cy.js", "content": "describe('WaveSurfer abort handling tests', () => {\n beforeEach(() => {\n cy.visit('cypress/e2e/index.html')\n\n cy.window().its('WaveSurfer').should('exist')\n })\n\n // https://github.com/katspaugh/wavesurfer.js/issues/3637\n it('load url after destroyed should emit ready', () => {\n cy.window().then((win) => {\n return new Promise((resolve) => {\n win.wavesurfer = win.WaveSurfer.create({\n container: '#waveform',\n height: 200,\n waveColor: 'rgb(200, 200, 0)',\n progressColor: 'rgb(100, 100, 0)',\n })\n\n win.wavesurfer.destroy()\n\n win.wavesurfer.load('../../examples/audio/demo.wav')\n\n win.wavesurfer.on('ready', resolve)\n })\n })\n })\n\n it('destroy before wavesurfer ready should throw AbortError Exception', () => {\n cy.window().then((win) => {\n return new Promise((resolve) => {\n win.wavesurfer = win.WaveSurfer.create({\n container: '#waveform',\n height: 200,\n waveColor: 'rgb(200, 200, 0)',\n progressColor: 'rgb(100, 100, 0)',\n })\n\n // catch load error\n win.wavesurfer.load('../../examples/audio/demo.wav').catch((e) => {\n expect(e.name).to.equal('AbortError')\n expect(e.message).to.match(/aborted/)\n resolve()\n })\n\n win.wavesurfer.destroy()\n })\n })\n })\n\n it('destroy before wavesurfer ready should emit AbortError Exception', () => {\n cy.window().then((win) => {\n return new Promise((resolve) => {\n win.wavesurfer = win.WaveSurfer.create({\n container: '#waveform',\n height: 200,\n waveColor: 'rgb(200, 200, 0)',\n progressColor: 'rgb(100, 100, 0)',\n })\n\n win.wavesurfer.load('../../examples/audio/demo.wav').catch(() => {})\n\n win.wavesurfer.destroy()\n\n // listening wavesurfer emit error event\n win.wavesurfer.on('error', (e) => {\n expect(e.name).to.equal('AbortError')\n expect(e.message).to.match(/aborted/)\n resolve()\n })\n })\n })\n })\n})\n" }, { "path": "cypress/e2e/basic.cy.js", "content": "describe('WaveSurfer basic tests', () => {\n beforeEach((done) => {\n cy.visit('cypress/e2e/index.html')\n\n cy.window().its('WaveSurfer').should('exist')\n\n cy.window().then((win) => {\n const waitForReady = new Promise((resolve) => {\n win.wavesurfer = win.WaveSurfer.create({\n container: '#waveform',\n height: 200,\n waveColor: 'rgb(200, 200, 0)',\n progressColor: 'rgb(100, 100, 0)',\n url: '../../examples/audio/demo.wav',\n })\n\n win.wavesurfer.once('ready', () => resolve())\n })\n\n cy.wrap(waitForReady).then(done)\n })\n })\n\n it('should instantiate WaveSurfer without errors', () => {\n cy.window().its('wavesurfer').should('be.an', 'object')\n })\n\n it('should emit a redrawcomplete event', () => {\n cy.window().then((win) => {\n const { wavesurfer } = win\n expect(wavesurfer.getDuration().toFixed(2)).to.equal('21.77')\n\n wavesurfer.options.minPxPerSec = 200\n wavesurfer.load('../../examples/audio/audio.wav')\n\n return new Promise((resolve) => {\n wavesurfer.once('redrawcomplete', () => {\n wavesurfer.zoom(100)\n wavesurfer.once('redrawcomplete', () => {\n resolve()\n })\n })\n })\n })\n })\n\n it('should load an audio file without errors', () => {\n cy.window().then((win) => {\n expect(win.wavesurfer.getDuration().toFixed(2)).to.equal('21.77')\n\n win.wavesurfer.load('../../examples/audio/audio.wav')\n\n return new Promise((resolve) => {\n win.wavesurfer.once('ready', () => {\n expect(win.wavesurfer.getDuration().toFixed(2)).to.equal('26.39')\n resolve()\n })\n })\n })\n })\n\n it('should catch fetch errors', () => {\n cy.window().then((win) => {\n return win.wavesurfer.load('../../examples/audio/audio.w1av').catch((e) => {\n expect(e.message).to.equal('Failed to fetch ../../examples/audio/audio.w1av: 404 (Not Found)')\n })\n })\n })\n\n it('should play and pause audio', () => {\n cy.window().then((win) => {\n expect(win.wavesurfer.getCurrentTime()).to.equal(0)\n\n win.wavesurfer.play()\n\n cy.wait(1000).then(() => {\n expect(win.wavesurfer.isPlaying()).to.be.true\n\n win.wavesurfer.pause()\n\n expect(win.wavesurfer.getCurrentTime()).to.be.greaterThan(0)\n })\n })\n })\n\n it('should set and get volume without errors', () => {\n cy.window().then((win) => {\n win.wavesurfer.setVolume(0.5)\n expect(win.wavesurfer.getVolume()).to.equal(0.5)\n })\n })\n\n it('should set and get muted state without errors', () => {\n cy.window().then((win) => {\n win.wavesurfer.setMuted(true)\n expect(win.wavesurfer.getMuted()).to.be.true\n })\n })\n\n it('should set and get playback rate without errors', () => {\n cy.window().then((win) => {\n win.wavesurfer.setPlaybackRate(1.5)\n expect(win.wavesurfer.getPlaybackRate()).to.equal(1.5)\n })\n })\n\n it('should seek to a time in seconds', () => {\n cy.window().then((win) => {\n win.wavesurfer.setTime(10.1)\n expect(win.wavesurfer.getCurrentTime()).to.equal(10.1)\n expect(win.wavesurfer.getScroll()).to.equal(0) // no scroll\n })\n })\n\n it('should set the zoom level', () => {\n cy.window().then((win) => {\n const initialWidth = win.wavesurfer.getWrapper().clientWidth\n\n win.wavesurfer.zoom(200)\n const zoomedWidth = win.wavesurfer.renderer.getWrapper().clientWidth\n expect(zoomedWidth).to.be.greaterThan(initialWidth)\n win.wavesurfer.zoom(600)\n const newWidth = win.wavesurfer.getWrapper().clientWidth\n\n expect(Math.round(newWidth / zoomedWidth)).to.equal(3)\n })\n })\n\n it('should scroll on seek if zoomed in', () => {\n cy.window().then((win) => {\n win.wavesurfer.zoom(300)\n const zoomedWidth = win.wavesurfer.getWrapper().clientWidth\n win.wavesurfer.zoom(600)\n const newWidth = win.wavesurfer.getWrapper().clientWidth\n\n expect(Math.round(newWidth / zoomedWidth)).to.equal(2)\n\n win.wavesurfer.setTime(20)\n\n cy.wait(1000).then(() => {\n expect(win.wavesurfer.getScroll()).to.be.greaterThan(100)\n })\n })\n })\n\n it('should scroll on setScrollTime if zoomed in', () => {\n cy.window().then((win) => {\n win.wavesurfer.zoom(300)\n const zoomedWidth = win.wavesurfer.getWrapper().clientWidth\n win.wavesurfer.zoom(600)\n const newWidth = win.wavesurfer.getWrapper().clientWidth\n\n expect(Math.round(newWidth / zoomedWidth)).to.equal(2)\n\n win.wavesurfer.setScrollTime(20)\n\n cy.wait(1000).then(() => {\n expect(win.wavesurfer.getScroll()).to.be.greaterThan(100)\n })\n })\n })\n\n it('should export decoded audio data', () => {\n cy.window().then((win) => {\n const data = win.wavesurfer.getDecodedData()\n\n expect(data.getChannelData).to.be.a('function')\n expect(data.length).to.equal(174191)\n expect(data.sampleRate).to.equal(8000)\n expect(data.duration.toFixed(2)).to.equal('21.77')\n })\n })\n\n it('should not fill the container if fillParent is false', () => {\n cy.window().then((win) => {\n win.wavesurfer.setOptions({\n fillParent: false,\n minPxPerSec: 10,\n })\n expect(win.document.querySelector('#waveform').clientWidth).to.greaterThan(\n win.wavesurfer.getWrapper().clientWidth,\n )\n })\n })\n\n it('should export peaks', () => {\n cy.window().then((win) => {\n const peaks = win.wavesurfer.exportPeaks({\n channels: 2,\n maxLength: 1000,\n precision: 100,\n })\n expect(peaks.length).to.equal(1) // the file is mono\n expect(peaks[0].length).to.equal(1000)\n expect(peaks[0][0]).to.equal(0.01)\n expect(peaks[0][99]).to.equal(0.3)\n expect(peaks[0][100]).to.equal(0.31)\n\n const peaksB = win.wavesurfer.exportPeaks({\n maxLength: 1000,\n precision: 1000,\n })\n expect(peaksB.length).to.equal(1)\n expect(peaksB[0].length).to.equal(1000)\n expect(peaksB[0][0]).to.equal(0.015)\n expect(peaksB[0][99]).to.equal(0.296)\n expect(peaksB[0][100]).to.equal(0.308)\n\n const peaksC = win.wavesurfer.exportPeaks()\n expect(peaksC.length).to.equal(1)\n expect(peaksC[0].length).to.equal(8000)\n expect(peaksC[0][0]).to.equal(0.0117)\n expect(peaksC[0][99]).to.equal(0.0076)\n expect(peaksC[0][100]).to.equal(0.01)\n })\n })\n\n describe('exportImage', () => {\n it('should export an image as a data-URI', () => {\n cy.window()\n .then((win) => {\n return win.wavesurfer.exportImage()\n })\n .then((data) => {\n expect(data[0]).to.match(/^data:image\\/png;base64,/)\n })\n })\n\n it('should export an image as a JPEG data-URI', () => {\n cy.window()\n .then((win) => {\n return win.wavesurfer.exportImage('image/jpeg', 0.75)\n })\n .then((data) => {\n expect(data[0]).to.match(/^data:image\\/jpeg;base64,/)\n })\n })\n\n it('should export an image as a blob', () => {\n cy.window()\n .then((win) => {\n return win.wavesurfer.exportImage('image/webp', 0.75, 'blob')\n })\n .then((data) => {\n expect(data[0]).to.be.a('blob')\n })\n })\n })\n\n it('should destroy wavesurfer', () => {\n cy.window().then((win) => {\n win.wavesurfer.destroy()\n })\n })\n\n describe('setMediaElement', () => {\n // Mock add/remove event listeners for `media` elements\n const attachMockListeners = (el) => {\n el.eventCount = 0\n\n const addEventListener = el.addEventListener\n el.addEventListener = (eventName, callback, options) => {\n if (!options || !options.once) el.eventCount++\n addEventListener.call(el, eventName, callback, options)\n }\n const removeEventListener = el.removeEventListener\n el.removeEventListener = (eventName, callback) => {\n el.eventCount--\n removeEventListener.call(el, eventName, callback)\n }\n }\n\n beforeEach((done) => {\n cy.window().then((win) => {\n win.wavesurfer.destroy()\n\n const originalMedia = document.createElement('audio')\n attachMockListeners(originalMedia)\n\n win.wavesurfer = win.WaveSurfer.create({\n container: '#waveform',\n url: '../../examples/audio/demo.wav',\n media: originalMedia,\n })\n\n win.wavesurfer.once('ready', () => done())\n })\n })\n\n it('should set media without errors', () => {\n cy.window().then((win) => {\n const media = document.createElement('audio')\n media.id = 'new-media'\n win.wavesurfer.setMediaElement(media)\n expect(win.wavesurfer.getMediaElement().id).to.equal('new-media')\n })\n })\n\n it('should unsubscribe events from removed media element', () => {\n cy.window().then((win) => {\n const originalMedia = win.wavesurfer.getMediaElement()\n const media = document.createElement('audio')\n\n expect(originalMedia.eventCount).to.be.greaterThan(0)\n\n win.wavesurfer.setMediaElement(media)\n expect(originalMedia.eventCount).to.be.lessThan(1)\n })\n })\n\n it('should subscribe events for newly set media element', () => {\n cy.window().then((win) => {\n const newMedia = document.createElement('audio')\n attachMockListeners(newMedia)\n\n win.wavesurfer.setMediaElement(newMedia)\n expect(newMedia.eventCount).to.be.greaterThan(0)\n })\n })\n })\n\n it('should return true when calling isPlaying() after play()', (done) => {\n cy.window().then((win) => {\n expect(win.wavesurfer.isPlaying()).to.be.false\n win.wavesurfer.play()\n expect(win.wavesurfer.isPlaying()).to.be.true\n win.wavesurfer.once('play', () => {\n expect(win.wavesurfer.isPlaying()).to.be.true\n win.wavesurfer.pause()\n expect(win.wavesurfer.isPlaying()).to.be.false\n done()\n })\n })\n })\n})\n" }, { "path": "cypress/e2e/envelope.cy.js", "content": "const id = '#waveform'\n\ndescribe('WaveSurfer Envelope plugin tests', () => {\n it('should render an envelope', () => {\n cy.visit('cypress/e2e/index.html')\n cy.window().then((win) => {\n return new Promise((resolve) => {\n win.wavesurfer = win.WaveSurfer.create({\n container: id,\n height: 200,\n url: '../../examples/audio/demo.wav',\n plugins: [\n win.Envelope.create({\n volume: 0.8,\n lineColor: 'rgba(255, 0, 0, 0.5)',\n lineWidth: 4,\n dragPointSize: 20,\n dragLine: false,\n dragPointFill: 'rgba(0, 255, 255, 0.8)',\n dragPointStroke: 'rgba(0, 0, 0, 0.5)',\n\n points: [\n { time: 11.2, volume: 0.5 },\n { time: 15.5, volume: 0.8 },\n ],\n }),\n ],\n })\n\n win.wavesurfer.once('ready', () => {\n cy.get(id).matchImageSnapshot('envelope-basic')\n resolve()\n })\n })\n })\n })\n\n it('should render an envelope and add a point', () => {\n cy.visit('cypress/e2e/index.html')\n cy.window().then((win) => {\n return new Promise((resolve) => {\n const envelopePlugin = win.Envelope.create({\n volume: 0.5,\n lineColor: 'rgba(255, 0, 0, 0.5)',\n lineWidth: 10,\n dragPointSize: 12,\n dragLine: true,\n dragPointFill: 'rgba(0, 255, 255, 0.8)',\n dragPointStroke: 'rgba(0, 0, 0, 0.5)',\n\n points: [\n { time: 12.2, volume: 0.4 },\n { time: 16.5, volume: 0.9 },\n ],\n })\n\n win.wavesurfer = win.WaveSurfer.create({\n container: id,\n height: 200,\n url: '../../examples/audio/demo.wav',\n plugins: [envelopePlugin],\n })\n\n envelopePlugin.addPoint({ id: 'new-point', time: 10.1, volume: 0.6 })\n\n win.wavesurfer.once('ready', () => {\n cy.get(id).matchImageSnapshot('envelope-add-point')\n resolve()\n })\n })\n })\n })\n})\n" }, { "path": "cypress/e2e/error.cy.js", "content": "describe('WaveSurfer error handling tests', () => {\n it('should fire error event if provided file url does not exist', () => {\n cy.visit('cypress/e2e/index.html')\n\n cy.window().its('WaveSurfer').should('exist')\n\n cy.window().then((win) => {\n return new Promise((resolve) => {\n win.wavesurfer = win.WaveSurfer.create({\n container: '#waveform',\n height: 200,\n waveColor: 'rgb(200, 200, 0)',\n progressColor: 'rgb(100, 100, 0)',\n url: '../../examples/audio/DOES_NOT_EXIST.wav',\n })\n\n win.wavesurfer.on('error', () => {\n console.log('error event fired')\n resolve()\n })\n })\n })\n })\n})\n" }, { "path": "cypress/e2e/hover.cy.js", "content": "const id = '#waveform'\n\ndescribe('WaveSurfer Hover plugin tests', () => {\n it('should render a label to the right with labelPreferLeft=false', () => {\n cy.visit('cypress/e2e/index.html')\n cy.window().then((win) => {\n return new Promise((resolve) => {\n win.wavesurfer = win.WaveSurfer.create({\n container: id,\n height: 500,\n url: '../../examples/audio/demo.wav',\n plugins: [\n win.Hover.create({\n labelSize: '72px',\n labelPreferLeft: false,\n }),\n ],\n })\n\n win.wavesurfer.once('ready', () => {\n // Move the mouse to the center of the container\n cy.get(id).trigger('pointermove', 'center')\n\n // Verify that the label got drawn on the right\n cy.wait(100)\n cy.get(id).matchImageSnapshot('hover-prefer-left-false')\n resolve()\n })\n })\n })\n })\n\n it('should render a label to the left with labelPreferLeft=false when near to the right edge', () => {\n cy.visit('cypress/e2e/index.html')\n cy.window().then((win) => {\n return new Promise((resolve) => {\n win.wavesurfer = win.WaveSurfer.create({\n container: id,\n height: 500,\n url: '../../examples/audio/demo.wav',\n plugins: [\n win.Hover.create({\n labelSize: '72px',\n labelPreferLeft: false,\n }),\n ],\n })\n\n win.wavesurfer.once('ready', () => {\n // Move the mouse to the right of the container\n cy.get(id).trigger('pointermove', 'right')\n\n // Verify that the label got drawn on the left\n cy.wait(100)\n cy.get(id).matchImageSnapshot('hover-prefer-left-false-near-right-edge')\n resolve()\n })\n })\n })\n })\n\n it('should render a label to the left with labelPreferLeft=true', () => {\n cy.visit('cypress/e2e/index.html')\n cy.window().then((win) => {\n return new Promise((resolve) => {\n win.wavesurfer = win.WaveSurfer.create({\n container: id,\n height: 500,\n url: '../../examples/audio/demo.wav',\n plugins: [\n win.Hover.create({\n labelSize: '72px',\n labelPreferLeft: true,\n }),\n ],\n })\n\n win.wavesurfer.once('ready', () => {\n // Move the mouse to the center of the container\n cy.get(id).trigger('pointermove', 'center')\n\n // Verify that the label got drawn on the left\n cy.wait(100)\n cy.get(id).matchImageSnapshot('hover-prefer-left-true')\n resolve()\n })\n })\n })\n })\n\n it('should render a label to the right with labelPreferLeft=true when near to the left edge', () => {\n cy.visit('cypress/e2e/index.html')\n cy.window().then((win) => {\n return new Promise((resolve) => {\n win.wavesurfer = win.WaveSurfer.create({\n container: id,\n height: 500,\n url: '../../examples/audio/demo.wav',\n plugins: [\n win.Hover.create({\n labelSize: '72px',\n labelPreferLeft: true,\n }),\n ],\n })\n\n win.wavesurfer.once('ready', () => {\n // Move the mouse to the center of the container\n cy.get(id).trigger('pointermove', 'left')\n\n // Verify that the label got drawn on the right\n cy.wait(100)\n cy.get(id).matchImageSnapshot('hover-prefer-left-true-near-left-edge')\n resolve()\n })\n })\n })\n })\n})\n" }, { "path": "cypress/e2e/index.html", "content": "\n\n \n \n \n WaveSurfer Test\n \n \n
\n
\n\n \n \n\n" }, { "path": "cypress/e2e/options.cy.js", "content": "const id = '#waveform'\nconst otherId = '#otherWaveform'\n\nconst wrapReady = (wavesurfer, event = 'ready') => {\n const waitForReady = new Promise((resolve) => {\n wavesurfer.once(event, resolve)\n })\n return cy.wrap(waitForReady)\n}\n\ndescribe('WaveSurfer options tests', () => {\n beforeEach(() => {\n cy.visit('cypress/e2e/index.html')\n cy.window().its('WaveSurfer').should('exist')\n })\n\n it('should use minPxPerSec and hideScrollbar', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n minPxPerSec: 100,\n hideScrollbar: true,\n })\n\n wrapReady(wavesurfer).then(() => {\n cy.get(id).matchImageSnapshot('minPxPerSec-hideScrollbar')\n done()\n })\n })\n })\n\n it('should use barWidth', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n barWidth: 3,\n })\n\n wrapReady(wavesurfer).then(() => {\n cy.get(id).matchImageSnapshot('barWidth')\n done()\n })\n })\n })\n\n it('should use all bar options', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n barWidth: 4,\n barGap: 3,\n barRadius: 4,\n })\n\n wavesurfer.once('ready', () => {\n cy.get(id).matchImageSnapshot('bars')\n done()\n })\n })\n })\n\n it('should use barAlign=top to align the waveform vertically', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n barAlign: 'top',\n })\n\n wrapReady(wavesurfer).then(() => {\n cy.get(id).matchImageSnapshot('barAlign-top')\n done()\n })\n })\n })\n\n it('should use barAlign=bottom to align the waveform vertically', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n barAlign: 'bottom',\n })\n\n wrapReady(wavesurfer).then(() => {\n cy.get(id).matchImageSnapshot('barAlign-bottom')\n done()\n })\n })\n })\n\n it('should use barAlign and barWidth together', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n barAlign: 'bottom',\n barWidth: 4,\n })\n\n wrapReady(wavesurfer).then(() => {\n cy.get(id).matchImageSnapshot('barAlign-barWidth')\n done()\n })\n })\n })\n\n it('should use barHeight to scale the waveform vertically', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n barHeight: 2,\n })\n\n wrapReady(wavesurfer).then(() => {\n cy.get(id).matchImageSnapshot('barHeight')\n done()\n })\n })\n })\n\n it('should use color options', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n waveColor: 'red',\n progressColor: 'green',\n cursorColor: 'blue',\n })\n\n wrapReady(wavesurfer).then(() => {\n wavesurfer.setTime(10)\n cy.wait(100)\n cy.get(id).matchImageSnapshot('colors')\n done()\n })\n })\n })\n\n it('should use gradient color options', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n waveColor: ['rgb(200, 165, 49)', 'rgb(211, 194, 138)', 'rgb(205, 124, 49)', 'rgb(205, 98, 49)'],\n progressColor: 'rgba(0, 0, 0, 0.25)',\n cursorColor: 'blue',\n })\n\n wrapReady(wavesurfer).then(() => {\n wavesurfer.setTime(10)\n cy.wait(100)\n cy.snap\n cy.get(id).matchImageSnapshot('colors-gradient')\n done()\n })\n })\n })\n\n it('should use cursor options', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n cursorColor: 'red',\n cursorWidth: 4,\n })\n\n wrapReady(wavesurfer).then(() => {\n wavesurfer.setTime(10)\n cy.wait(100)\n cy.get(id).matchImageSnapshot('cursor')\n done()\n })\n })\n })\n\n it('should not scroll with autoScroll false', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n autoScroll: false,\n minPxPerSec: 200,\n hideScrollbar: true,\n })\n\n wrapReady(wavesurfer).then(() => {\n wavesurfer.setTime(10)\n cy.wait(100)\n cy.get(id).matchImageSnapshot('autoScroll-false')\n done()\n })\n })\n })\n\n it('should not scroll to center with autoCenter false', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n autoCenter: false,\n minPxPerSec: 200,\n hideScrollbar: true,\n })\n\n wrapReady(wavesurfer).then(() => {\n wavesurfer.setTime(10)\n cy.wait(100)\n cy.get(id).matchImageSnapshot('autoCenter-false')\n done()\n })\n })\n })\n\n it('should use peaks', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n peaks: [\n [\n 0, 0.0023595101665705442, 0.012107174843549728, 0.005919494666159153, -0.31324470043182373,\n 0.1511787623167038, 0.2473851442337036, 0.11443428695201874, -0.036057762801647186, -0.0968964695930481,\n -0.03033737652003765, 0.10682467371225357, 0.23974689841270447, 0.013210971839725971, -0.12377244979143143,\n 0.046145666390657425, -0.015757400542497635, 0.10884027928113937, 0.06681904196739197, 0.09432944655418396,\n -0.17105795443058014, -0.023439358919858932, -0.10380347073078156, 0.0034454423002898693,\n 0.08061369508504868, 0.026129156351089478, 0.18730352818965912, 0.020447958260774612, -0.15030759572982788,\n 0.05689578503370285, -0.0009095853311009705, 0.2749626338481903, 0.2565386891365051, 0.07571295648813248,\n 0.10791446268558502, -0.06575305759906769, 0.15336275100708008, 0.07056761533021927, 0.03287476301193237,\n -0.09044631570577621, 0.01777501218020916, -0.04906218498945236, -0.04756792634725571,\n -0.006875281687825918, 0.04520256072282791, -0.02362387254834175, -0.0668797641992569, 0.12266506254673004,\n -0.10895221680402756, 0.03791835159063339, -0.0195105392485857, -0.031097881495952606, 0.04252675920724869,\n -0.09187793731689453, 0.0829525887966156, -0.003812957089394331, 0.0431736595928669, 0.07634212076663971,\n -0.05335947126150131, 0.0345163568854332, -0.049201950430870056, 0.02300390601158142, 0.007677287794649601,\n 0.015354577451944351, 0.007677287794649601, 0.007677288725972176,\n ],\n ],\n })\n\n wrapReady(wavesurfer).then(() => {\n cy.get(id).matchImageSnapshot('peaks')\n done()\n })\n })\n })\n\n it('should use external media', (done) => {\n cy.window().then((win) => {\n const audio = new Audio('../../examples/audio/demo.wav')\n\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n media: audio,\n })\n\n wrapReady(wavesurfer).then(() => {\n cy.get(id).matchImageSnapshot('media')\n done()\n })\n })\n })\n\n it('should split channels', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/stereo.mp3',\n splitChannels: true,\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n })\n\n wrapReady(wavesurfer).then(() => {\n wavesurfer.setTime(2)\n cy.wait(100)\n cy.get(id).matchImageSnapshot('split-channels')\n done()\n })\n })\n })\n\n it('should split channels with options', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/stereo.mp3',\n splitChannels: [\n {\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n },\n {\n waveColor: 'rgb(0, 200, 200)',\n progressColor: 'rgb(0, 100, 100)',\n },\n ],\n })\n\n wrapReady(wavesurfer).then(() => {\n cy.get(id).matchImageSnapshot('split-channels-options')\n done()\n })\n })\n })\n\n it('should split channels with individual channel heights', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/stereo.mp3',\n splitChannels: [\n {\n waveColor: 'red',\n height: 60,\n },\n {\n waveColor: 'blue',\n height: 30,\n },\n ],\n })\n\n wrapReady(wavesurfer).then(() => {\n cy.get(id).matchImageSnapshot('split-channels-heights')\n done()\n })\n })\n })\n\n it('should use plugins with Regions', (done) => {\n cy.window().then((win) => {\n const regions = win.Regions.create()\n\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n plugins: [regions],\n })\n\n wrapReady(wavesurfer).then(() => {\n regions.addRegion({\n start: 1,\n end: 3,\n color: 'rgba(255, 0, 0, 0.1)',\n })\n\n cy.get(id).matchImageSnapshot('plugins-regions')\n done()\n })\n })\n })\n\n it('should use two plugins: Regions and Timeline', (done) => {\n cy.window().then((win) => {\n const regions = win.Regions.create()\n\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n plugins: [regions, win.Timeline.create()],\n })\n\n wrapReady(wavesurfer).then(() => {\n regions.addRegion({\n start: 1,\n end: 3,\n color: 'rgba(255, 0, 0, 0.1)',\n })\n\n cy.get(id).matchImageSnapshot('plugins-regions-timeline')\n done()\n })\n })\n })\n\n it('should normalize', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n normalize: true,\n })\n\n wrapReady(wavesurfer).then(() => {\n cy.get(id).matchImageSnapshot('normalize')\n done()\n })\n })\n })\n\n it('should not create an extra canvas when using bars with normalize', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n barWidth: 2,\n normalize: true,\n })\n\n wrapReady(wavesurfer).then(() => {\n const canvases = wavesurfer.getWrapper().querySelectorAll('canvas')\n expect(canvases.length).to.equal(2)\n done()\n })\n })\n })\n\n it('should use height', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n height: 10,\n })\n\n wrapReady(wavesurfer).then(() => {\n cy.get(id).matchImageSnapshot('height-10')\n done()\n })\n })\n })\n\n it('should use parent height if height is auto', (done) => {\n cy.window().then((win) => {\n win.document.querySelector(id).style.height = '200px'\n\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n height: 'auto',\n })\n\n wrapReady(wavesurfer).then(() => {\n cy.get(id).matchImageSnapshot('height-auto')\n win.document.querySelector(id).style.height = ''\n done()\n })\n })\n })\n\n it('should fall back to 128 if container height is not set', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n height: 'auto',\n })\n\n wrapReady(wavesurfer).then(() => {\n cy.get(id).matchImageSnapshot('height-auto-0')\n done()\n })\n })\n })\n\n it('should use a custom rendering function', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n renderFunction: (channels, ctx) => {\n const { width, height } = ctx.canvas\n const scale = channels[0].length / width\n const step = 10\n\n ctx.translate(0, height / 2)\n ctx.strokeStyle = ctx.fillStyle\n ctx.beginPath()\n\n for (let i = 0; i < width; i += step * 2) {\n const index = Math.floor(i * scale)\n const value = Math.abs(channels[0][index])\n let x = i\n let y = value * height\n\n ctx.moveTo(x, 0)\n ctx.lineTo(x, y)\n ctx.arc(x + step / 2, y, step / 2, Math.PI, 0, true)\n ctx.lineTo(x + step, 0)\n\n x = x + step\n y = -y\n ctx.moveTo(x, 0)\n ctx.lineTo(x, y)\n ctx.arc(x + step / 2, y, step / 2, Math.PI, 0, false)\n ctx.lineTo(x + step, 0)\n }\n\n ctx.stroke()\n ctx.closePath()\n },\n })\n\n wrapReady(wavesurfer).then(() => {\n cy.get(id).matchImageSnapshot('custom-render')\n done()\n })\n })\n })\n\n it('should pass custom parameters to fetch', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n fetchParams: {\n headers: {\n 'X-Custom-Header': 'foo',\n },\n },\n })\n\n wrapReady(wavesurfer).then(() => {\n cy.get(id).matchImageSnapshot('fetch-options')\n done()\n })\n })\n })\n\n it('should remount the container when set via setOptions', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n barWidth: 4,\n barGap: 3,\n barRadius: 4,\n })\n\n wrapReady(wavesurfer).then(() => {\n wavesurfer.setOptions({ container: otherId })\n cy.get(id).children().should('have.length', 0)\n cy.get(otherId).children().should('have.length', 1)\n cy.get(otherId).matchImageSnapshot('bars')\n done()\n })\n })\n })\n\n it('should accept a numeric width option', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n width: 100,\n })\n\n wrapReady(wavesurfer).then(() => {\n cy.get(id).matchImageSnapshot('width-100')\n wavesurfer.setOptions({ width: 300 })\n cy.get(id).matchImageSnapshot('width-300')\n done()\n })\n })\n })\n\n it('should accept a CSS value for the width option', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n width: '10rem',\n })\n\n wrapReady(wavesurfer).then(() => {\n cy.get(id).matchImageSnapshot('width-10rem')\n wavesurfer.setOptions({ width: '200px' })\n cy.get(id).matchImageSnapshot('width-200px')\n done()\n })\n })\n })\n\n it('should render pre-decoded waveform w/o audio', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n peaks: new Array(512).fill(0.5).map((v, i) => v * Math.sin(i / 16)),\n duration: 12.5,\n })\n\n wrapReady(wavesurfer, 'redraw').then(() => {\n expect(wavesurfer.getDuration().toFixed(2)).to.equal('12.50')\n cy.get(id).matchImageSnapshot('pre-decoded-no-audio')\n done()\n })\n })\n })\n\n it('should support Web Audio playback', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n url: '../../examples/audio/demo.wav',\n backend: 'WebAudio',\n })\n\n wrapReady(wavesurfer).then(() => {\n expect(wavesurfer.getDuration().toFixed(2)).to.equal('21.77')\n wavesurfer.setTime(10)\n expect(wavesurfer.getCurrentTime().toFixed(2)).to.equal('10.00')\n wavesurfer.setTime(21.6)\n wavesurfer.play()\n })\n\n wavesurfer.once('finish', () => {\n done()\n })\n })\n })\n\n it('should load a blob', (done) => {\n cy.window().then((win) => {\n const wavesurfer = win.WaveSurfer.create({\n container: id,\n height: 100,\n })\n\n const blob = Cypress.Blob.base64StringToBlob(\n 'UklGRuYAAABXQVZFZm10IBAAAAABAAEAgD4AAAB9AAACABAAZGF0YQAAAAA=',\n 'audio/wav',\n )\n\n wavesurfer.loadBlob(\n blob,\n Array.from({ length: 512 }).map((_, i) => Math.sin(i / 16)),\n 10,\n )\n\n wrapReady(wavesurfer).then(() => {\n cy.get(id).matchImageSnapshot('loadBlob')\n done()\n })\n })\n })\n\n it('should render in a very wide container', (done) => {\n cy.window().then((win) => {\n const container = win.document.querySelector(id)\n container.style.width = '21000px'\n\n const wavesurfer = win.WaveSurfer.create({\n container,\n url: '../../examples/audio/demo.wav',\n peaks: new Array(512).fill(0.5).map((v, i) => v * Math.sin(i / 16)),\n })\n\n cy.get(id).matchImageSnapshot('very-wide-container')\n\n wrapReady(wavesurfer).then(() => {\n container.style.width = ''\n done()\n })\n })\n })\n})\n" }, { "path": "cypress/e2e/regions-no-audio.cy.js", "content": "describe('WaveSurfer Regions plugin with no audio tests', () => {\n beforeEach((done) => {\n cy.visit('cypress/e2e/index.html')\n\n cy.window().its('WaveSurfer').should('exist')\n\n cy.window().then((win) => {\n const waitForReady = new Promise((resolve) => {\n win.wavesurfer = win.WaveSurfer.create({\n container: '#waveform',\n height: 200,\n waveColor: 'rgb(200, 200, 0)',\n progressColor: 'rgb(100, 100, 0)',\n\n // For these tests we're explicitly testing for scenarios where audio is not loaded\n // so we don't pass a url, instead we use peaks & duration.\n //url: '/examples/audio/demo.wav',\n\n duration: 22,\n peaks: [\n [\n 0, 0.0023595101665705442, 0.012107174843549728, 0.005919494666159153, -0.31324470043182373,\n 0.1511787623167038, 0.2473851442337036, 0.11443428695201874, -0.036057762801647186, -0.0968964695930481,\n -0.03033737652003765, 0.10682467371225357, 0.23974689841270447, 0.013210971839725971,\n -0.12377244979143143, 0.046145666390657425, -0.015757400542497635, 0.10884027928113937,\n 0.06681904196739197, 0.09432944655418396, -0.17105795443058014, -0.023439358919858932,\n -0.10380347073078156, 0.0034454423002898693, 0.08061369508504868, 0.026129156351089478,\n 0.18730352818965912, 0.020447958260774612, -0.15030759572982788, 0.05689578503370285,\n -0.0009095853311009705, 0.2749626338481903, 0.2565386891365051, 0.07571295648813248, 0.10791446268558502,\n -0.06575305759906769, 0.15336275100708008, 0.07056761533021927, 0.03287476301193237, -0.09044631570577621,\n 0.01777501218020916, -0.04906218498945236, -0.04756792634725571, -0.006875281687825918,\n 0.04520256072282791, -0.02362387254834175, -0.0668797641992569, 0.12266506254673004, -0.10895221680402756,\n 0.03791835159063339, -0.0195105392485857, -0.031097881495952606, 0.04252675920724869,\n -0.09187793731689453, 0.0829525887966156, -0.003812957089394331, 0.0431736595928669, 0.07634212076663971,\n -0.05335947126150131, 0.0345163568854332, -0.049201950430870056, 0.02300390601158142,\n 0.007677287794649601, 0.015354577451944351, 0.007677287794649601, 0.007677288725972176,\n ],\n ],\n splitChannels: true,\n plugins: [win.Regions.create()],\n })\n\n win.wavesurfer.once('ready', () => resolve())\n })\n\n cy.wrap(waitForReady).then(done)\n })\n })\n\n it('should listen to events on a region', () => {\n cy.window().then((win) => {\n const regionsPlugin = win.wavesurfer.getActivePlugins()[0]\n\n const region = regionsPlugin.addRegion({\n start: 1,\n end: 3,\n content: 'Test region',\n color: 'rgba(0, 100, 0, 0.2)',\n })\n\n expect(region.element.textContent).to.equal('Test region')\n\n let eventHandlerCalled = false\n\n regionsPlugin.on('region-in', (reg, e) => {\n expect(region).to.equal(reg)\n eventHandlerCalled = true\n })\n\n win.wavesurfer.setTime(2)\n\n expect(eventHandlerCalled).to.be.true\n expect(win.wavesurfer.isPlaying()).to.be.false\n expect(win.wavesurfer.getCurrentTime()).to.equal(2)\n\n win.wavesurfer.destroy()\n })\n })\n})\n" }, { "path": "cypress/e2e/regions.cy.js", "content": "describe('WaveSurfer Regions plugin tests', () => {\n beforeEach((done) => {\n cy.visit('cypress/e2e/index.html')\n\n cy.window().its('WaveSurfer').should('exist')\n\n cy.window().then((win) => {\n const waitForReady = new Promise((resolve) => {\n win.wavesurfer = win.WaveSurfer.create({\n container: '#waveform',\n height: 200,\n waveColor: 'rgb(200, 200, 0)',\n progressColor: 'rgb(100, 100, 0)',\n url: '../../examples/audio/stereo.mp3',\n splitChannels: true,\n plugins: [win.Regions.create()],\n })\n\n win.wavesurfer.once('ready', () => resolve())\n })\n\n cy.wrap(waitForReady).then(done)\n })\n })\n\n it('should create and remove regions', () => {\n cy.window().then((win) => {\n const regions = win.wavesurfer.getActivePlugins()[0]\n\n expect(regions).to.be.an('object')\n\n // Add a region\n const color = 'rgba(100, 0, 0, 0.1)'\n const firstRegion = regions.addRegion({\n start: 1.5,\n end: 10.1,\n content: 'Hello',\n color,\n })\n\n expect(firstRegion).to.be.an('object')\n expect(firstRegion.element).to.be.an('HTMLDivElement')\n expect(firstRegion.element.textContent).to.equal('Hello')\n expect(firstRegion.element.style.backgroundColor).to.equal(color)\n\n firstRegion.remove()\n expect(firstRegion.element).to.be.null\n\n // Create another region\n const secondColor = 'rgba(0, 0, 100, 0.1)'\n const secondRegion = regions.addRegion({\n start: 5.8,\n end: 12,\n content: 'Second',\n color: secondColor,\n })\n\n expect(secondRegion).to.be.an('object')\n expect(secondRegion.element).to.be.an('HTMLDivElement')\n expect(secondRegion.element.textContent).to.equal('Second')\n expect(secondRegion.element.style.backgroundColor).to.equal(secondColor)\n\n secondRegion.remove()\n expect(secondRegion.element).to.be.null\n })\n })\n\n it('should drag a region', () => {\n cy.window().then((win) => {\n const regions = win.wavesurfer.getActivePlugins()[0]\n const region = regions.addRegion({\n start: 3,\n end: 8,\n content: 'Region',\n color: 'rgba(0, 100, 0, 0.2)',\n })\n\n expect(region.start).to.equal(3)\n\n return cy.wait(10).then(() => {\n // Drag the region\n const pointerDownEvent = new PointerEvent('pointerdown', {\n clientX: 90,\n clientY: 1,\n })\n const pointerMoveEvent = new PointerEvent('pointermove', {\n clientX: 200,\n clientY: 10,\n })\n const pointerUpEvent = new PointerEvent('pointerup', {\n clientX: 200,\n clientY: 10,\n })\n region.element.dispatchEvent(pointerDownEvent)\n win.document.dispatchEvent(pointerMoveEvent)\n win.document.dispatchEvent(pointerUpEvent)\n\n expect(region.start).to.be.greaterThan(3)\n })\n })\n })\n\n it('should set the color of a region', () => {\n cy.window().then((win) => {\n const regions = win.wavesurfer.getActivePlugins()[0]\n const region = regions.addRegion({\n start: 3,\n end: 8,\n content: 'Region',\n color: 'rgba(0, 100, 0, 0.2)',\n })\n\n expect(region.color).to.equal('rgba(0, 100, 0, 0.2)')\n\n region.setOptions({ color: 'rgba(100, 0, 0, 0.1)' })\n\n expect(region.color).to.equal('rgba(100, 0, 0, 0.1)')\n\n region.remove()\n })\n })\n\n it('should set a region position', () => {\n cy.window().then((win) => {\n const regions = win.wavesurfer.getActivePlugins()[0]\n const region = regions.addRegion({\n start: 3,\n end: 8,\n content: 'Region',\n color: 'rgba(0, 100, 0, 0.2)',\n })\n\n expect(region.start).to.equal(3)\n expect(region.end).to.equal(8)\n expect(region.resize).to.equal(true)\n\n region.setOptions({\n start: 5,\n end: 10,\n resize: false,\n })\n\n expect(region.start).to.equal(5)\n expect(region.end).to.equal(10)\n expect(region.resize).to.equal(false)\n })\n })\n\n it('should create markers', () => {\n cy.window().then((win) => {\n const regions = win.wavesurfer.getActivePlugins()[0]\n const region = regions.addRegion({ start: 3, content: 'Marker', color: 'rgba(0, 100, 100, 0.2)' })\n expect(region.start).to.equal(3)\n expect(region.end).to.equal(3)\n expect(region.element.style.backgroundColor).to.equal('')\n })\n })\n\n it('should allow drag selection', () => {\n cy.window().then((win) => {\n const regions = win.wavesurfer.getActivePlugins()[0]\n\n const disableDragSelection = regions.enableDragSelection({\n color: 'rgba(0, 100, 0, 0.2)',\n content: 'Drag',\n })\n\n expect(regions.getRegions().length).to.equal(0)\n\n regions.addRegion({\n start: 3,\n end: 8,\n content: 'Region',\n color: 'rgba(0, 100, 0, 0.2)',\n })\n\n let regionInitializedEventCalled = false\n regions.on('region-initialized', () => {\n regionInitializedEventCalled = true\n })\n\n expect(regions.getRegions().length).to.equal(1)\n\n // Drag the region\n const pointerDownEvent = new PointerEvent('pointerdown', {\n clientX: 40,\n clientY: 1,\n })\n const pointerMoveEvent = new PointerEvent('pointermove', {\n clientX: 100,\n clientY: 10,\n })\n const pointerUpEvent = new PointerEvent('pointerup', {\n clientX: 100,\n clientY: 10,\n })\n win.wavesurfer.getWrapper().dispatchEvent(pointerDownEvent)\n win.document.dispatchEvent(pointerMoveEvent)\n expect(regionInitializedEventCalled).to.be.true\n win.document.dispatchEvent(pointerUpEvent)\n\n // It shouldn't trigger a click\n expect(win.wavesurfer.getCurrentTime()).to.equal(0)\n\n expect(regions.getRegions().length).to.equal(2)\n expect(regions.getRegions()[1].element.textContent).to.equal('Drag')\n regions.clearRegions()\n expect(regions.getRegions().length).to.equal(0)\n\n // Disable drag selection\n disableDragSelection()\n\n win.wavesurfer.getWrapper().querySelector('div').dispatchEvent(pointerDownEvent)\n win.document.dispatchEvent(pointerMoveEvent)\n win.document.dispatchEvent(pointerUpEvent)\n\n // It should not create any regions because drag selection is disabled\n expect(regions.getRegions().length).to.equal(0)\n })\n })\n\n it('should listen to clicks on a region', () => {\n cy.window().then((win) => {\n const regionsPlugin = win.wavesurfer.getActivePlugins()[0]\n\n const region = regionsPlugin.addRegion({\n start: 1,\n end: 5,\n content: 'Click me',\n color: 'rgba(0, 100, 0, 0.2)',\n })\n\n expect(region.element.textContent).to.equal('Click me')\n\n region.on('click', (e) => {\n e.stopPropagation()\n })\n\n regionsPlugin.on('region-clicked', (reg, e) => {\n expect(e.stopPropagation instanceof Function).to.be.true\n expect(region).to.equal(reg)\n reg.play()\n })\n\n // Should not trigger an interaction on the wavesurfer\n win.wavesurfer.on('interaction', () => {\n expect(false).to.be.true\n })\n\n const clickEvent = new Event('click')\n\n region.element.dispatchEvent(clickEvent)\n\n expect(win.wavesurfer.isPlaying()).to.be.true\n expect(win.wavesurfer.getCurrentTime()).to.equal(region.start)\n\n win.wavesurfer.destroy()\n })\n })\n\n it('should set region content', () => {\n cy.window().then((win) => {\n const regionsPlugin = win.wavesurfer.getActivePlugins()[0]\n\n const region = regionsPlugin.addRegion({\n start: 1,\n end: 5,\n content: 'Click me',\n color: 'rgba(0, 100, 0, 0.2)',\n })\n\n expect(region.element.textContent).to.equal('Click me')\n\n region.setOptions({ content: 'Updated' })\n\n expect(region.element.textContent).to.equal('Updated')\n\n region.setContent('Updated again')\n\n expect(region.element.textContent).to.equal('Updated again')\n\n // HTML content\n const div = document.createElement('div')\n div.innerHTML = '

HTML content

'\n region.setContent(div)\n\n expect(region.element.textContent).to.equal('HTML content')\n\n win.wavesurfer.destroy()\n })\n })\n\n it('should set region id', () => {\n cy.window().then((win) => {\n const regionsPlugin = win.wavesurfer.getActivePlugins()[0]\n\n const region = regionsPlugin.addRegion({\n id: 'my-region',\n start: 1,\n end: 5,\n })\n\n expect(region.element.getAttribute('part')).to.equal('region my-region')\n\n // Make it a marker\n region.setOptions({ start: 3, end: 3 })\n\n expect(region.element.getAttribute('part')).to.equal('marker my-region')\n\n // Set the id\n region.setOptions({ id: 'my-marker' })\n\n expect(region.id).to.equal('my-marker')\n\n expect(region.element.getAttribute('part')).to.equal('marker my-marker')\n\n win.wavesurfer.destroy()\n })\n })\n\n it('should not add resize handles if resize is set to false', () => {\n cy.window().then((win) => {\n const regionsPlugin = win.wavesurfer.getActivePlugins()[0]\n\n const region = regionsPlugin.addRegion({\n id: 'no-resize-region',\n start: 1,\n end: 5,\n resize: false,\n })\n\n expect(region).to.be.an('object')\n expect(region.element).to.be.an('HTMLDivElement')\n expect(region.element.children).to.have.length(0)\n\n win.wavesurfer.destroy()\n })\n })\n\n it('should add a region to a specific channel by index', () => {\n cy.window().then((win) => {\n const regionsPlugin = win.wavesurfer.getActivePlugins()[0]\n\n regionsPlugin.addRegion({\n start: 25,\n end: 100,\n channelIdx: 1,\n })\n\n cy.get('#waveform').matchImageSnapshot('regions-channelIdx')\n })\n })\n})\n" }, { "path": "cypress/e2e/spectrogram.cy.js", "content": "const id = '#waveform'\nconst scales = ['linear', 'mel', 'log', 'bark', 'erb']\n\nxdescribe('WaveSurfer Spectrogram plugin tests', () => {\n it('should render a spectrogram', () => {\n cy.visit('cypress/e2e/index.html')\n cy.window().then((win) => {\n return new Promise((resolve) => {\n win.wavesurfer = win.WaveSurfer.create({\n container: id,\n height: 200,\n url: '../../examples/audio/demo.wav',\n plugins: [\n win.Spectrogram.create({\n height: 200,\n labels: true,\n scale: 'linear',\n }),\n ],\n })\n\n win.wavesurfer.once('ready', () => {\n cy.get(id).matchImageSnapshot('spectrogram-basic')\n resolve()\n })\n })\n })\n })\n\n it('should render a spectrogram without labels', () => {\n cy.visit('cypress/e2e/index.html')\n cy.window().then((win) => {\n return new Promise((resolve) => {\n win.wavesurfer = win.WaveSurfer.create({\n container: id,\n height: 200,\n url: '../../examples/audio/demo.wav',\n plugins: [\n win.Spectrogram.create({\n height: 200,\n labels: false,\n scale: 'linear',\n }),\n ],\n })\n\n win.wavesurfer.once('ready', () => {\n cy.get(id).matchImageSnapshot('spectrogram-no-labels')\n resolve()\n })\n })\n })\n })\n\n it('should render a spectrogram when initialised into a hidden div', () => {\n cy.visit('cypress/e2e/index.html')\n cy.window().then((win) => {\n return new Promise((resolve) => {\n // Hide the wavesurfer div and initialise\n win.document.querySelector(id).style.display = 'none'\n win.wavesurfer = win.WaveSurfer.create({\n container: id,\n height: 200,\n plugins: [\n win.Spectrogram.create({\n height: 200,\n labels: true,\n scale: 'linear',\n }),\n ],\n })\n\n // Load a file and unhide the div\n win.wavesurfer.load('../../examples/audio/demo.wav')\n win.document.querySelector(id).style.display = 'inline-block'\n\n // Ensure we display the spectrogram successfully\n win.wavesurfer.once('ready', () => {\n cy.get(id).matchImageSnapshot('spectrogram-unhidden')\n resolve()\n })\n })\n })\n })\n\n scales.forEach((scale) => {\n it(`should display correct frequency labels with 1kHz tone (${scale})`, () => {\n cy.visit('cypress/e2e/index.html')\n cy.window().then((win) => {\n return new Promise((resolve) => {\n win.wavesurfer = win.WaveSurfer.create({\n container: id,\n height: 200,\n url: '../../examples/audio/1khz.mp3',\n plugins: [\n win.Spectrogram.create({\n height: 200,\n labels: true,\n scale: scale,\n frequencyMin: 0,\n frequencyMax: 4000,\n splitChannels: false,\n }),\n ],\n })\n\n win.wavesurfer.once('ready', () => {\n cy.get(id).matchImageSnapshot(`spectrogram-1khz-${scale}`)\n resolve()\n })\n })\n })\n })\n })\n})\n" }, { "path": "cypress/e2e/umd.cy.js", "content": "describe('WaveSurfer UMD module tests', () => {\n beforeEach(() => {\n cy.visit('cypress/e2e/umd.html')\n cy.window().its('WaveSurfer').should('exist')\n })\n\n it('should instantiate WaveSurfer with two plugins', () => {\n cy.window().then((win) => {\n return new Promise((resolve) => {\n const { WaveSurfer } = win\n win.wavesurfer = win.WaveSurfer.create({\n container: '#waveform',\n url: '../../examples/audio/demo.wav',\n plugins: [WaveSurfer.Regions.create(), WaveSurfer.Timeline.create()],\n })\n resolve()\n })\n })\n })\n})\n" }, { "path": "cypress/e2e/umd.html", "content": "\n\n \n \n \n WaveSurfer CommonJS Test\n\n \n \n \n \n \n
\n \n\n" }, { "path": "cypress/e2e/webaudio.cy.js", "content": "import WebAudioPlayer from '../../dist/webaudio.js'\n\ndescribe('WebAudioPlayer', () => {\n beforeEach(() => {\n cy.window().then((win) => {\n // Create fresh mock objects for each test\n const mockBufferNode = {\n buffer: null,\n connect: cy.stub(),\n disconnect: cy.stub(),\n start: cy.stub(),\n stop: cy.stub(),\n playbackRate: { value: 1 },\n onended: null,\n }\n\n const mockGainNode = {\n connect: cy.stub(),\n gain: { value: 1 },\n }\n\n const mockAudioContext = {\n currentTime: 0,\n createBufferSource: cy.stub().returns(mockBufferNode),\n createGain: cy.stub().returns(mockGainNode),\n destination: {},\n }\n\n // Create a fresh WebAudioPlayer instance\n const player = new WebAudioPlayer(mockAudioContext)\n win.WebAudioPlayer = player // Attach to window for Cypress access\n\n // Set up a mock buffer for playback\n const mockBuffer = { duration: 10 }\n player.buffer = mockBuffer\n\n // Store objects as Cypress aliases for easy access\n cy.wrap(player).as('player')\n cy.wrap(mockBufferNode.start).as('startStub')\n })\n })\n\n describe('_play method', () => {\n it('should reset position when currentPos is negative', () => {\n cy.get('@player').then((player) => {\n player.playbackRate = 1\n player.currentTime = -1\n\n return player.play().then(() => {\n // Verify position was reset\n expect(player.currentTime).to.equal(0)\n cy.get('@startStub').should('have.been.calledWith', 0, 0)\n })\n })\n })\n\n it('should reset position when currentPos exceeds duration', () => {\n cy.get('@player').then((player) => {\n player.currentTime = 15\n\n return player.play().then(() => {\n // Verify position was reset\n expect(player.currentTime).to.equal(0)\n cy.get('@startStub').should('have.been.calledWith', 0, 0)\n })\n })\n })\n\n it('should maintain position when within valid range', () => {\n cy.get('@player').then((player) => {\n const validTime = 5\n player.currentTime = validTime\n\n return player.play().then(() => {\n // Verify position was maintained\n cy.get('@startStub').should('have.been.calledWith', 0, validTime)\n })\n })\n })\n\n it('should handle playback rate changes correctly', () => {\n cy.get('@player').then((player) => {\n player.currentTime = 2\n player.playbackRate = 2\n\n return player.play().then(() => {\n // currentPos should be 2 (playbackRate affects speed, not start offset)\n cy.get('@startStub').should('have.been.calledWith', 0, 2)\n expect(player.bufferNode.playbackRate.value).to.equal(2)\n })\n })\n })\n })\n})\n" }, { "path": "cypress/support/commands.ts", "content": "/// \n// ***********************************************\n// This example commands.ts shows you how to\n// create various custom commands and overwrite\n// existing commands.\n//\n// For more comprehensive examples of custom\n// commands please read more here:\n// https://on.cypress.io/custom-commands\n// ***********************************************\n//\n//\n// -- This is a parent command --\n// Cypress.Commands.add('login', (email, password) => { ... })\n//\n//\n// -- This is a child command --\n// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })\n//\n//\n// -- This is a dual command --\n// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })\n//\n//\n// -- This will overwrite an existing command --\n// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })\n//\n// declare global {\n// namespace Cypress {\n// interface Chainable {\n// login(email: string, password: string): Chainable\n// drag(subject: string, options?: Partial): Chainable\n// dismiss(subject: string, options?: Partial): Chainable\n// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable\n// }\n// }\n// }\n\nimport { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command'\n\naddMatchImageSnapshotCommand({\n failureThresholdType: 'percent',\n failureThreshold: 0.03,\n})\n" }, { "path": "cypress/support/e2e.ts", "content": "// ***********************************************************\n// This example support/e2e.ts is processed and\n// loaded automatically before your test files.\n//\n// This is a great place to put global configuration and\n// behavior that modifies Cypress.\n//\n// You can change the location of this file or turn off\n// automatically serving support files with the\n// 'supportFile' configuration option.\n//\n// You can read more here:\n// https://on.cypress.io/configuration\n// ***********************************************************\n\n// Import commands.js using ES2015 syntax:\nimport './commands'\n\n// Alternatively you can use CommonJS syntax:\n// require('./commands')\n" }, { "path": "cypress.config.js", "content": "import { defineConfig } from 'cypress'\nimport { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin.js'\n\nexport default defineConfig({\n video: false,\n e2e: {\n setupNodeEvents(on, config) {\n on('before:browser:launch', (browser, launchOptions) => {\n if (browser.name === 'chrome' || browser.name === 'chromium') {\n launchOptions.args.push('--force-device-scale-factor=1')\n }\n return launchOptions\n })\n\n addMatchImageSnapshotPlugin(on, config)\n },\n },\n})\n" }, { "path": "eslint.config.js", "content": "import { FlatCompat } from '@eslint/eslintrc'\nimport js from '@eslint/js'\n\nconst compat = new FlatCompat({\n baseDirectory: import.meta.dirname,\n recommendedConfig: js.configs.recommended,\n allConfig: js.configs.all,\n})\n\nexport default compat.config({\n env: { browser: true, es2021: true },\n parser: '@typescript-eslint/parser',\n parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },\n plugins: ['@typescript-eslint', 'prettier'],\n extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier', 'plugin:prettier/recommended'],\n rules: {\n '@typescript-eslint/no-explicit-any': 'off',\n '@typescript-eslint/no-empty-object-type': 'off',\n '@typescript-eslint/no-this-alias': 'off',\n },\n ignorePatterns: ['cypress', 'examples', 'tutorial', 'src/plugins/spectrogram*', 'scripts'],\n overrides: [\n {\n files: ['src/__tests__/**/*.ts'],\n env: { jest: true, node: true },\n rules: {\n '@typescript-eslint/ban-ts-comment': 'off',\n },\n },\n ],\n})\n" }, { "path": "examples/_preview.js", "content": "const iframe = document.querySelector('iframe')\nconst textarea = document.querySelector('textarea')\n\nconst loadPreview = (code) => {\n const html = code.replace(/\\n/g, '').match(/(.+?)<\\/html>/gm) || []\n const script = code\n .replace(/<\\/script>/g, '')\n .replace(/'wavesurfer.js'/g, `'../dist/wavesurfer.esm.js'`)\n .replace(/'wavesurfer.js/g, `'..`)\n .replace(/\\.esm\\.js/g, '.js')\n const isBabel = script.includes('@babel')\n\n // Start of iframe template\n iframe.srcdoc = `\n\n\n \n \n \n wavesurfer.js examples\n \n \n\n \n ${html.join('')}\n\n \n \n\n`\n // End of iframe template\n}\n\nconst openExample = (url) => {\n fetch(`/examples/${url}`, {\n cache: 'no-cache',\n })\n .then((res) => res.text())\n .then((text) => {\n loadPreview(text)\n textarea.value = text\n })\n}\n\nlet delay\ndocument.querySelector('textarea').addEventListener('input', (e) => {\n if (delay) clearTimeout(delay)\n delay = setTimeout(() => {\n loadPreview(e.target.value)\n }, 500)\n})\n\nconst url = location.hash.slice(1) || 'basic.js'\nopenExample(url)\n\nlet active = document.querySelector(`aside a[href=\"#${url}\"]`)\nif (active) active.classList.add('active')\ndocument.querySelectorAll('aside a').forEach((link) => {\n link.addEventListener('click', () => {\n const url = link.hash.slice(1)\n openExample(url)\n if (active) active.classList.remove('active')\n active = link\n active.classList.add('active')\n })\n})\n" }, { "path": "examples/all-options.js", "content": "// All wavesurfer options in one place\n\nimport WaveSurfer from 'wavesurfer.js'\n\nconst options = {\n /** HTML element or CSS selector (required) */\n container: 'body',\n /** The height of the waveform in pixels */\n height: 128,\n /** The width of the waveform in pixels or any CSS value; defaults to 100% */\n width: 300,\n /** Render each audio channel as a separate waveform */\n splitChannels: false,\n /** Stretch the waveform to the full height */\n normalize: false,\n /** The color of the waveform */\n waveColor: '#ff4e00',\n /** The color of the progress mask */\n progressColor: '#dd5e98',\n /** The color of the playback cursor */\n cursorColor: '#ddd5e9',\n /** The cursor width */\n cursorWidth: 2,\n /** Render the waveform with bars like this: ▁ ▂ ▇ ▃ ▅ ▂ */\n barWidth: NaN,\n /** Spacing between bars in pixels */\n barGap: NaN,\n /** Rounded borders for bars */\n barRadius: NaN,\n /** A vertical scaling factor for the waveform */\n barHeight: NaN,\n /** Vertical bar alignment **/\n barAlign: '',\n /** Minimum pixels per second of audio (i.e. zoom level) */\n minPxPerSec: 1,\n /** Stretch the waveform to fill the container, true by default */\n fillParent: true,\n /** Audio URL */\n url: '/examples/audio/audio.wav',\n /** Whether to show default audio element controls */\n mediaControls: true,\n /** Play the audio on load */\n autoplay: false,\n /** Pass false to disable clicks on the waveform */\n interact: true,\n /** Allow to drag the cursor to seek to a new position */\n dragToSeek: false,\n /** Hide the scrollbar */\n hideScrollbar: false,\n /** Audio rate */\n audioRate: 1,\n /** Automatically scroll the container to keep the current position in viewport */\n autoScroll: true,\n /** If autoScroll is enabled, keep the cursor in the center of the waveform during playback */\n autoCenter: true,\n /** Decoding sample rate. Doesn't affect the playback. Defaults to 8000 */\n sampleRate: 8000,\n}\n\nconst wavesurfer = WaveSurfer.create(options)\n\nwavesurfer.on('ready', () => {\n wavesurfer.setTime(10)\n})\n\n// Generate a form input for each option\nconst schema = {\n height: {\n value: 128,\n min: 10,\n max: 512,\n step: 1,\n },\n width: {\n value: 300,\n min: 10,\n max: 2000,\n step: 1,\n },\n cursorWidth: {\n value: 1,\n min: 0,\n max: 10,\n step: 1,\n },\n minPxPerSec: {\n value: 1,\n min: 1,\n max: 1000,\n step: 1,\n },\n barWidth: {\n value: 0,\n min: 1,\n max: 30,\n step: 1,\n },\n barHeight: {\n value: 1,\n min: 0.1,\n max: 4,\n step: 0.1,\n },\n barGap: {\n value: 0,\n min: 1,\n max: 30,\n step: 1,\n },\n barRadius: {\n value: 0,\n min: 1,\n max: 30,\n step: 1,\n },\n peaks: {\n type: 'json',\n },\n audioRate: {\n value: 1,\n min: 0.1,\n max: 4,\n step: 0.1,\n },\n sampleRate: {\n value: 8000,\n min: 8000,\n max: 48000,\n step: 1000,\n },\n}\n\nconst form = document.createElement('form')\nObject.assign(form.style, {\n display: 'flex',\n flexDirection: 'column',\n gap: '1rem',\n padding: '1rem',\n})\ndocument.body.appendChild(form)\n\nfor (const key in options) {\n if (options[key] === undefined) continue\n const isColor = key.includes('Color')\n\n const label = document.createElement('label')\n Object.assign(label.style, {\n display: 'flex',\n alignItems: 'center',\n })\n\n const span = document.createElement('span')\n Object.assign(span.style, {\n textTransform: 'capitalize',\n width: '7em',\n })\n span.textContent = `${key.replace(/[a-z0-9](?=[A-Z])/g, '$& ')}: `\n label.appendChild(span)\n\n const input = document.createElement('input')\n const type = typeof options[key]\n Object.assign(input, {\n type: isColor ? 'color' : type === 'number' ? 'range' : type === 'boolean' ? 'checkbox' : 'text',\n name: key,\n value: options[key],\n checked: options[key] === true,\n })\n if (input.type === 'text') input.style.flex = 1\n if (options[key] instanceof HTMLElement) input.disabled = true\n\n if (schema[key]) {\n Object.assign(input, schema[key])\n }\n\n label.appendChild(input)\n form.appendChild(label)\n\n input.oninput = () => {\n if (type === 'number') {\n options[key] = input.valueAsNumber\n } else if (type === 'boolean') {\n options[key] = input.checked\n } else if (schema[key] && schema[key].type === 'json') {\n options[key] = JSON.parse(input.value)\n } else {\n options[key] = input.value\n }\n wavesurfer.setOptions(options)\n textarea.value = JSON.stringify(options, null, 2)\n }\n}\n\nconst textarea = document.createElement('textarea')\nObject.assign(textarea.style, {\n width: '100%',\n height: Object.keys(options).length + 1 + 'rem',\n})\ntextarea.value = JSON.stringify(options, null, 2)\ntextarea.readOnly = true\nform.appendChild(textarea)\n" }, { "path": "examples/audio/reed.sh", "content": "#!/bin/bash\n\nsay -v 'Reed (English (US))' -o \"${1}\" --file-format='mp4f' \"${1}\"\n" }, { "path": "examples/bars.js", "content": "// SoundCloud-style bars\n\nimport WaveSurfer from 'wavesurfer.js'\n\nconst wavesurfer = WaveSurfer.create({\n container: document.body,\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n url: '/examples/audio/audio.wav',\n\n // Set a bar width\n barWidth: 2,\n // Optionally, specify the spacing between bars\n barGap: 1,\n // And the bar radius\n barRadius: 2,\n})\n\nwavesurfer.once('interaction', () => {\n wavesurfer.play()\n})\n" }, { "path": "examples/basic.js", "content": "// A basic example\n\nimport WaveSurfer from 'wavesurfer.js'\n\nconst wavesurfer = WaveSurfer.create({\n container: document.body,\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n url: '/examples/audio/demo.wav',\n})\n\nwavesurfer.on('click', () => {\n wavesurfer.play()\n})\n" }, { "path": "examples/custom-render.js", "content": "// Custom rendering function\n\nimport WaveSurfer from 'wavesurfer.js'\n\nconst wavesurfer = WaveSurfer.create({\n container: document.body,\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n url: '/examples/audio/demo.wav',\n\n /**\n * Render a waveform as a squiggly line\n * @see https://css-tricks.com/making-an-audio-waveform-visualizer-with-vanilla-javascript/\n */\n renderFunction: (channels, ctx) => {\n const { width, height } = ctx.canvas\n const scale = channels[0].length / width\n const step = 10\n\n ctx.translate(0, height / 2)\n ctx.strokeStyle = ctx.fillStyle\n ctx.beginPath()\n\n for (let i = 0; i < width; i += step * 2) {\n const index = Math.floor(i * scale)\n const value = Math.abs(channels[0][index])\n let x = i\n let y = value * height\n\n ctx.moveTo(x, 0)\n ctx.lineTo(x, y)\n ctx.arc(x + step / 2, y, step / 2, Math.PI, 0, true)\n ctx.lineTo(x + step, 0)\n\n x = x + step\n y = -y\n ctx.moveTo(x, 0)\n ctx.lineTo(x, y)\n ctx.arc(x + step / 2, y, step / 2, Math.PI, 0, false)\n ctx.lineTo(x + step, 0)\n }\n\n ctx.stroke()\n ctx.closePath()\n },\n})\n\nwavesurfer.on('interaction', () => {\n wavesurfer.play()\n})\n" }, { "path": "examples/envelope.js", "content": "// Envelope plugin\n// Graphical fade-in and fade-out and volume control\n\n/*\n\n \n \n\n Volume: \n
\n

\n 📖 Envelope plugin docs\n

\n\n*/\n\nimport WaveSurfer from 'wavesurfer.js'\nimport EnvelopePlugin from 'wavesurfer.js/dist/plugins/envelope.esm.js'\n\n// Create an instance of WaveSurfer\nconst wavesurfer = WaveSurfer.create({\n container: '#container',\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n url: '/examples/audio/audio.wav',\n})\n\nconst isMobile = top.matchMedia('(max-width: 900px)').matches\n\n// Initialize the Envelope plugin\nconst envelope = wavesurfer.registerPlugin(\n EnvelopePlugin.create({\n volume: 0.8,\n lineColor: 'rgba(255, 0, 0, 0.5)',\n lineWidth: 4,\n dragPointSize: isMobile ? 20 : 12,\n dragLine: !isMobile,\n dragPointFill: 'rgba(0, 255, 255, 0.8)',\n dragPointStroke: 'rgba(0, 0, 0, 0.5)',\n\n points: [\n { time: 11.2, volume: 0.5 },\n { time: 15.5, volume: 0.8 },\n ],\n }),\n)\n\nenvelope.on('points-change', (points) => {\n console.log('Envelope points changed', points)\n})\n\nenvelope.addPoint({ time: 1, volume: 0.9 })\n\n// Randomize points\nconst randomizePoints = () => {\n const points = []\n const len = 5 * Math.random()\n for (let i = 0; i < len; i++) {\n points.push({\n time: Math.random() * wavesurfer.getDuration(),\n volume: Math.random(),\n })\n }\n envelope.setPoints(points)\n}\n\ndocument.querySelector('#randomize').onclick = randomizePoints\n\n// Show the current volume\nconst volumeLabel = document.querySelector('label')\nconst showVolume = () => {\n volumeLabel.textContent = envelope.getCurrentVolume().toFixed(2)\n}\nenvelope.on('volume-change', showVolume)\nwavesurfer.on('ready', showVolume)\n\n// Play/pause button\nconst button = document.querySelector('#play')\nwavesurfer.once('ready', () => {\n button.onclick = () => {\n wavesurfer.playPause()\n }\n})\nwavesurfer.on('play', () => {\n button.textContent = 'Pause'\n})\nwavesurfer.on('pause', () => {\n button.textContent = 'Play'\n})\n" }, { "path": "examples/events.js", "content": "import WaveSurfer from 'wavesurfer.js'\n\nconst wavesurfer = WaveSurfer.create({\n container: document.body,\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n})\n\n/** When audio starts loading */\nwavesurfer.on('load', (url) => {\n console.log('Load', url)\n})\n\n/** During audio loading */\nwavesurfer.on('loading', (percent) => {\n console.log('Loading', percent + '%')\n})\n\n/** When the audio has been decoded */\nwavesurfer.on('decode', (duration) => {\n console.log('Decode', duration + 's')\n})\n\n/** When the audio is both decoded and can play */\nwavesurfer.on('ready', (duration) => {\n console.log('Ready', duration + 's')\n})\n\n/** When visible waveform is drawn */\nwavesurfer.on('redraw', () => {\n console.log('Redraw began')\n})\n\n/** When all audio channel chunks of the waveform have drawn */\nwavesurfer.on('redrawcomplete', () => {\n console.log('Redraw complete')\n})\n\n/** When the audio starts playing */\nwavesurfer.on('play', () => {\n console.log('Play')\n})\n\n/** When the audio pauses */\nwavesurfer.on('pause', () => {\n console.log('Pause')\n})\n\n/** When the audio finishes playing */\nwavesurfer.on('finish', () => {\n console.log('Finish')\n})\n\n/** On audio position change, fires continuously during playback */\nwavesurfer.on('timeupdate', (currentTime) => {\n console.log('Time', currentTime + 's')\n})\n\n/** When the user seeks to a new position */\nwavesurfer.on('seeking', (currentTime) => {\n console.log('Seeking', currentTime + 's')\n})\n\n/** When the user interacts with the waveform (i.g. clicks or drags on it) */\nwavesurfer.on('interaction', (newTime) => {\n console.log('Interaction', newTime + 's')\n})\n\n/** When the user clicks on the waveform */\nwavesurfer.on('click', (relativeX) => {\n console.log('Click', relativeX)\n})\n\n/** When the user drags the cursor */\nwavesurfer.on('drag', (relativeX) => {\n console.log('Drag', relativeX)\n})\n\n/** When the waveform is scrolled (panned) */\nwavesurfer.on('scroll', (visibleStartTime, visibleEndTime) => {\n console.log('Scroll', visibleStartTime + 's', visibleEndTime + 's')\n})\n\n/** When the zoom level changes */\nwavesurfer.on('zoom', (minPxPerSec) => {\n console.log('Zoom', minPxPerSec + 'px/s')\n})\n\n/** Just before the waveform is destroyed so you can clean up your events */\nwavesurfer.on('destroy', () => {\n console.log('Destroy')\n})\n\nwavesurfer.load('/examples/audio/audio.wav')\n\n/*\n\n \n \n

Open the console to see the event logs

\n\n*/\n\n// Update the zoom level on slider change\nwavesurfer.once('decode', () => {\n const slider = document.querySelector('input[type=\"range\"]')\n\n slider.addEventListener('input', (e) => {\n const minPxPerSec = e.target.valueAsNumber\n wavesurfer.zoom(minPxPerSec)\n })\n\n document.querySelector('button').addEventListener('click', () => {\n wavesurfer.playPause()\n })\n})\n" }, { "path": "examples/fm-synth.js", "content": "// A two-operator FM synth with a real-time waveform\n\nimport WaveSurfer from 'wavesurfer.js'\n\nconst wavesurfer = WaveSurfer.create({\n container: '#waveform',\n waveColor: 'rgb(200, 0, 200)',\n cursorColor: 'transparent',\n barWidth: 2,\n interact: false,\n})\n\nconst audioContext = new AudioContext()\n\n// Create an analyser node\nconst analyser = audioContext.createAnalyser()\nanalyser.fftSize = 512 * 2\nanalyser.connect(audioContext.destination)\nconst dataArray = new Float32Array(analyser.frequencyBinCount)\n\nfunction createVoice() {\n // Carrier oscillator\n const carrierOsc = audioContext.createOscillator()\n carrierOsc.type = 'sine'\n\n // Modulator oscillator\n const modulatorOsc = audioContext.createOscillator()\n modulatorOsc.type = 'sine'\n\n // Modulation depth\n const modulationGain = audioContext.createGain()\n\n // Connect the modulator to the carrier frequency\n modulatorOsc.connect(modulationGain)\n modulationGain.connect(carrierOsc.frequency)\n\n // Create an output gain\n const outputGain = audioContext.createGain()\n outputGain.gain.value = 0\n\n // Connect carrier oscillator to output\n carrierOsc.connect(outputGain)\n\n // Connect output to analyser\n outputGain.connect(analyser)\n\n // Start oscillators\n carrierOsc.start()\n modulatorOsc.start()\n\n return {\n carrierOsc,\n modulatorOsc,\n modulationGain,\n outputGain,\n }\n}\n\nfunction playNote(frequency, modulationFrequency, modulationDepth, duration) {\n const voice = createVoice()\n const { carrierOsc, modulatorOsc, modulationGain, outputGain } = voice\n\n carrierOsc.frequency.value = frequency\n modulatorOsc.frequency.value = modulationFrequency\n modulationGain.gain.value = modulationDepth\n\n outputGain.gain.setValueAtTime(0.00001, audioContext.currentTime)\n outputGain.gain.exponentialRampToValueAtTime(1, audioContext.currentTime + duration / 1000)\n\n return voice\n}\n\nfunction releaseNote(voice, duration) {\n const { carrierOsc, modulatorOsc, modulationGain, outputGain } = voice\n outputGain.gain.cancelScheduledValues(audioContext.currentTime)\n outputGain.gain.setValueAtTime(1, audioContext.currentTime)\n outputGain.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + duration / 1000)\n\n setTimeout(() => {\n carrierOsc.stop()\n modulatorOsc.stop()\n carrierOsc.disconnect()\n modulatorOsc.disconnect()\n modulationGain.disconnect()\n outputGain.disconnect()\n voice.carrierOsc = null\n voice.modulatorOsc = null\n voice.modulationGain = null\n voice.outputGain = null\n }, duration + 100)\n}\n\nfunction createPianoRoll() {\n const baseFrequency = 110\n const numRows = 4\n const numCols = 10\n\n const noteFrequency = (row, col) => {\n // The top row is the bass\n // The lower rows represent the notes of a major third chord\n // Columns represent the notes of a C major scale (there are 10 columns and 4 rows)\n const chord = [-8, 0, 4, 7]\n const scale = [0, 2, 4, 5, 7, 9, 11, 12, 14, 16]\n const note = chord[row] + scale[col]\n return baseFrequency * Math.pow(2, note / 12)\n }\n\n const pianoRoll = document.getElementById('pianoRoll')\n const qwerty = '1234567890qwertyuiopasdfghjkl;zxcvbnm,./'\n const capsQwerty = '!@#$%^&*()QWERTYUIOPASDFGHJKL:ZXCVBNM<>?'\n\n const onKeyDown = (freq) => {\n const modulationIndex = parseFloat(document.getElementById('modulationIndex').value)\n const modulationDepth = parseFloat(document.getElementById('modulationDepth').value)\n const duration = parseFloat(document.getElementById('duration').value)\n return playNote(freq, freq * modulationIndex, modulationDepth, duration)\n }\n\n const onKeyUp = (voice) => {\n const duration = parseFloat(document.getElementById('duration').value)\n releaseNote(voice, duration)\n }\n\n const createButton = (row, col) => {\n const button = document.createElement('button')\n const key = qwerty[(row * numCols + col) % qwerty.length]\n const capsKey = capsQwerty[(row * numCols + col) % capsQwerty.length]\n const frequency = noteFrequency(row, col)\n let note = null\n\n button.textContent = key\n pianoRoll.appendChild(button)\n\n // Mouse\n button.addEventListener('mousedown', (e) => {\n note = onKeyDown(frequency * (e.shiftKey ? numRows : 1))\n })\n button.addEventListener('mouseup', () => {\n if (note) {\n onKeyUp(note)\n note = null\n }\n })\n\n // Keyboard\n document.addEventListener('keydown', (e) => {\n if (e.key === key || e.key === capsKey) {\n button.className = 'active'\n if (!note) {\n note = onKeyDown(frequency * (e.shiftKey ? numRows : 1))\n }\n }\n })\n document.addEventListener('keyup', (e) => {\n if (e.key === key || e.key === capsKey) {\n button.className = ''\n if (note) {\n onKeyUp(note)\n note = null\n }\n }\n })\n }\n\n for (let row = 0; row < numRows; row++) {\n for (let col = 0; col < numCols; col++) {\n createButton(row, col)\n }\n }\n\n const buttons = document.querySelectorAll('button')\n document.addEventListener('keydown', (e) => {\n if (e.shiftKey) {\n Array.from(buttons).forEach((button, index) => {\n button.textContent = capsQwerty[index]\n })\n }\n })\n document.addEventListener('keyup', (e) => {\n if (!e.shiftKey) {\n Array.from(buttons).forEach((button, index) => {\n button.textContent = qwerty[index]\n })\n }\n })\n}\n\nfunction randomizeFmParams() {\n document.getElementById('modulationIndex').value = Math.random() * 10\n document.getElementById('modulationDepth').value = Math.random() * 200\n document.getElementById('duration').value = Math.random() * 1000\n}\n\n// Draw the waveform\nfunction drawWaveform() {\n // Get the waveform data from the analyser\n analyser.getFloatTimeDomainData(dataArray)\n const duration = document.getElementById('duration').valueAsNumber\n wavesurfer && wavesurfer.load('', [dataArray], duration)\n}\n\nfunction animate() {\n requestAnimationFrame(animate)\n drawWaveform()\n}\n\ncreatePianoRoll()\nanimate()\nrandomizeFmParams()\n\n/*\n\n \n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n

\n Hold Shift to play the notes one octave higher\n

\n
\n
\n\n*/\n" }, { "path": "examples/gradient.js", "content": "// Fancy gradients\n\nimport WaveSurfer from 'wavesurfer.js'\n\n// Create a canvas gradient\nconst ctx = document.createElement('canvas').getContext('2d')\nconst gradient = ctx.createLinearGradient(0, 0, 0, 150)\ngradient.addColorStop(0, 'rgb(200, 0, 200)')\ngradient.addColorStop(0.7, 'rgb(100, 0, 100)')\ngradient.addColorStop(1, 'rgb(0, 0, 0)')\n\n// Default style with a gradient\nWaveSurfer.create({\n container: document.body,\n waveColor: gradient,\n progressColor: 'rgba(0, 0, 100, 0.5)',\n url: '/examples/audio/audio.wav',\n})\n\n// SoundCloud-style bars\nWaveSurfer.create({\n container: document.body,\n waveColor: gradient,\n barWidth: 2,\n progressColor: 'rgba(0, 0, 100, 0.5)',\n url: '/examples/audio/audio.wav',\n})\n" }, { "path": "examples/hover.js", "content": "// Hover plugin\n\nimport WaveSurfer from 'wavesurfer.js'\nimport Hover from 'wavesurfer.js/dist/plugins/hover.esm.js'\n\n// Create an instance of WaveSurfer\nconst ws = WaveSurfer.create({\n container: '#waveform',\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n url: '/examples/audio/audio.wav',\n plugins: [\n Hover.create({\n lineColor: '#ff0000',\n lineWidth: 2,\n labelBackground: '#555',\n labelColor: '#fff',\n labelSize: '11px',\n labelPreferLeft: false,\n }),\n ],\n})\n\nws.on('interaction', () => {\n ws.play()\n})\n\n/*\n\n \n\n
\n\n

\n 📖 Hover plugin docs\n

\n\n*/\n" }, { "path": "examples/minimap.js", "content": "// Minimap plugin\n\nimport WaveSurfer from 'wavesurfer.js'\nimport Minimap from 'wavesurfer.js/dist/plugins/minimap.esm.js'\n\n// Create an instance of WaveSurfer\nconst ws = WaveSurfer.create({\n container: '#waveform',\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n url: '/examples/audio/audio.wav',\n minPxPerSec: 100,\n hideScrollbar: true,\n autoCenter: false,\n plugins: [\n // Register the plugin\n Minimap.create({\n height: 20,\n waveColor: '#ddd',\n progressColor: '#999',\n // the Minimap takes all the same options as the WaveSurfer itself\n }),\n ],\n})\n\nws.on('interaction', () => {\n ws.play()\n})\n\n/*\n\n
\n

\n 📖 Minimap plugin docs\n

\n\n*/\n" }, { "path": "examples/multitrack.js", "content": "/**\n * Multi-track mixer\n *\n * @see https://github.com/katspaugh/wavesurfer-multitrack\n */\n\n/*\n\n \n\n \n\n
\n \n \n \n
\n\n
\n\n*/\n\n// Call Multitrack.create to initialize a multitrack mixer\n// Pass a tracks array and WaveSurfer options with a container element\nconst multitrack = Multitrack.create(\n [\n {\n id: 0,\n },\n {\n id: 1,\n draggable: false,\n startPosition: 14, // start time relative to the entire multitrack\n url: '/examples/audio/librivox.mp3',\n envelope: [\n { time: 2, volume: 0.5 },\n { time: 10, volume: 0.8 },\n { time: 255, volume: 0.8 },\n { time: 264, volume: 0 },\n ],\n volume: 0.95,\n options: {\n waveColor: 'hsl(46, 87%, 49%)',\n progressColor: 'hsl(46, 87%, 20%)',\n },\n intro: {\n endTime: 16,\n label: 'Intro',\n color: '#FFE56E',\n },\n markers: [\n {\n time: 21,\n label: 'M1',\n color: 'hsla(600, 100%, 30%, 0.5)',\n },\n {\n time: 22.7,\n label: 'M2',\n color: 'hsla(400, 100%, 30%, 0.5)',\n },\n {\n time: 24,\n label: 'M3',\n color: 'hsla(200, 50%, 70%, 0.5)',\n },\n {\n time: 27,\n label: 'M4',\n color: 'hsla(200, 50%, 70%, 0.5)',\n },\n ],\n // peaks: [ [ 0, 0, 2.567, -2.454, 10.5645 ] ], // optional pre-generated peaks\n },\n {\n id: 2,\n draggable: true,\n startPosition: 1,\n startCue: 2.1,\n endCue: 20,\n fadeInEnd: 8,\n fadeOutStart: 14,\n envelope: true,\n volume: 0.8,\n options: {\n waveColor: 'hsl(161, 87%, 49%)',\n progressColor: 'hsl(161, 87%, 20%)',\n },\n url: '/examples/audio/audio.wav',\n },\n {\n id: 3,\n draggable: true,\n startPosition: 290,\n volume: 0.8,\n options: {\n waveColor: 'hsl(161, 87%, 49%)',\n progressColor: 'hsl(161, 87%, 20%)',\n },\n url: '/examples/audio/demo.wav',\n },\n ],\n {\n container: document.querySelector('#container'), // required!\n minPxPerSec: 10, // zoom level\n rightButtonDrag: false, // set to true to drag with right mouse button\n cursorWidth: 2,\n cursorColor: '#D72F21',\n trackBackground: '#2D2D2D',\n trackBorderColor: '#7C7C7C',\n dragBounds: true,\n envelopeOptions: {\n lineColor: 'rgba(255, 0, 0, 0.7)',\n lineWidth: 4,\n dragPointSize: window.innerWidth < 600 ? 20 : 10,\n dragPointFill: 'rgba(255, 255, 255, 0.8)',\n dragPointStroke: 'rgba(255, 255, 255, 0.3)',\n },\n },\n)\n\n// Events\nmultitrack.on('start-position-change', ({ id, startPosition }) => {\n console.log(`Track ${id} start position updated to ${startPosition}`)\n})\n\nmultitrack.on('start-cue-change', ({ id, startCue }) => {\n console.log(`Track ${id} start cue updated to ${startCue}`)\n})\n\nmultitrack.on('end-cue-change', ({ id, endCue }) => {\n console.log(`Track ${id} end cue updated to ${endCue}`)\n})\n\nmultitrack.on('volume-change', ({ id, volume }) => {\n console.log(`Track ${id} volume updated to ${volume}`)\n})\n\nmultitrack.on('fade-in-change', ({ id, fadeInEnd }) => {\n console.log(`Track ${id} fade-in updated to ${fadeInEnd}`)\n})\n\nmultitrack.on('fade-out-change', ({ id, fadeOutStart }) => {\n console.log(`Track ${id} fade-out updated to ${fadeOutStart}`)\n})\n\nmultitrack.on('intro-end-change', ({ id, endTime }) => {\n console.log(`Track ${id} intro end updated to ${endTime}`)\n})\n\nmultitrack.on('envelope-points-change', ({ id, points }) => {\n console.log(`Track ${id} envelope points updated to`, points)\n})\n\nmultitrack.on('drop', ({ id }) => {\n multitrack.addTrack({\n id,\n url: '/examples/audio/demo.wav',\n startPosition: 0,\n draggable: true,\n options: {\n waveColor: 'hsl(25, 87%, 49%)',\n progressColor: 'hsl(25, 87%, 20%)',\n },\n })\n})\n\n// Play/pause button\nconst button = document.querySelector('#play')\nbutton.disabled = true\nmultitrack.once('canplay', () => {\n button.disabled = false\n button.onclick = () => {\n multitrack.isPlaying() ? multitrack.pause() : multitrack.play()\n button.textContent = multitrack.isPlaying() ? 'Pause' : 'Play'\n }\n})\n\n// Forward/back buttons\nconst forward = document.querySelector('#forward')\nforward.onclick = () => {\n multitrack.setTime(multitrack.getCurrentTime() + 30)\n}\nconst backward = document.querySelector('#backward')\nbackward.onclick = () => {\n multitrack.setTime(multitrack.getCurrentTime() - 30)\n}\n\n// Zoom\nconst slider = document.querySelector('input[type=\"range\"]')\nslider.oninput = () => {\n multitrack.zoom(slider.valueAsNumber)\n}\n\n// Destroy all wavesurfer instances on unmount\n// This should be called before calling initMultiTrack again to properly clean up\nwindow.onbeforeunload = () => {\n multitrack.destroy()\n}\n\n// Set sinkId\nmultitrack.once('canplay', async () => {\n await multitrack.setSinkId('default')\n console.log('Set sinkId to default')\n})\n" }, { "path": "examples/phase-vocoder/index.js", "content": "// WebAudio speed control with pitch preservation\n\nimport WaveSurfer from 'wavesurfer.js'\n\n// Init wavesurfer\nconst wavesurfer = WaveSurfer.create({\n backend: 'WebAudio',\n container: document.body,\n waveColor: 'violet',\n progressColor: 'purple',\n url: '/examples/audio/librivox.mp3',\n})\n\n// Wait for the audio to be ready\nwavesurfer.on('ready', async () => {\n const webAudioPlayer = wavesurfer.getMediaElement()\n const gainNode = webAudioPlayer.getGainNode()\n const audioContext = gainNode.context\n\n // Load the phase vocoder audio worklet\n await audioContext.audioWorklet.addModule('/examples/phase-vocoder/phase-vocoder.min.js')\n const phaseVocoderNode = new AudioWorkletNode(audioContext, 'phase-vocoder-processor')\n\n // Connect the worklet to the wavesurfer audio\n gainNode.disconnect()\n gainNode.connect(phaseVocoderNode)\n phaseVocoderNode.connect(audioContext.destination)\n\n // Speed slider\n document.querySelector('input[type=\"range\"]').addEventListener('input', (e) => {\n const speed = e.target.valueAsNumber\n document.querySelector('#rate').textContent = speed.toFixed(2)\n wavesurfer.setPlaybackRate(speed)\n const pitchFactorParam = phaseVocoderNode.parameters.get('pitchFactor')\n pitchFactorParam.value = 1 / speed\n })\n\n // Play/pause button\n document.querySelector('button').addEventListener('click', () => {\n wavesurfer.playPause()\n })\n})\n\n/*\n\n
\n \n\n \n\n \n
\n\n

\n 📖 Based on github.com/olvb/phaze\n

\n\n*/\n" }, { "path": "examples/pitch-worker.js", "content": "import Pitchfinder from 'https://esm.sh/pitchfinder'\n\nonmessage = (e) => {\n const { peaks, sampleRate = 8000, algo = 'AMDF' } = e.data\n const detectPitch = Pitchfinder[algo]({ sampleRate })\n const duration = peaks.length / sampleRate\n const bpm = peaks.length / duration / 60\n\n const frequencies = Pitchfinder.frequencies(detectPitch, peaks, {\n tempo: bpm,\n quantization: bpm,\n })\n\n // Find the baseline frequency (the value that appears most often)\n const frequencyMap = {}\n let maxAmount = 0\n let baseFrequency = 0\n frequencies.forEach((frequency) => {\n if (!frequency) return\n const tolerance = 10\n frequency = Math.round(frequency * tolerance) / tolerance\n if (!frequencyMap[frequency]) frequencyMap[frequency] = 0\n frequencyMap[frequency] += 1\n if (frequencyMap[frequency] > maxAmount) {\n maxAmount = frequencyMap[frequency]\n baseFrequency = frequency\n }\n })\n\n postMessage({\n frequencies,\n baseFrequency,\n })\n}\n" }, { "path": "examples/pitch.js", "content": "import WaveSurfer from 'wavesurfer.js'\n\nconst pitchWorker = new Worker('/examples/pitch-worker.js', { type: 'module' })\n\nconst wavesurfer = WaveSurfer.create({\n container: '#waveform',\n waveColor: 'rgba(200, 200, 200, 0.5)',\n progressColor: 'rgba(100, 100, 100, 0.5)',\n url: '/examples/audio/librivox.mp3',\n minPxPerSec: 200,\n sampleRate: 11025,\n})\n\n// Pitch detection\nwavesurfer.on('decode', () => {\n const peaks = wavesurfer.getDecodedData().getChannelData(0)\n pitchWorker.postMessage({ peaks, sampleRate: wavesurfer.options.sampleRate })\n})\n\n// When the worker sends back pitch data, update the UI\npitchWorker.onmessage = (e) => {\n const { frequencies, baseFrequency } = e.data\n\n // Render the frequencies on a canvas\n const pitchUpColor = '#385587'\n const pitchDownColor = '#C26351'\n const height = 100\n\n const canvas = document.createElement('canvas')\n const ctx = canvas.getContext('2d')\n canvas.width = frequencies.length\n canvas.height = height\n canvas.style.width = '100%'\n canvas.style.height = '100%'\n\n // Each frequency is a point whose Y position is the frequency and X position is the time\n const pointSize = devicePixelRatio\n let prevY = 0\n frequencies.forEach((frequency, index) => {\n if (!frequency) return\n const y = Math.round(height - (frequency / (baseFrequency * 2)) * height)\n ctx.fillStyle = y > prevY ? pitchDownColor : pitchUpColor\n ctx.fillRect(index, y, pointSize, pointSize)\n prevY = y\n })\n\n // Add the canvas to the waveform container\n wavesurfer.renderer.getWrapper().appendChild(canvas)\n // Remove the canvas when a new audio is loaded\n wavesurfer.once('load', () => canvas.remove())\n}\n\n// Play on click\nwavesurfer.on('interaction', () => {\n if (!wavesurfer.isPlaying()) wavesurfer.play()\n})\n\n// Drag'n'drop\n{\n const dropArea = document.querySelector('#drop')\n dropArea.ondragenter = (e) => {\n e.preventDefault()\n e.target.classList.add('over')\n }\n dropArea.ondragleave = (e) => {\n e.preventDefault()\n e.target.classList.remove('over')\n }\n dropArea.ondragover = (e) => {\n e.preventDefault()\n }\n dropArea.ondrop = (e) => {\n e.preventDefault()\n e.target.classList.remove('over')\n\n // Read the audio file\n const reader = new FileReader()\n reader.onload = (event) => {\n wavesurfer.load(event.target.result)\n }\n reader.readAsDataURL(e.dataTransfer.files[0])\n\n // Write the name of the file into the drop area\n dropArea.textContent = e.dataTransfer.files[0].name\n wavesurfer.empty()\n }\n document.body.ondrop = (e) => {\n e.preventDefault()\n }\n}\n\n/*\n\n\n\n

Audio from LibriVox

\n
\n
Drag-n-drop your own audio file
\n\n*/\n" }, { "path": "examples/predecoded.js", "content": "// With pre-decoded audio data\n\nimport WaveSurfer from 'wavesurfer.js'\n\nconst wavesurfer = WaveSurfer.create({\n container: document.body,\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n barWidth: 10,\n barRadius: 10,\n barGap: 2,\n url: '/examples/audio/demo.wav',\n peaks: [\n [\n 0, 0.0023595101665705442, 0.012107174843549728, 0.005919494666159153, -0.31324470043182373, 0.1511787623167038,\n 0.2473851442337036, 0.11443428695201874, -0.036057762801647186, -0.0968964695930481, -0.03033737652003765,\n 0.10682467371225357, 0.23974689841270447, 0.013210971839725971, -0.12377244979143143, 0.046145666390657425,\n -0.015757400542497635, 0.10884027928113937, 0.06681904196739197, 0.09432944655418396, -0.17105795443058014,\n -0.023439358919858932, -0.10380347073078156, 0.0034454423002898693, 0.08061369508504868, 0.026129156351089478,\n 0.18730352818965912, 0.020447958260774612, -0.15030759572982788, 0.05689578503370285, -0.0009095853311009705,\n 0.2749626338481903, 0.2565386891365051, 0.07571295648813248, 0.10791446268558502, -0.06575305759906769,\n 0.15336275100708008, 0.07056761533021927, 0.03287476301193237, -0.09044631570577621, 0.01777501218020916,\n -0.04906218498945236, -0.04756792634725571, -0.006875281687825918, 0.04520256072282791, -0.02362387254834175,\n -0.0668797641992569, 0.12266506254673004, -0.10895221680402756, 0.03791835159063339, -0.0195105392485857,\n -0.031097881495952606, 0.04252675920724869, -0.09187793731689453, 0.0829525887966156, -0.003812957089394331,\n 0.0431736595928669, 0.07634212076663971, -0.05335947126150131, 0.0345163568854332, -0.049201950430870056,\n 0.02300390601158142, 0.007677287794649601, 0.015354577451944351, 0.007677287794649601, 0.007677288725972176,\n ],\n ],\n duration: 22,\n})\n\nwavesurfer.on('interaction', () => {\n wavesurfer.play()\n})\n\nwavesurfer.on('finish', () => {\n wavesurfer.setTime(0)\n})\n" }, { "path": "examples/react-global-player.js", "content": "// React example\n\n/*\n \n \n \n \n \n*/\n\n// Import React hooks\nconst { useRef, useState, useEffect, useCallback, memo } = React\n\n// Import WaveSurfer\nimport WaveSurfer from 'wavesurfer.js'\n\n// WaveSurfer hook\nconst useWavesurfer = (containerRef, options) => {\n const [wavesurfer, setWavesurfer] = useState(null)\n\n // Initialize wavesurfer when the container mounts\n // or any of the props change\n useEffect(() => {\n if (!containerRef.current) return\n\n const ws = WaveSurfer.create({\n ...options,\n container: containerRef.current,\n })\n\n setWavesurfer(ws)\n\n return () => {\n ws.destroy()\n }\n }, [options, containerRef])\n\n return wavesurfer\n}\n\n// Create a React component that will render wavesurfer.\n// Props are wavesurfer options.\nconst WaveSurferPlayer = memo((props) => {\n const containerRef = useRef()\n const [isPlaying, setIsPlaying] = useState(false)\n const wavesurfer = useWavesurfer(containerRef, props)\n const { onPlay, onReady } = props\n\n // On play button click\n const onPlayClick = useCallback(() => {\n wavesurfer.playPause()\n }, [wavesurfer])\n\n // Initialize wavesurfer when the container mounts\n // or any of the props change\n useEffect(() => {\n if (!wavesurfer) return\n\n const getPlayerParams = () => ({\n media: wavesurfer.getMediaElement(),\n peaks: wavesurfer.exportPeaks(),\n })\n\n const subscriptions = [\n wavesurfer.on('ready', () => {\n onReady && onReady(getPlayerParams())\n\n setIsPlaying(wavesurfer.isPlaying())\n }),\n wavesurfer.on('play', () => {\n onPlay &&\n onPlay((prev) => {\n const newParams = getPlayerParams()\n if (!prev || prev.media !== newParams.media) {\n if (prev) {\n prev.media.pause()\n prev.media.currentTime = 0\n }\n return newParams\n }\n return prev\n })\n\n setIsPlaying(true)\n }),\n wavesurfer.on('pause', () => setIsPlaying(false)),\n ]\n\n return () => {\n subscriptions.forEach((unsub) => unsub())\n }\n }, [wavesurfer, onPlay, onReady])\n\n return (\n
\n \n\n
\n
\n )\n})\n\nconst Playlist = memo(({ urls, setCurrentPlayer }) => {\n return urls.map((url, index) => (\n \n ))\n})\n\nconst audioUrls = ['/examples/audio/audio.wav', '/examples/audio/demo.wav', '/examples/audio/stereo.mp3']\n\nconst App = () => {\n const [currentPlayer, setCurrentPlayer] = useState()\n\n return (\n <>\n

Playlist

\n \n\n

Global player

\n {currentPlayer && (\n \n )}\n \n )\n}\n\n// Create a React root and render the app\nconst root = ReactDOM.createRoot(document.body)\nroot.render()\n" }, { "path": "examples/react.js", "content": "// React example\n// See https://github.com/katspaugh/wavesurfer-react\n\nimport * as React from 'react'\nconst { useMemo, useState, useCallback, useRef } = React\nimport { createRoot } from 'react-dom/client'\nimport { useWavesurfer } from '@wavesurfer/react'\nimport Timeline from 'wavesurfer.js/dist/plugins/timeline.esm.js'\n\nconst audioUrls = [\n '/examples/audio/audio.wav',\n '/examples/audio/stereo.mp3',\n '/examples/audio/mono.mp3',\n '/examples/audio/librivox.mp3',\n]\n\nconst formatTime = (seconds) => [seconds / 60, seconds % 60].map((v) => `0${Math.floor(v)}`.slice(-2)).join(':')\n\n// A React component that will render wavesurfer\nconst App = () => {\n const containerRef = useRef(null)\n const [urlIndex, setUrlIndex] = useState(0)\n\n const { wavesurfer, isPlaying, currentTime } = useWavesurfer({\n container: containerRef,\n height: 100,\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n url: audioUrls[urlIndex],\n plugins: useMemo(() => [Timeline.create()], []),\n })\n\n const onUrlChange = useCallback(() => {\n setUrlIndex((index) => (index + 1) % audioUrls.length)\n }, [])\n\n const onPlayPause = useCallback(() => {\n wavesurfer && wavesurfer.playPause()\n }, [wavesurfer])\n\n return (\n <>\n
\n\n

Current audio: {audioUrls[urlIndex]}

\n\n

Current time: {formatTime(currentTime)}

\n\n
\n \n\n \n
\n \n )\n}\n\n// Create a React root and render the app\nconst root = createRoot(document.body)\nroot.render()\n\n/*\n \n \n\n \n \n*/\n" }, { "path": "examples/record-sync.js", "content": "// Record plugin\n\nimport WaveSurfer from 'wavesurfer.js'\nimport RecordPlugin from 'wavesurfer.js/dist/plugins/record.esm.js'\n\nlet wavesurfer, record\nlet scrollingWaveform = false\nlet continuousWaveform = true\n\nconst wavesurfer2 = WaveSurfer.create({\n container: document.body,\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n url: '/examples/audio/audio.wav',\n\n // Set a bar width\n barWidth: 2,\n // Optionally, specify the spacing between bars\n barGap: 1,\n // And the bar radius\n barRadius: 2,\n})\n\nwavesurfer2.on('ready', function () {\n const createWaveSurfer = () => {\n // Destroy the previous wavesurfer instance\n if (wavesurfer) {\n wavesurfer.destroy()\n }\n\n // Create a new Wavesurfer instance\n wavesurfer = WaveSurfer.create({\n container: '#mic',\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n })\n\n // Initialize the Record plugin\n record = wavesurfer.registerPlugin(\n RecordPlugin.create({\n renderRecordedAudio: false,\n scrollingWaveform,\n continuousWaveform,\n continuousWaveformDuration: wavesurfer2.getDuration(),\n }),\n )\n\n // Render recorded audio\n record.on('record-end', (blob) => {\n const container = document.querySelector('#recordings')\n const recordedUrl = URL.createObjectURL(blob)\n\n // Create wavesurfer from the recorded audio\n const wavesurfer = WaveSurfer.create({\n container,\n waveColor: 'rgb(200, 100, 0)',\n progressColor: 'rgb(100, 50, 0)',\n url: recordedUrl,\n })\n\n // Play button\n const button = container.appendChild(document.createElement('button'))\n button.textContent = 'Play'\n button.onclick = () => wavesurfer.playPause()\n wavesurfer.on('pause', () => (button.textContent = 'Play'))\n wavesurfer.on('play', () => (button.textContent = 'Pause'))\n\n // Download link\n const link = container.appendChild(document.createElement('a'))\n Object.assign(link, {\n href: recordedUrl,\n download: 'recording.' + blob.type.split(';')[0].split('/')[1] || 'webm',\n textContent: 'Download recording',\n })\n })\n pauseButton.style.display = 'none'\n recButton.textContent = 'Record'\n\n record.on('record-progress', (time) => {\n updateProgress(time)\n })\n }\n\n const progress = document.querySelector('#progress')\n const updateProgress = (time) => {\n // time will be in milliseconds, convert it to mm:ss format\n const formattedTime = [\n Math.floor((time % 3600000) / 60000), // minutes\n Math.floor((time % 60000) / 1000), // seconds\n ]\n .map((v) => (v < 10 ? '0' + v : v))\n .join(':')\n progress.textContent = formattedTime\n }\n\n const pauseButton = document.querySelector('#pause')\n pauseButton.onclick = () => {\n if (record.isPaused()) {\n wavesurfer2.play()\n record.resumeRecording()\n pauseButton.textContent = 'Pause'\n return\n }\n\n wavesurfer2.pause()\n record.pauseRecording()\n pauseButton.textContent = 'Resume'\n }\n\n const micSelect = document.querySelector('#mic-select')\n {\n // Mic selection\n RecordPlugin.getAvailableAudioDevices().then((devices) => {\n devices.forEach((device) => {\n const option = document.createElement('option')\n option.value = device.deviceId\n option.text = device.label || device.deviceId\n micSelect.appendChild(option)\n })\n })\n }\n // Record button\n const recButton = document.querySelector('#record')\n\n recButton.onclick = () => {\n wavesurfer2.play()\n if (record.isRecording() || record.isPaused()) {\n wavesurfer2.pause()\n record.stopRecording()\n recButton.textContent = 'Record'\n pauseButton.style.display = 'none'\n return\n }\n\n recButton.disabled = true\n\n // reset the wavesurfer instance\n\n // get selected device\n const deviceId = micSelect.value\n record.startRecording({ deviceId }).then(() => {\n recButton.textContent = 'Stop'\n recButton.disabled = false\n pauseButton.style.display = 'inline'\n })\n }\n\n document.querySelector('#scrollingWaveform').onclick = (e) => {\n scrollingWaveform = e.target.checked\n if (continuousWaveform && scrollingWaveform) {\n continuousWaveform = false\n document.querySelector('#continuousWaveform').checked = false\n }\n createWaveSurfer()\n }\n\n document.querySelector('#continuousWaveform').onclick = (e) => {\n continuousWaveform = e.target.checked\n if (continuousWaveform && scrollingWaveform) {\n scrollingWaveform = false\n document.querySelector('#scrollingWaveform').checked = false\n }\n createWaveSurfer()\n }\n\n createWaveSurfer()\n})\n\n/*\n\n

Press Record to start recording 🎙️

\n\n

\n 📖 Record plugin docs\n

\n\n \n \n\n \n\n \n\n \n\n

00:00

\n\n
\n\n
\n\n \n\n*/\n" }, { "path": "examples/record.js", "content": "// Record plugin\n\nimport WaveSurfer from 'wavesurfer.js'\nimport RecordPlugin from 'wavesurfer.js/dist/plugins/record.esm.js'\n\nlet wavesurfer, record\nlet scrollingWaveform = false\nlet continuousWaveform = true\n\nconst createWaveSurfer = () => {\n // Destroy the previous wavesurfer instance\n if (wavesurfer) {\n wavesurfer.destroy()\n }\n\n // Create a new Wavesurfer instance\n wavesurfer = WaveSurfer.create({\n container: '#mic',\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n })\n\n // Initialize the Record plugin\n record = wavesurfer.registerPlugin(\n RecordPlugin.create({\n renderRecordedAudio: false,\n scrollingWaveform,\n continuousWaveform,\n continuousWaveformDuration: 30, // optional\n }),\n )\n\n // Render recorded audio\n record.on('record-end', (blob) => {\n const container = document.querySelector('#recordings')\n const recordedUrl = URL.createObjectURL(blob)\n\n // Create wavesurfer from the recorded audio\n const wavesurfer = WaveSurfer.create({\n container,\n waveColor: 'rgb(200, 100, 0)',\n progressColor: 'rgb(100, 50, 0)',\n url: recordedUrl,\n })\n\n // Play button\n const button = container.appendChild(document.createElement('button'))\n button.textContent = 'Play'\n button.onclick = () => wavesurfer.playPause()\n wavesurfer.on('pause', () => (button.textContent = 'Play'))\n wavesurfer.on('play', () => (button.textContent = 'Pause'))\n\n // Download link\n const link = container.appendChild(document.createElement('a'))\n Object.assign(link, {\n href: recordedUrl,\n download: 'recording.' + blob.type.split(';')[0].split('/')[1] || 'webm',\n textContent: 'Download recording',\n })\n })\n pauseButton.style.display = 'none'\n recButton.textContent = 'Record'\n\n record.on('record-progress', (time) => {\n updateProgress(time)\n })\n}\n\nconst progress = document.querySelector('#progress')\nconst updateProgress = (time) => {\n // time will be in milliseconds, convert it to mm:ss format\n const formattedTime = [\n Math.floor((time % 3600000) / 60000), // minutes\n Math.floor((time % 60000) / 1000), // seconds\n ]\n .map((v) => (v < 10 ? '0' + v : v))\n .join(':')\n progress.textContent = formattedTime\n}\n\nconst pauseButton = document.querySelector('#pause')\npauseButton.onclick = () => {\n if (record.isPaused()) {\n record.resumeRecording()\n pauseButton.textContent = 'Pause'\n return\n }\n\n record.pauseRecording()\n pauseButton.textContent = 'Resume'\n}\n\nconst micSelect = document.querySelector('#mic-select')\n{\n // Mic selection\n RecordPlugin.getAvailableAudioDevices().then((devices) => {\n devices.forEach((device) => {\n const option = document.createElement('option')\n option.value = device.deviceId\n option.text = device.label || device.deviceId\n micSelect.appendChild(option)\n })\n })\n}\n// Record button\nconst recButton = document.querySelector('#record')\n\nrecButton.onclick = () => {\n if (record.isRecording() || record.isPaused()) {\n record.stopRecording()\n recButton.textContent = 'Record'\n pauseButton.style.display = 'none'\n return\n }\n\n recButton.disabled = true\n\n // reset the wavesurfer instance\n\n // get selected device\n const deviceId = micSelect.value\n record.startRecording({ deviceId }).then(() => {\n recButton.textContent = 'Stop'\n recButton.disabled = false\n pauseButton.style.display = 'inline'\n })\n}\n\ndocument.querySelector('#scrollingWaveform').onclick = (e) => {\n scrollingWaveform = e.target.checked\n if (continuousWaveform && scrollingWaveform) {\n continuousWaveform = false\n document.querySelector('#continuousWaveform').checked = false\n }\n createWaveSurfer()\n}\n\ndocument.querySelector('#continuousWaveform').onclick = (e) => {\n continuousWaveform = e.target.checked\n if (continuousWaveform && scrollingWaveform) {\n scrollingWaveform = false\n document.querySelector('#scrollingWaveform').checked = false\n }\n createWaveSurfer()\n}\n\ncreateWaveSurfer()\n\n/*\n\n

Press Record to start recording 🎙️

\n\n

\n 📖 Record plugin docs\n

\n\n \n \n\n \n\n \n\n \n\n

00:00

\n\n
\n\n
\n\n \n\n*/\n" }, { "path": "examples/regions.js", "content": "// Regions plugin\n\nimport WaveSurfer from 'wavesurfer.js'\nimport RegionsPlugin from 'wavesurfer.js/dist/plugins/regions.esm.js'\n\n// Initialize the Regions plugin\nconst regions = RegionsPlugin.create()\n\n// Create a WaveSurfer instance\nconst ws = WaveSurfer.create({\n container: '#waveform',\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n dragToSeek: false,\n url: '/examples/audio/audio.wav',\n plugins: [regions],\n})\n\n// Give regions a random color when they are created\nconst random = (min, max) => Math.random() * (max - min) + min\nconst randomColor = () => `rgba(${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)}, 0.5)`\n\n// Create some regions at specific time ranges\nws.on('decode', () => {\n // Regions\n regions.addRegion({\n start: 0,\n end: 8,\n content: 'Resize me',\n color: randomColor(),\n drag: false,\n resize: true,\n })\n regions.addRegion({\n start: 9,\n end: 10,\n content: 'Cramped region',\n color: randomColor(),\n minLength: 1,\n maxLength: 10,\n })\n regions.addRegion({\n start: 12,\n end: 17,\n content: 'Drag me',\n color: randomColor(),\n resize: false,\n })\n\n // Markers (zero-length regions)\n regions.addRegion({\n start: 19,\n content: 'Marker',\n color: randomColor(),\n })\n regions.addRegion({\n start: 20,\n content: 'Second marker',\n color: randomColor(),\n })\n})\n\nregions.on('region-updated', (region) => {\n console.log('Updated region', region)\n})\n\n// Loop a region on click\nlet loop = true\n// Toggle looping with a checkbox\ndocument.querySelector('#loop').onclick = (e) => {\n loop = e.target.checked\n}\n\n// Drag Selection: Create new regions by moving the cursor while holding left-click on the waveform\nlet dragSelection = undefined\n\nconst toggleDragSelection = () => {\n if (!dragSelection) {\n dragSelection = regions.enableDragSelection({\n color: 'rgba(255, 0, 0, 0.1)',\n })\n } else {\n dragSelection()\n dragSelection = undefined\n }\n}\n\n// Toggle drag selection with a checkbox\ndocument.querySelector('#dragSelectToggle').addEventListener('change', () => {\n toggleDragSelection()\n})\n\n// Drag To Seek\nlet dragToSeek = false\nconst toggleDragToSeek = () => {\n console.log(dragToSeek)\n dragToSeek = !dragToSeek\n ws.setOptions({ dragToSeek: dragToSeek })\n}\n\n// Toggle drag selection with a checkbox\ndocument.querySelector('#dragToSeekToggle').addEventListener('change', () => {\n toggleDragToSeek()\n})\n\n{\n let activeRegion = null\n regions.on('region-in', (region) => {\n console.log('region-in', region)\n activeRegion = region\n })\n regions.on('region-out', (region) => {\n console.log('region-out', region)\n if (activeRegion === region) {\n if (loop) {\n region.play()\n } else {\n activeRegion = null\n }\n }\n })\n regions.on('region-clicked', (region, e) => {\n e.stopPropagation() // prevent triggering a click on the waveform\n activeRegion = region\n region.play(true)\n region.setOptions({ color: randomColor() })\n })\n // Reset the active region when the user clicks anywhere in the waveform\n ws.on('interaction', () => {\n activeRegion = null\n })\n}\n\n// Update the zoom level on slider change\nws.once('decode', () => {\n document.querySelector('input[type=\"range\"]').oninput = (e) => {\n const minPxPerSec = Number(e.target.value)\n ws.zoom(minPxPerSec)\n }\n})\n\n/*\n \n
\n\n

\n \n\n \n\n \n\n \n

\n\n

\n Regions plugin docs\n

\n \n*/\n" }, { "path": "examples/silence.js", "content": "// Silence detection example\n\nimport WaveSurfer from 'wavesurfer.js'\nimport RegionsPlugin from 'wavesurfer.js/dist/plugins/regions.esm.js'\n\n// Create an instance of WaveSurfer\nconst ws = WaveSurfer.create({\n container: document.body,\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n url: '/examples/audio/nasa.mp4',\n minPxPerSec: 50,\n interact: false,\n})\n\n// Initialize the Regions plugin\nconst wsRegions = ws.registerPlugin(RegionsPlugin.create())\n\n// Find regions separated by silence\nconst extractRegions = (audioData, duration) => {\n const minValue = 0.01\n const minSilenceDuration = 0.1\n const mergeDuration = 0.2\n const scale = duration / audioData.length\n const silentRegions = []\n\n // Find all silent regions longer than minSilenceDuration\n let start = 0\n let end = 0\n let isSilent = false\n for (let i = 0; i < audioData.length; i++) {\n if (audioData[i] < minValue) {\n if (!isSilent) {\n start = i\n isSilent = true\n }\n } else if (isSilent) {\n end = i\n isSilent = false\n if (scale * (end - start) > minSilenceDuration) {\n silentRegions.push({\n start: scale * start,\n end: scale * end,\n })\n }\n }\n }\n\n // Merge silent regions that are close together\n const mergedRegions = []\n let lastRegion = null\n for (let i = 0; i < silentRegions.length; i++) {\n if (lastRegion && silentRegions[i].start - lastRegion.end < mergeDuration) {\n lastRegion.end = silentRegions[i].end\n } else {\n lastRegion = silentRegions[i]\n mergedRegions.push(lastRegion)\n }\n }\n\n // Find regions that are not silent\n const regions = []\n let lastEnd = 0\n for (let i = 0; i < mergedRegions.length; i++) {\n regions.push({\n start: lastEnd,\n end: mergedRegions[i].start,\n })\n lastEnd = mergedRegions[i].end\n }\n\n return regions\n}\n\n// Create regions for each non-silent part of the audio\nws.on('decode', (duration) => {\n const decodedData = ws.getDecodedData()\n if (decodedData) {\n const regions = extractRegions(decodedData.getChannelData(0), duration)\n\n // Add regions to the waveform\n regions.forEach((region, index) => {\n wsRegions.addRegion({\n start: region.start,\n end: region.end,\n content: index.toString(),\n drag: false,\n resize: false,\n })\n })\n }\n})\n\n// Play a region on click\nlet activeRegion = null\nwsRegions.on('region-clicked', (region, e) => {\n e.stopPropagation()\n region.play()\n activeRegion = region\n})\nws.on('timeupdate', (currentTime) => {\n // When the end of the region is reached\n if (activeRegion && currentTime >= activeRegion.end) {\n // Stop playing\n ws.pause()\n activeRegion = null\n }\n})\n" }, { "path": "examples/soundcloud.js", "content": "// Soundcloud-style player\n\nimport WaveSurfer from 'wavesurfer.js'\n\nconst canvas = document.createElement('canvas')\nconst ctx = canvas.getContext('2d')\n\n// Define the waveform gradient\nconst gradient = ctx.createLinearGradient(0, 0, 0, canvas.height * 1.35)\ngradient.addColorStop(0, '#656666') // Top color\ngradient.addColorStop((canvas.height * 0.7) / canvas.height, '#656666') // Top color\ngradient.addColorStop((canvas.height * 0.7 + 1) / canvas.height, '#ffffff') // White line\ngradient.addColorStop((canvas.height * 0.7 + 2) / canvas.height, '#ffffff') // White line\ngradient.addColorStop((canvas.height * 0.7 + 3) / canvas.height, '#B1B1B1') // Bottom color\ngradient.addColorStop(1, '#B1B1B1') // Bottom color\n\n// Define the progress gradient\nconst progressGradient = ctx.createLinearGradient(0, 0, 0, canvas.height * 1.35)\nprogressGradient.addColorStop(0, '#EE772F') // Top color\nprogressGradient.addColorStop((canvas.height * 0.7) / canvas.height, '#EB4926') // Top color\nprogressGradient.addColorStop((canvas.height * 0.7 + 1) / canvas.height, '#ffffff') // White line\nprogressGradient.addColorStop((canvas.height * 0.7 + 2) / canvas.height, '#ffffff') // White line\nprogressGradient.addColorStop((canvas.height * 0.7 + 3) / canvas.height, '#F6B094') // Bottom color\nprogressGradient.addColorStop(1, '#F6B094') // Bottom color\n\n// Create the waveform\nconst wavesurfer = WaveSurfer.create({\n container: '#waveform',\n waveColor: gradient,\n progressColor: progressGradient,\n barWidth: 2,\n url: '/examples/audio/audio.wav',\n})\n\n// Play/pause on click\nwavesurfer.on('interaction', () => {\n wavesurfer.playPause()\n})\n\n// Hover effect\n{\n const hover = document.querySelector('#hover')\n const waveform = document.querySelector('#waveform')\n waveform.addEventListener('pointermove', (e) => (hover.style.width = `${e.offsetX}px`))\n}\n\n// Current time & duration\n{\n const formatTime = (seconds) => {\n const minutes = Math.floor(seconds / 60)\n const secondsRemainder = Math.round(seconds) % 60\n const paddedSeconds = `0${secondsRemainder}`.slice(-2)\n return `${minutes}:${paddedSeconds}`\n }\n\n const timeEl = document.querySelector('#time')\n const durationEl = document.querySelector('#duration')\n wavesurfer.on('decode', (duration) => (durationEl.textContent = formatTime(duration)))\n wavesurfer.on('timeupdate', (currentTime) => (timeEl.textContent = formatTime(currentTime)))\n}\n\n/*\n\n \n
\n
0:00
\n
0:00
\n
\n
\n\n*/\n" }, { "path": "examples/spectrogram-windowed.js", "content": "// Windowed Spectrogram plugin - Optimized for very long audio files\n\nimport WaveSurfer from 'wavesurfer.js'\nimport WindowedSpectrogram from 'wavesurfer.js/dist/plugins/spectrogram-windowed.esm.js'\nimport ZoomPlugin from 'wavesurfer.js/dist/plugins/zoom.esm.js'\nimport TimelinePlugin from 'wavesurfer.js/dist/plugins/timeline.esm.js'\n\n// Create an instance of WaveSurfer\nconst ws = WaveSurfer.create({\n container: '#waveform',\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n url: '/examples/audio/librivox.mp3',\n sampleRate: 44100,\n minPxPerSec: 100,\n})\n\n// Initialize the Windowed Spectrogram plugin\nws.registerPlugin(\n WindowedSpectrogram.create({\n labels: true,\n splitChannels: true,\n scale: 'mel', // or 'linear', 'logarithmic', 'bark', 'erb'\n frequencyMax: 18000,\n frequencyMin: 0,\n fftSamples: 1024, // Use a reasonable FFT size (powers of 2: 256, 512, 1024, 2048)\n labelsBackground: 'rgba(0, 0, 0, 0.1)',\n colorMap: 'roseus', // Color scheme optimized for long audio viewing\n useWebWorker: true,\n progressiveLoading: true,\n }),\n)\n\n// Initialize the TimeLabels plugin\nws.registerPlugin(\n TimelinePlugin.create({\n labels: true,\n labelsBackground: 'rgba(0, 0, 0, 0.1)',\n }),\n)\n\n// Initialize the Zoom plugin for interactive zooming\nws.registerPlugin(\n ZoomPlugin.create({\n scale: 0.5, // 50% zoom per wheel step\n maxZoom: 1000, // Allow zooming up to 1000 px/sec\n }),\n)\n\n// Show the current zoom level\nws.on('zoom', (minPxPerSec) => {\n const zoomDisplay = document.querySelector('#zoom-level')\n if (zoomDisplay) {\n zoomDisplay.textContent = `${Math.round(minPxPerSec)} px/s`\n }\n})\n\n// Play on click\nws.once('interaction', () => {\n ws.play()\n})\n\n/*\n\n
\n Zoom level: 50 px/s\n
\n
\n

\n 📖 Windowed Spectrogram plugin docs\n

\n

\n ⚡ This plugin is optimized for very long audio files by using a sliding window approach\n that keeps memory usage constant regardless of audio length.\n

\n

\n 🔍 Use mouse wheel to zoom in/out. The spectrogram will dynamically load segments as you navigate.\n Notice how segments are loaded on-demand as you zoom and scroll!\n

\n\n*/\n" }, { "path": "examples/spectrogram.js", "content": "// Spectrogram plugin example\n\nimport WaveSurfer from 'wavesurfer.js'\nimport Spectrogram from 'wavesurfer.js/dist/plugins/spectrogram.esm.js'\n\n// Create an instance of WaveSurfer\nconst ws = WaveSurfer.create({\n container: '#waveform',\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n url: '/examples/audio/audio.wav',\n sampleRate: 44100,\n})\n\n// Initialize the Spectrogram plugin with detailed configuration\nws.registerPlugin(\n Spectrogram.create({\n // Display frequency labels on the left side\n labels: true,\n\n // Height of the spectrogram in pixels\n height: 200,\n\n // Render separate spectrograms for each audio channel\n // Set to false to combine all channels into one spectrogram\n splitChannels: true,\n\n // Frequency scale type:\n // - 'linear': Standard linear frequency scale (0-20kHz)\n // - 'logarithmic': Logarithmic scale, better for low frequencies\n // - 'mel': Mel scale based on human hearing perception (default)\n // - 'bark': Bark scale for psychoacoustic analysis\n // - 'erb': ERB scale for auditory filter modeling\n scale: 'mel',\n\n // Frequency range to display (in Hz)\n frequencyMax: 8000, // Maximum frequency to show\n frequencyMin: 0, // Minimum frequency to show\n\n // FFT parameters\n fftSamples: 1024, // Number of samples for FFT (must be power of 2)\n // Higher values = better frequency resolution, slower rendering\n\n // Visual styling\n labelsBackground: 'rgba(0, 0, 0, 0.1)', // Background for frequency labels\n\n // Performance optimization\n useWebWorker: true, // Use web worker for FFT calculations (improves performance)\n\n // Additional options you can configure:\n //\n // Window function for FFT (affects frequency resolution vs time resolution):\n // windowFunc: 'hann' | 'hamming' | 'blackman' | 'bartlett' | 'cosine' | 'gauss' | 'lanczoz' | 'rectangular' | 'triangular'\n //\n // Color mapping for frequency intensity:\n // colorMap: 'gray' | 'igray' | 'roseus' | custom array\n //\n // Gain and range for color scaling:\n // gainDB: 20, // Brightness adjustment (default: 20dB)\n // rangeDB: 80, // Dynamic range (default: 80dB)\n //\n // Overlap between FFT windows:\n // noverlap: null, // Auto-calculated by default, or set manually\n //\n // Maximum canvas width for performance:\n // maxCanvasWidth: 30000, // Split large spectrograms into multiple canvases\n }),\n)\n\n// Play audio when user clicks on the waveform\nws.once('interaction', () => {\n ws.play()\n})\n\n// Event listeners for spectrogram interactions\nws.on('spectrogram-ready', () => {\n console.log('Spectrogram has finished rendering')\n})\n\nws.on('spectrogram-click', (relativeX) => {\n console.log('Clicked on spectrogram at position:', relativeX)\n // You can use relativeX to seek to that position in the audio\n ws.setTime(relativeX * ws.getDuration())\n})\n\n/*\n\n
\n \n \n
\n
\n ⚠️ Important Note: For audio files that require scrolling (longer than the container width), \n you MUST set a minPxPerSec value in the WaveSurfer configuration to ensure \n proper spectrogram rendering. Without this, the spectrogram may not display correctly.\n
\n \n

Spectrogram Settings

\n \n

Visual Options

\n
    \n
  • labels: true/false - Show frequency labels on the left
    • \n
  • height: 200 - Spectrogram height in pixels
    • \n
  • splitChannels: true/false - Separate spectrograms for each audio channel
    • \n
  • labelsBackground: 'rgba(0,0,0,0.1)' - Background color for labels
    • \n
  • labelsColor: '#fff' - Text color for frequency labels
    • \n
\n \n

Frequency Settings

\n
    \n
  • scale: 'mel'|'linear'|'logarithmic'|'bark'|'erb' - Frequency scale type
    • \n
  • frequencyMax: 8000 - Maximum frequency to display (Hz)
    • \n
  • frequencyMin: 0 - Minimum frequency to display (Hz)
    • \n
\n \n

Performance Settings

\n
    \n
  • fftSamples: 1024 - FFT resolution (512, 1024, 2048, 4096)
    • \n
  • useWebWorker: true - Use web worker for faster processing
    • \n
  • maxCanvasWidth: 30000 - Split large spectrograms into multiple canvases
    • \n
  • noverlap: null - Overlap between FFT windows (auto-calculated)
    • \n
\n \n

Color & Styling

\n
    \n
  • colorMap: 'gray'|'igray'|'roseus' - Color scheme for frequency intensity
    • \n
  • gainDB: 20 - Brightness adjustment (-20 to +40)
    • \n
  • rangeDB: 80 - Dynamic range (20 to 120)
    • \n
  • windowFunc: 'hann' - FFT window function (hann, hamming, blackman, etc.)
    • \n
\n \n

\n 📖 Full Documentation\n

\n
\n\n*/\n" }, { "path": "examples/speed.js", "content": "// Set the playback speed\n\n/*\n\n
\n \n\n \n\n \n\n \n
\n\n*/\n\nimport WaveSurfer from 'wavesurfer.js'\n\nconst wavesurfer = WaveSurfer.create({\n container: document.body,\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n url: '/examples/audio/librivox.mp3',\n audioRate: 2, // set the initial playback rate\n})\n\nlet preservePitch = true\nconst speeds = [0.25, 0.5, 1, 2, 4]\n\n// Toggle pitch preservation\ndocument.querySelector('input[type=\"checkbox\"]').addEventListener('change', (e) => {\n preservePitch = e.target.checked\n wavesurfer.setPlaybackRate(wavesurfer.getPlaybackRate(), preservePitch)\n})\n\n// Set the playback rate\ndocument.querySelector('input[type=\"range\"]').addEventListener('input', (e) => {\n const speed = speeds[e.target.valueAsNumber]\n document.querySelector('#rate').textContent = speed.toFixed(2)\n wavesurfer.setPlaybackRate(speed, preservePitch)\n wavesurfer.play()\n})\n\n// Play/pause\ndocument.querySelector('button').addEventListener('click', () => {\n wavesurfer.playPause()\n})\n" }, { "path": "examples/split-channels.js", "content": "// Split channels\n\nimport WaveSurfer from 'wavesurfer.js'\n\nconst wavesurfer = WaveSurfer.create({\n container: document.body,\n url: '/examples/audio/stereo.mp3',\n splitChannels: [\n {\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n },\n {\n waveColor: 'rgb(0, 200, 200)',\n progressColor: 'rgb(0, 100, 100)',\n },\n ],\n})\n\nwavesurfer.on('interaction', () => {\n wavesurfer.play()\n})\n" }, { "path": "examples/styling.js", "content": "// Custom styling via CSS\n\n/*\n \n \n\n
\n \n*/\n\nimport WaveSurfer from 'wavesurfer.js'\nimport RegionsPlugin from 'wavesurfer.js/dist/plugins/regions.esm.js'\n\n// Create a Regions plugin instance\nconst wsRegions = RegionsPlugin.create()\n\n// Create an instance of WaveSurfer\nconst ws = WaveSurfer.create({\n container: '#waveform',\n waveColor: 'hotpink',\n progressColor: 'paleturquoise',\n cursorColor: '#57BAB6',\n cursorWidth: 4,\n minPxPerSec: 100,\n url: '/examples/audio/audio.wav',\n plugins: [wsRegions],\n})\n\n// Create some regions at specific time ranges\nws.on('decode', () => {\n wsRegions.addRegion({\n start: 4,\n end: 7,\n content: 'Blue',\n })\n\n wsRegions.addRegion({\n id: 'region-green',\n start: 10,\n end: 12,\n content: 'Green',\n })\n\n wsRegions.addRegion({\n start: 19,\n content: 'Marker',\n })\n})\n" }, { "path": "examples/timeline-custom.js", "content": "// Customized Timeline plugin\n\nimport WaveSurfer from 'wavesurfer.js'\nimport TimelinePlugin from 'wavesurfer.js/dist/plugins/timeline.esm.js'\n\n// Create a timeline plugin instance with custom options\nconst topTimeline = TimelinePlugin.create({\n height: 20,\n insertPosition: 'beforebegin',\n timeInterval: 0.2,\n primaryLabelInterval: 5,\n secondaryLabelInterval: 1,\n style: {\n fontSize: '20px',\n color: '#2D5B88',\n },\n})\n\n// Create a second timeline\nconst bottomTimeline = TimelinePlugin.create({\n height: 10,\n timeInterval: 0.1,\n primaryLabelInterval: 1,\n style: {\n fontSize: '10px',\n color: '#6A3274',\n },\n})\n\n// Create an instance of WaveSurfer\nconst wavesurfer = WaveSurfer.create({\n container: '#waveform',\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n url: '/examples/audio/audio.wav',\n minPxPerSec: 100,\n plugins: [topTimeline, bottomTimeline],\n})\n\n// Play on click\nwavesurfer.once('interaction', () => {\n wavesurfer.play()\n})\n\n/*\n\n
\n

\n 📖 Timeline plugin docs\n

\n\n*/\n" }, { "path": "examples/timeline.js", "content": "// Timeline plugin\n\nimport WaveSurfer from 'wavesurfer.js'\nimport TimelinePlugin from 'wavesurfer.js/dist/plugins/timeline.esm.js'\n\n// Create an instance of WaveSurfer\nconst wavesurfer = WaveSurfer.create({\n container: '#waveform',\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n url: '/examples/audio/audio.wav',\n minPxPerSec: 100,\n plugins: [TimelinePlugin.create()],\n})\n\n// Play on click\nwavesurfer.on('interaction', () => {\n wavesurfer.play()\n})\n\n// Rewind to the beginning on finished playing\nwavesurfer.on('finish', () => {\n wavesurfer.setTime(0)\n})\n\n/*\n\n \n\n
\n

\n 📖 Timeline plugin docs\n

\n\n*/\n\n// Update the zoom level on slider change\nwavesurfer.once('decode', () => {\n const slider = document.querySelector('input[type=\"range\"]')\n\n slider.addEventListener('input', (e) => {\n const minPxPerSec = e.target.valueAsNumber\n wavesurfer.zoom(minPxPerSec)\n })\n})\n" }, { "path": "examples/video.js", "content": "// Waveform for a video\n\n// Create a video element\n/*\n\n \n\n*/\n\nimport WaveSurfer from 'wavesurfer.js'\n\n// Initialize wavesurfer.js\nconst ws = WaveSurfer.create({\n container: document.body,\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n // Pass the video element in the `media` param\n media: document.querySelector('video'),\n})\n" }, { "path": "examples/vowels.js", "content": "// American English vowels\n\nimport WaveSurfer from 'wavesurfer.js'\nimport Spectrogram from 'wavesurfer.js/dist/plugins/spectrogram.esm.js'\n\n// Sounds generated with `say -v 'Reed (English (US))' word`\nconst vowels = ['i', 'ɪ', 'ɛ', 'æ', 'ɑ', 'ɔ', 'o', 'ʊ', 'u', 'ʌ', 'ə', 'ɝ']\nconst files = ['ee', 'ih', 'hen', 'hat', 'ah', 'hot', 'oh', 'hook', 'oo', 'uh', 'ahoy', 'er']\n\nconst grid = document.querySelector('.grid')\nconst containers = vowels.map((vowel) => {\n const vowelDiv = document.createElement('div')\n vowelDiv.textContent = `[ ${vowel} ]`\n return grid.appendChild(vowelDiv)\n})\n\ncontainers.forEach((vowelDiv, idx) => {\n const wavesurfer = WaveSurfer.create({\n container: vowelDiv,\n height: 50,\n hideScrollbar: true,\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n url: `/examples/audio/${files[idx]}.mp4`,\n sampleRate: 14600,\n interact: false,\n plugins: [\n Spectrogram.create({\n labels: true,\n labelsColor: 'currentColor',\n labelsBackground: 'transparent',\n height: 150,\n }),\n ],\n })\n\n wavesurfer.on('ready', () => {\n vowelDiv.onclick = () => {\n wavesurfer.playPause()\n }\n })\n})\n\n/*\n\n
\n\n \n\n*/\n" }, { "path": "examples/webaudio-shim.js", "content": "import WaveSurfer from 'wavesurfer.js'\nimport WebAudioPlayer from 'wavesurfer.js/dist/webaudio.js'\n\nconst webAudioPlayer = new WebAudioPlayer()\nwebAudioPlayer.src = '/examples/audio/audio.wav'\n\nwebAudioPlayer.addEventListener('loadedmetadata', () => {\n const wavesurfer = WaveSurfer.create({\n container: document.body,\n media: webAudioPlayer,\n peaks: webAudioPlayer.getChannelData(),\n duration: webAudioPlayer.duration,\n })\n\n wavesurfer.on('click', () => {\n wavesurfer.play()\n })\n})\n" }, { "path": "examples/webaudio.js", "content": "// Web Audio example\n\nimport WaveSurfer from 'wavesurfer.js'\n\n// Define the equalizer bands\nconst eqBands = [32, 64, 125, 250, 500, 1000, 2000, 4000, 8000, 16000]\n\n// Create a WaveSurfer instance and pass the media element\nconst wavesurfer = WaveSurfer.create({\n container: document.body,\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n url: '/examples/audio/audio.wav',\n mediaControls: true,\n})\n\nwavesurfer.on('click', () => wavesurfer.playPause())\n\nwavesurfer.once('play', () => {\n // Create Web Audio context\n const audioContext = new AudioContext()\n\n // Create a biquad filter for each band\n const filters = eqBands.map((band) => {\n const filter = audioContext.createBiquadFilter()\n filter.type = band <= 32 ? 'lowshelf' : band >= 16000 ? 'highshelf' : 'peaking'\n filter.gain.value = Math.random() * 40 - 20\n filter.Q.value = 1 // resonance\n filter.frequency.value = band // the cut-off frequency\n return filter\n })\n\n const audio = wavesurfer.getMediaElement()\n const mediaNode = audioContext.createMediaElementSource(audio)\n\n // Connect the filters and media node sequentially\n const equalizer = filters.reduce((prev, curr) => {\n prev.connect(curr)\n return curr\n }, mediaNode)\n\n // Connect the filters to the audio output\n equalizer.connect(audioContext.destination)\n\n sliders.forEach((slider, i) => {\n const filter = filters[i]\n filter.gain.value = slider.value\n slider.oninput = (e) => (filter.gain.value = e.target.value)\n })\n})\n\n// HTML UI\n// Create a vertical slider for each band\nconst container = document.createElement('p')\nconst sliders = eqBands.map(() => {\n const slider = document.createElement('input')\n slider.type = 'range'\n slider.orient = 'vertical'\n slider.style.appearance = 'slider-vertical'\n slider.style.width = '8%'\n slider.min = -40\n slider.max = 40\n slider.value = Math.random() * 40 - 20\n slider.step = 0.1\n container.appendChild(slider)\n return slider\n})\ndocument.body.appendChild(container)\n" }, { "path": "examples/zoom-plugin.js", "content": "/**\n * Zoom plugin\n *\n * Zoom in or out on the waveform when scrolling the mouse wheel\n */\n\nimport WaveSurfer from 'wavesurfer.js'\nimport ZoomPlugin from 'wavesurfer.js/dist/plugins/zoom.esm.js'\n\n// Create an instance of WaveSurfer\nconst wavesurfer = WaveSurfer.create({\n container: '#waveform',\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n url: '/examples/audio/audio.wav',\n minPxPerSec: 100,\n})\n\n// Initialize the Zoom plugin\nwavesurfer.registerPlugin(\n ZoomPlugin.create({\n // the amount of zoom per wheel step, e.g. 0.5 means a 50% magnification per scroll\n scale: 0.5,\n // Optionally, specify the maximum pixels-per-second factor while zooming\n maxZoom: 100,\n }),\n)\n\n// show the current minPxPerSec value\nconst minPxPerSecSpan = document.querySelector('#minPxPerSec')\nwavesurfer.on('zoom', (minPxPerSec) => {\n minPxPerSecSpan.textContent = `${Math.round(minPxPerSec)}`\n})\n\n// Create a minPxPerSec display and waveform container\n/*\n\n
\n minPxPerSec: 100 px/s\n
\n\n
\n \n *\n */\n\n// A few more controls\n/*\n\n \n \n \n

\n 📖 Zoom in or out on the waveform when scrolling the mouse wheel\n

\n\n*/\n\nconst playButton = document.querySelector('#play')\nconst forwardButton = document.querySelector('#forward')\nconst backButton = document.querySelector('#backward')\n\nplayButton.onclick = () => {\n wavesurfer.playPause()\n}\n\nforwardButton.onclick = () => {\n wavesurfer.skip(5)\n}\n\nbackButton.onclick = () => {\n wavesurfer.skip(-5)\n}\n" }, { "path": "examples/zoom.js", "content": "// Zooming the waveform\n\nimport WaveSurfer from 'wavesurfer.js'\n\nconst wavesurfer = WaveSurfer.create({\n container: document.body,\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n url: '/examples/audio/audio.wav',\n minPxPerSec: 100,\n dragToSeek: true,\n})\n\n// Create a simple slider\n/*\n\n \n\n*/\n\n// Update the zoom level on slider change\nwavesurfer.once('decode', () => {\n const slider = document.querySelector('input[type=\"range\"]')\n\n slider.addEventListener('input', (e) => {\n const minPxPerSec = e.target.valueAsNumber\n wavesurfer.zoom(minPxPerSec)\n })\n})\n\n// A few more controls\n\n/*\n\n \n \n \n\n
\n \n \n \n
\n\n*/\n\nconst playButton = document.querySelector('#play')\nconst forwardButton = document.querySelector('#forward')\nconst backButton = document.querySelector('#backward')\n\nwavesurfer.once('decode', () => {\n document.querySelectorAll('input[type=\"checkbox\"]').forEach((input) => {\n input.onchange = (e) => {\n wavesurfer.setOptions({\n [input.value]: e.target.checked,\n })\n }\n })\n\n playButton.onclick = () => {\n wavesurfer.playPause()\n }\n\n forwardButton.onclick = () => {\n wavesurfer.skip(5)\n }\n\n backButton.onclick = () => {\n wavesurfer.skip(-5)\n }\n})\n" }, { "path": "index.html", "content": "\n\n \n \n \n wavesurfer.js examples\n\n \n \n\n \n
\n

wavesurfer.js examples

\n
\n\n
\n \n\n \n \n
\n\n \n\n \n \n\n" }, { "path": "jest.config.js", "content": "export default {\n preset: 'ts-jest/presets/default-esm',\n testEnvironment: 'jsdom',\n roots: ['/src'],\n moduleNameMapper: {\n '^(\\\\.{1,2}/.*)\\\\.js$': '$1',\n },\n collectCoverage: true,\n collectCoverageFrom: ['src/**/*.ts'],\n globals: {\n 'ts-jest': {\n useESM: true,\n tsconfig: 'tsconfig.test.json',\n },\n },\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"wavesurfer.js\",\n \"version\": \"7.12.4\",\n \"license\": \"BSD-3-Clause\",\n \"author\": \"katspaugh\",\n \"description\": \"Audio waveform player\",\n \"homepage\": \"https://wavesurfer.xyz\",\n \"keywords\": [\n \"waveform\",\n \"spectrogram\",\n \"audio\",\n \"player\",\n \"music\",\n \"linguistics\"\n ],\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git@github.com:katspaugh/wavesurfer.js.git\"\n },\n \"type\": \"module\",\n \"files\": [\n \"dist\"\n ],\n \"main\": \"./dist/wavesurfer.js\",\n \"unpkg\": \"./dist/wavesurfer.min.js\",\n \"module\": \"./dist/wavesurfer.js\",\n \"browser\": \"./dist/wavesurfer.js\",\n \"types\": \"./dist/wavesurfer.d.ts\",\n \"exports\": {\n \".\": {\n \"import\": \"./dist/wavesurfer.esm.js\",\n \"types\": \"./dist/wavesurfer.d.ts\",\n \"require\": \"./dist/wavesurfer.cjs\"\n },\n \"./dist/plugins/*.js\": {\n \"import\": \"./dist/plugins/*.esm.js\",\n \"types\": \"./dist/plugins/*.d.ts\",\n \"require\": \"./dist/plugins/*.cjs\"\n },\n \"./plugins/*\": {\n \"import\": \"./dist/plugins/*.esm.js\",\n \"types\": \"./dist/plugins/*.d.ts\",\n \"require\": \"./dist/plugins/*.cjs\"\n },\n \"./dist/*\": {\n \"import\": \"./dist/*\",\n \"types\": \"./dist/*.d.ts\",\n \"require\": \"./dist/*.cjs\"\n },\n \"./dist/plugins/*.esm.js\": {\n \"import\": \"./dist/plugins/*.esm.js\",\n \"types\": \"./dist/plugins/*.d.ts\",\n \"require\": \"./dist/plugins/*.cjs\"\n }\n },\n \"scripts\": {\n \"clean\": \"node ./scripts/clean.cjs\",\n \"build:dev\": \"tsc -w --target ESNext\",\n \"build\": \"npm run clean && tsc && rollup -c\",\n \"prepublishOnly\": \"npm run build\",\n \"lint\": \"eslint \\\"src/**/*.ts\\\" --fix\",\n \"lint:report\": \"eslint \\\"src/**/*.ts\\\" --output-file eslint_report.json --format json\",\n \"prettier\": \"prettier -w '**/*.{js,ts,css}' --ignore-path .gitignore\",\n \"make-plugin\": \"./scripts/plugin.sh\",\n \"cypress\": \"cypress open --e2e\",\n \"cypress:canary\": \"cypress open --e2e -b chrome:canary\",\n \"test\": \"cypress run --browser chrome\",\n \"test:unit\": \"jest --coverage\",\n \"serve\": \"npx live-server --port=9090 --no-browser --ignore='.*,src,cypress,scripts'\",\n \"start\": \"npm run build:dev & npm run serve\",\n \"prepare\": \"npm run build\"\n },\n \"packageManager\": \"yarn@1.22.22\",\n \"devDependencies\": {\n \"@rollup/plugin-terser\": \"^0.4.4\",\n \"@rollup/plugin-typescript\": \"^12.1.1\",\n \"@types/jest\": \"^29.5.2\",\n \"@typescript-eslint/eslint-plugin\": \"^8.43.0\",\n \"@typescript-eslint/parser\": \"^8.43.0\",\n \"cypress\": \"^13.16.1\",\n \"cypress-image-snapshot\": \"^4.0.1\",\n \"eslint\": \"^9.35.0\",\n \"eslint-config-prettier\": \"^9.1.0\",\n \"eslint-plugin-prettier\": \"^5.2.1\",\n \"glob\": \"^11.0.0\",\n \"jest\": \"^29.7.0\",\n \"jest-environment-jsdom\": \"^29.7.0\",\n \"prettier\": \"^3.4.2\",\n \"rollup\": \"^4.50.1\",\n \"rollup-plugin-dts\": \"^6.1.0\",\n \"rollup-plugin-web-worker-loader\": \"^1.7.0\",\n \"ts-jest\": \"^29.1.1\",\n \"typescript\": \"^5.9.2\"\n }\n}\n" }, { "path": "rollup.config.js", "content": "import { glob } from 'glob'\nimport typescript from '@rollup/plugin-typescript'\nimport terser from '@rollup/plugin-terser'\nimport dts from 'rollup-plugin-dts'\nimport webWorkerLoader from 'rollup-plugin-web-worker-loader'\n\nconst plugins = [\n webWorkerLoader(),\n typescript({ declaration: false, declarationDir: null }),\n terser({ format: { comments: false } }),\n]\n\nexport default [\n // ES module\n {\n input: 'src/wavesurfer.ts',\n output: {\n file: 'dist/wavesurfer.esm.js',\n format: 'esm',\n },\n plugins,\n },\n // CommonJS module (Node.js)\n {\n input: 'src/wavesurfer.ts',\n output: {\n file: 'dist/wavesurfer.cjs',\n format: 'cjs',\n exports: 'default',\n },\n plugins,\n },\n // UMD (browser script tag)\n {\n input: 'src/wavesurfer.ts',\n output: {\n name: 'WaveSurfer',\n file: 'dist/wavesurfer.min.js',\n format: 'umd',\n exports: 'default',\n },\n plugins,\n },\n\n // Compiled type definitions\n {\n input: './dist/wavesurfer.d.ts',\n output: [{ file: 'dist/types.d.ts', format: 'es' }],\n plugins: [dts()],\n },\n\n // Wavesurfer plugins (exclude worker files)\n ...glob\n .sync('src/plugins/*.ts')\n .filter((plugin) => !plugin.includes('worker'))\n .map((plugin) => [\n // ES module\n {\n input: plugin,\n output: {\n file: plugin.replace('src/', 'dist/').replace('.ts', '.js'),\n format: 'esm',\n },\n plugins,\n },\n // ES module again but with an .esm.js extension\n {\n input: plugin,\n output: {\n file: plugin.replace('src/', 'dist/').replace('.ts', '.esm.js'),\n format: 'esm',\n },\n plugins,\n },\n // CommonJS module (Node.js)\n {\n input: plugin,\n output: {\n name: plugin.replace('src/plugins/', '').replace('.ts', ''),\n file: plugin.replace('src/', 'dist/').replace('.ts', '.cjs'),\n format: 'cjs',\n exports: 'default',\n },\n plugins,\n },\n // UMD (browser script tag)\n {\n input: plugin,\n output: {\n name: plugin\n .replace('src/plugins/', '')\n .replace('.ts', '')\n .replace(/^./, (c) => `WaveSurfer.${c.toUpperCase()}`),\n file: plugin.replace('src/', 'dist/').replace('.ts', '.min.js'),\n format: 'umd',\n extend: true,\n globals: {\n WaveSurfer: 'WaveSurfer',\n },\n exports: 'default',\n },\n external: ['WaveSurfer'],\n plugins,\n },\n ])\n .flat(),\n]\n" }, { "path": "scripts/clean.cjs", "content": "const path = require('path')\nconst fs = require('fs')\n\nconst run = () => {\n const distPath = path.join(__dirname, '../dist')\n fs.rmSync(distPath, { recursive: true, force: true })\n}\n\nrun()" }, { "path": "scripts/plugin.sh", "content": "#!/bin/bash\n\n# Plugin name from argument\nPLUGIN_NAME=$1\n\n# Prompt for plugin name if not provided\nif [ -z \"$PLUGIN_NAME\" ]\nthen\n echo \"Enter plugin name: \"\n read PLUGIN_NAME\nfi\n\nFILE_NAME=$(echo \"$PLUGIN_NAME\" | sed -e 's/\\(.*\\)/\\L\\1/')\n\ncat ./scripts/plugin-template.ts.template | sed \"s/Template/$PLUGIN_NAME/g\" > \"./src/plugins/${FILE_NAME}.ts\"\n" }, { "path": "scripts/plugin.ts.template", "content": "/**\n * The Template plugin\n */\n\nimport BasePlugin, { type BasePluginEvents } from '../base-plugin.js'\n\nexport type TemplatePluginOptions = {\n}\n\nconst defaultOptions = {\n}\n\nexport type TemplatePluginEvents = BasePluginEvents & {\n}\n\nexport class TemplatePlugin extends BasePlugin {\n protected options: TemplatePluginOptions & typeof defaultOptions\n\n constructor(options?: TemplatePluginOptions) {\n super(options || {})\n\n this.options = Object.assign({}, defaultOptions, options)\n }\n\n public static create(options?: TemplatePluginOptions) {\n return new TemplatePlugin(options)\n }\n\n /** Called by wavesurfer, don't call manually */\n onInit() {\n if (!this.wavesurfer) {\n throw Error('WaveSurfer is not initialized')\n }\n }\n\n /** Unmount */\n public destroy() {\n super.destroy()\n }\n}\n\nexport default TemplatePlugin\n" }, { "path": "src/__tests__/base-plugin.test.ts", "content": "import { BasePlugin } from '../base-plugin.js'\n\nclass TestPlugin extends BasePlugin<{ destroy: [] }, {}> {\n initCalled = false\n protected onInit() {\n this.initCalled = true\n }\n}\n\ndescribe('BasePlugin', () => {\n test('_init calls onInit and sets wavesurfer', () => {\n const plugin = new TestPlugin({})\n const ws = {} as any\n plugin._init(ws)\n expect((plugin as any).wavesurfer).toBe(ws)\n expect(plugin.initCalled).toBe(true)\n })\n\n test('destroy emits destroy and unsubscribes', () => {\n const plugin = new TestPlugin({})\n const unsub = jest.fn()\n ;(plugin as any).subscriptions = [unsub]\n const spy = jest.fn()\n plugin.on('destroy', spy)\n plugin.destroy()\n expect(spy).toHaveBeenCalled()\n expect(unsub).toHaveBeenCalled()\n })\n})\n" }, { "path": "src/__tests__/dom.test.ts", "content": "import createElement from '../dom.js'\n\ndescribe('createElement', () => {\n test('creates DOM structure', () => {\n const container = document.createElement('div')\n const el = createElement(\n 'div',\n {\n id: 'root',\n children: {\n span: { textContent: 'child' },\n },\n },\n container,\n )\n\n expect(container.firstChild).toBe(el)\n expect((el as HTMLElement).id).toBe('root')\n expect(el.querySelector('span')?.textContent).toBe('child')\n })\n})\n" }, { "path": "src/__tests__/draggable.test.ts", "content": "import { makeDraggable } from '../draggable.js'\n\ndescribe('makeDraggable', () => {\n beforeAll(() => {\n Object.defineProperty(window, 'matchMedia', {\n writable: true,\n value: jest.fn().mockReturnValue({\n matches: false,\n addListener: jest.fn(),\n removeListener: jest.fn(),\n }),\n })\n if (typeof window.PointerEvent === 'undefined') {\n class FakePointerEvent extends MouseEvent {\n constructor(type: string, props: any) {\n super(type, props)\n }\n }\n // @ts-expect-error\n window.PointerEvent = FakePointerEvent\n // @ts-expect-error\n global.PointerEvent = FakePointerEvent\n }\n })\n test('invokes callbacks on drag', () => {\n const el = document.createElement('div')\n document.body.appendChild(el)\n jest.spyOn(el, 'getBoundingClientRect').mockReturnValue({\n left: 0,\n top: 0,\n width: 100,\n height: 100,\n right: 100,\n bottom: 100,\n x: 0,\n y: 0,\n toJSON: () => {},\n })\n const onDrag = jest.fn()\n const onStart = jest.fn()\n const onEnd = jest.fn()\n const unsubscribe = makeDraggable(el, onDrag, onStart, onEnd, 0)\n\n el.dispatchEvent(new PointerEvent('pointerdown', { clientX: 10, clientY: 10 }))\n document.dispatchEvent(new PointerEvent('pointermove', { clientX: 20, clientY: 20 }))\n document.dispatchEvent(new PointerEvent('pointerup', { clientX: 20, clientY: 20 }))\n\n expect(onStart).toHaveBeenCalled()\n expect(onDrag).toHaveBeenCalled()\n expect(onEnd).toHaveBeenCalled()\n\n unsubscribe()\n })\n})\n" }, { "path": "src/__tests__/event-emitter.test.ts", "content": "import EventEmitter from '../event-emitter.js'\n\ninterface Events {\n foo: [number]\n bar: []\n [key: string]: unknown[]\n}\n\ndescribe('EventEmitter', () => {\n test('on and emit', () => {\n const emitter = new EventEmitter()\n const handler = jest.fn()\n emitter.on('foo', handler)\n ;(emitter as any).emit('foo', 42)\n expect(handler).toHaveBeenCalledWith(42)\n })\n\n test('once', () => {\n const emitter = new EventEmitter()\n const handler = jest.fn()\n emitter.once('bar', handler)\n ;(emitter as any).emit('bar')\n ;(emitter as any).emit('bar')\n expect(handler).toHaveBeenCalledTimes(1)\n })\n\n test('unAll', () => {\n const emitter = new EventEmitter()\n const handler = jest.fn()\n emitter.on('foo', handler)\n emitter.unAll()\n ;(emitter as any).emit('foo', 1)\n expect(handler).not.toHaveBeenCalled()\n })\n})\n" }, { "path": "src/__tests__/fetcher.test.ts", "content": "import Fetcher from '../fetcher.js'\nimport { TextEncoder } from 'util'\nimport { Blob as NodeBlob } from 'buffer'\n\ndescribe('Fetcher', () => {\n test('fetchBlob returns blob and reports progress', async () => {\n const data = 'hello'\n const reader = {\n read: jest\n .fn()\n .mockResolvedValueOnce({ done: false, value: new TextEncoder().encode(data) })\n .mockResolvedValueOnce({ done: true, value: undefined }),\n }\n const response = {\n status: 200,\n statusText: 'OK',\n headers: new Headers({ 'Content-Length': data.length.toString() }),\n body: { getReader: () => reader },\n clone() {\n return this\n },\n blob: async () => new NodeBlob([data]),\n } as unknown as Response\n\n global.fetch = jest.fn().mockResolvedValue(response)\n\n const progress = jest.fn()\n const blob = await Fetcher.fetchBlob('url', progress)\n expect(await blob.text()).toBe(data)\n\n // wait for watchProgress to process\n await new Promise(process.nextTick)\n expect(progress).toHaveBeenCalledWith(100)\n })\n})\n" }, { "path": "src/__tests__/memory-leaks.test.ts", "content": "/**\n * Memory Leak Detection Tests\n *\n * These tests verify that WaveSurfer properly cleans up resources\n * and doesn't leak memory when destroyed and recreated multiple times.\n */\n\nimport WaveSurfer from '../wavesurfer.js'\nimport RegionsPlugin from '../plugins/regions.js'\n\n// Mock audio context and matchMedia\nbeforeAll(() => {\n global.AudioContext = jest.fn().mockImplementation(() => ({\n createMediaElementSource: jest.fn(() => ({\n connect: jest.fn(),\n disconnect: jest.fn(),\n })),\n createGain: jest.fn(() => ({\n connect: jest.fn(),\n disconnect: jest.fn(),\n gain: { value: 1, setValueAtTime: jest.fn() },\n })),\n destination: {},\n close: jest.fn(),\n }))\n\n // Mock matchMedia for drag-stream\n Object.defineProperty(window, 'matchMedia', {\n writable: true,\n value: jest.fn().mockImplementation((query) => ({\n matches: false,\n media: query,\n onchange: null,\n addListener: jest.fn(),\n removeListener: jest.fn(),\n addEventListener: jest.fn(),\n removeEventListener: jest.fn(),\n dispatchEvent: jest.fn(),\n })),\n })\n})\n\ndescribe('Memory Leak Detection', () => {\n let container: HTMLElement\n\n beforeEach(() => {\n container = document.createElement('div')\n container.id = 'waveform'\n document.body.appendChild(container)\n })\n\n afterEach(() => {\n document.body.removeChild(container)\n })\n\n describe('WaveSurfer lifecycle', () => {\n it('should cleanup subscriptions on destroy', () => {\n const ws = WaveSurfer.create({ container })\n\n // Track if cleanup functions are called\n const cleanupSpy = jest.fn()\n\n // Access internal state to verify cleanup\n const originalDestroy = ws.destroy.bind(ws)\n ws.destroy = () => {\n cleanupSpy()\n originalDestroy()\n }\n\n ws.destroy()\n\n expect(cleanupSpy).toHaveBeenCalled()\n })\n\n it('should not leak memory after multiple create/destroy cycles', () => {\n const instances: WaveSurfer[] = []\n\n // Create and destroy multiple instances\n for (let i = 0; i < 10; i++) {\n const ws = WaveSurfer.create({ container })\n instances.push(ws)\n ws.destroy()\n }\n\n // All instances should be destroyed\n instances.forEach((ws) => {\n // After destroy, the instance should not have active listeners\n expect(ws).toBeDefined()\n })\n })\n\n it('should remove all event listeners on destroy', () => {\n const ws = WaveSurfer.create({ container })\n\n const clickHandler = jest.fn()\n const timeUpdateHandler = jest.fn()\n\n ws.on('click', clickHandler)\n ws.on('timeupdate', timeUpdateHandler)\n\n ws.destroy()\n\n // After destroy, handlers should be removed\n // We can't test emit directly as it's protected, but we verified\n // the cleanup happened via destroy()\n expect(clickHandler).not.toHaveBeenCalled()\n expect(timeUpdateHandler).not.toHaveBeenCalled()\n })\n\n it('should cleanup DOM elements on destroy', () => {\n const ws = WaveSurfer.create({ container })\n\n const childCountBefore = container.children.length\n expect(childCountBefore).toBeGreaterThan(0)\n\n ws.destroy()\n\n const childCountAfter = container.children.length\n expect(childCountAfter).toBe(0)\n })\n\n it('should cleanup reactive subscriptions on destroy', () => {\n const ws = WaveSurfer.create({ container })\n\n // Get state to check reactive cleanup\n const state = ws.getState()\n\n // State should have reactive signals\n expect(state).toBeDefined()\n expect(state.isPlaying).toBeDefined()\n expect(state.currentTime).toBeDefined()\n\n ws.destroy()\n\n // After destroy, reactive subscriptions should be cleaned up\n expect(state).toBeDefined()\n })\n })\n\n describe('Plugin lifecycle', () => {\n it('should track registered plugins', () => {\n const ws = WaveSurfer.create({ container })\n\n // WaveSurfer should start with no plugins\n expect(ws).toBeDefined()\n\n ws.destroy()\n })\n\n it('should remove plugin elements from DOM on destroy', () => {\n WaveSurfer.create({ container })\n\n // Mock a plugin that adds DOM elements\n const pluginElement = document.createElement('div')\n pluginElement.className = 'test-plugin'\n container.appendChild(pluginElement)\n\n const elementCountBefore = container.querySelectorAll('.test-plugin').length\n expect(elementCountBefore).toBe(1)\n\n // Plugin should cleanup its elements\n pluginElement.remove()\n\n const elementCountAfter = container.querySelectorAll('.test-plugin').length\n expect(elementCountAfter).toBe(0)\n })\n })\n\n describe('Regions plugin memory leak (#4243)', () => {\n it('should cleanup region event listeners when removed', () => {\n const ws = WaveSurfer.create({ container })\n const regions = ws.registerPlugin(RegionsPlugin.create())\n\n // Mock duration so regions are saved immediately\n jest.spyOn(ws, 'getDuration').mockReturnValue(10)\n jest.spyOn(ws, 'getDecodedData').mockReturnValue({ numberOfChannels: 1 } as any)\n\n // Create a region\n const region = regions.addRegion({ start: 0, end: 1 })\n\n // Track if cleanup is happening\n const clickHandler = jest.fn()\n region.on('click', clickHandler)\n\n // Remove the region\n region.remove()\n\n // After removal, the region element should be null\n expect(region.element).toBeNull()\n\n // Cleanup\n ws.destroy()\n })\n\n it('should not retain regions in memory after removal', () => {\n const ws = WaveSurfer.create({ container })\n const regions = ws.registerPlugin(RegionsPlugin.create())\n\n // Mock duration so regions are saved immediately\n jest.spyOn(ws, 'getDuration').mockReturnValue(10)\n jest.spyOn(ws, 'getDecodedData').mockReturnValue({ numberOfChannels: 1 } as any)\n\n // Create multiple regions\n const region1 = regions.addRegion({ start: 0, end: 1 })\n const region2 = regions.addRegion({ start: 2, end: 3 })\n const region3 = regions.addRegion({ start: 4, end: 5 })\n\n expect(regions.getRegions().length).toBe(3)\n\n // Remove regions\n region1.remove()\n region2.remove()\n\n // Only one region should remain\n expect(regions.getRegions().length).toBe(1)\n expect(regions.getRegions()[0]).toBe(region3)\n\n // Remove last region\n region3.remove()\n expect(regions.getRegions().length).toBe(0)\n\n // Cleanup\n ws.destroy()\n })\n\n it('should cleanup content event listeners when region is removed', () => {\n const ws = WaveSurfer.create({ container })\n const regions = ws.registerPlugin(RegionsPlugin.create())\n\n // Mock duration so regions are saved immediately\n jest.spyOn(ws, 'getDuration').mockReturnValue(10)\n jest.spyOn(ws, 'getDecodedData').mockReturnValue({ numberOfChannels: 1 } as any)\n\n // Create a region with editable content\n const region = regions.addRegion({\n start: 0,\n end: 1,\n content: 'Test content',\n contentEditable: true,\n })\n\n // Remove the region\n region.remove()\n\n // Content should be cleaned up\n expect(region.element).toBeNull()\n\n // Cleanup\n ws.destroy()\n })\n\n it('should cleanup DOM event streams on region removal', () => {\n const ws = WaveSurfer.create({ container })\n const regions = ws.registerPlugin(RegionsPlugin.create())\n\n // Mock duration so regions are saved immediately\n jest.spyOn(ws, 'getDuration').mockReturnValue(10)\n jest.spyOn(ws, 'getDecodedData').mockReturnValue({ numberOfChannels: 1 } as any)\n\n // Create regions\n const createdRegions = []\n for (let i = 0; i < 10; i++) {\n createdRegions.push(regions.addRegion({ start: i, end: i + 1 }))\n }\n\n expect(regions.getRegions().length).toBe(10)\n\n // Remove all regions\n createdRegions.forEach((r) => r.remove())\n\n // All regions should be removed\n expect(regions.getRegions().length).toBe(0)\n\n // Cleanup\n ws.destroy()\n })\n })\n\n describe('Event listener cleanup', () => {\n it('should properly cleanup on destroy', () => {\n const ws = WaveSurfer.create({ container })\n\n // Get renderer to ensure it's initialized\n const renderer = ws.getRenderer()\n expect(renderer).toBeDefined()\n\n // Should not throw during destroy\n expect(() => {\n ws.destroy()\n }).not.toThrow()\n })\n })\n\n describe('Reactive system cleanup', () => {\n it('should have reactive state available', () => {\n const ws = WaveSurfer.create({ container })\n const state = ws.getState()\n\n // State should expose reactive signals\n expect(state.isPlaying).toBeDefined()\n expect(state.currentTime).toBeDefined()\n expect(state.duration).toBeDefined()\n expect(state.volume).toBeDefined()\n expect(state.progressPercent).toBeDefined()\n\n // Cleanup\n ws.destroy()\n })\n\n it('should not accumulate subscriptions across instances', () => {\n const instances: WaveSurfer[] = []\n\n // Create multiple instances\n for (let i = 0; i < 5; i++) {\n const ws = WaveSurfer.create({ container })\n instances.push(ws)\n }\n\n // Each instance should be independent\n expect(instances.length).toBe(5)\n\n // Destroy all instances\n instances.forEach((ws) => ws.destroy())\n\n // All instances should be cleaned up\n expect(instances.every((ws) => ws !== null)).toBe(true)\n })\n })\n\n describe('Edge cases', () => {\n it('should handle destroy called multiple times', () => {\n const ws = WaveSurfer.create({ container })\n\n // Should not throw when destroyed multiple times\n expect(() => {\n ws.destroy()\n ws.destroy()\n ws.destroy()\n }).not.toThrow()\n })\n\n it('should handle destroy without initialization', () => {\n const ws = WaveSurfer.create({ container })\n\n // Destroy immediately without loading audio\n expect(() => {\n ws.destroy()\n }).not.toThrow()\n })\n\n it('should cleanup even if events are subscribed during destroy', () => {\n const ws = WaveSurfer.create({ container })\n\n // Subscribe to destroy event\n const destroyHandler = jest.fn()\n ws.on('destroy', destroyHandler)\n\n ws.destroy()\n\n // Destroy handler should have been called\n expect(destroyHandler).toHaveBeenCalled()\n })\n })\n})\n" }, { "path": "src/__tests__/minimap.test.ts", "content": "jest.mock('../wavesurfer.js', () => ({\n __esModule: true,\n default: {\n create: jest.fn(),\n },\n}))\n\nimport MinimapPlugin from '../plugins/minimap.js'\nimport WaveSurfer from '../wavesurfer.js'\n\ntype Listener = (...args: any[]) => void\n\nconst createEmitter = () => {\n const listeners = new Map>()\n\n return {\n on: jest.fn((event: string, listener: Listener) => {\n if (!listeners.has(event)) {\n listeners.set(event, new Set())\n }\n\n listeners.get(event)!.add(listener)\n return () => listeners.get(event)?.delete(listener)\n }),\n emit: (event: string, ...args: any[]) => {\n listeners.get(event)?.forEach((listener) => listener(...args))\n },\n }\n}\n\nconst createMiniWaveSurfer = (duration = 30) => {\n const emitter = createEmitter()\n const renderer = { renderProgress: jest.fn() }\n\n return {\n ...emitter,\n destroy: jest.fn(() => emitter.emit('destroy')),\n getDuration: jest.fn(() => duration),\n getRenderer: jest.fn(() => renderer),\n setTime: jest.fn(),\n renderer,\n }\n}\n\nconst createMainWaveSurfer = (dragToSeek: boolean | { debounceTime: number } = true) => {\n const emitter = createEmitter()\n const wrapperParent = document.createElement('div')\n const wrapper = document.createElement('div')\n const renderer = { renderProgress: jest.fn() }\n const channelData = new Float32Array([0, 1, -1])\n\n wrapperParent.appendChild(wrapper)\n\n return {\n ...emitter,\n options: { dragToSeek },\n getCurrentTime: jest.fn(() => 12),\n getDecodedData: jest.fn(() => ({\n duration: 30,\n numberOfChannels: 1,\n getChannelData: jest.fn(() => channelData),\n })),\n getDuration: jest.fn(() => 30),\n getRenderer: jest.fn(() => renderer),\n getWrapper: jest.fn(() => wrapper),\n isPlaying: jest.fn(() => false),\n seekTo: jest.fn(),\n renderer,\n }\n}\n\nconst createMock = WaveSurfer.create as jest.Mock\n\ndescribe('MinimapPlugin', () => {\n afterEach(() => {\n jest.clearAllMocks()\n jest.useRealTimers()\n })\n\n test('renders the minimap from peaks without sharing the main media element', async () => {\n const miniWaveSurfer = createMiniWaveSurfer()\n const mainWaveSurfer = createMainWaveSurfer()\n\n createMock.mockReturnValue(miniWaveSurfer)\n\n const plugin = MinimapPlugin.create({ height: 20 })\n plugin._init(mainWaveSurfer as any)\n await Promise.resolve()\n\n expect(createMock).toHaveBeenCalledWith(\n expect.objectContaining({\n container: expect.any(HTMLElement),\n duration: 30,\n media: undefined,\n url: undefined,\n }),\n )\n expect(createMock.mock.calls[0][0].peaks).toEqual([new Float32Array([0, 1, -1])])\n\n mainWaveSurfer.emit('timeupdate', 5)\n expect(miniWaveSurfer.setTime).toHaveBeenLastCalledWith(5)\n\n mainWaveSurfer.emit('drag', 0.25)\n expect(miniWaveSurfer.renderer.renderProgress).toHaveBeenCalledWith(0.25, false)\n })\n\n test('syncs the main waveform immediately when interacting with the minimap', async () => {\n jest.useFakeTimers()\n\n const miniWaveSurfer = createMiniWaveSurfer()\n const mainWaveSurfer = createMainWaveSurfer(true)\n\n createMock.mockReturnValue(miniWaveSurfer)\n\n const plugin = MinimapPlugin.create({ dragToSeek: true })\n plugin._init(mainWaveSurfer as any)\n await Promise.resolve()\n\n miniWaveSurfer.emit('click', 0.5, 0.1)\n expect(mainWaveSurfer.seekTo).toHaveBeenCalledWith(0.5)\n\n miniWaveSurfer.emit('drag', 0.75)\n expect(mainWaveSurfer.renderer.renderProgress).toHaveBeenCalledWith(0.75, false)\n\n jest.advanceTimersByTime(200)\n expect(mainWaveSurfer.seekTo).toHaveBeenLastCalledWith(0.75)\n })\n})\n" }, { "path": "src/__tests__/player.test.ts", "content": "import Player from '../player.js'\n\ninterface Events {\n [key: string]: unknown[]\n}\n\ndescribe('Player', () => {\n const createMedia = () => {\n const media = document.createElement('audio') as HTMLMediaElement & {\n play: jest.Mock\n pause: jest.Mock\n setSinkId?: jest.Mock\n }\n media.play = jest.fn().mockResolvedValue(undefined)\n media.pause = jest.fn()\n ;(media as any).setSinkId = jest.fn().mockResolvedValue(undefined)\n return media\n }\n\n test('play and pause', async () => {\n const media = createMedia()\n const player = new Player({ media })\n await player.play()\n expect(media.play).toHaveBeenCalled()\n player.pause()\n expect(media.pause).toHaveBeenCalled()\n })\n\n test('pause before play promise resolves does not reject', async () => {\n const abort = new DOMException('interrupted', 'AbortError')\n let rejectPlay: (reason?: unknown) => void = () => undefined\n const media = createMedia()\n media.play = jest.fn(\n () =>\n new Promise((_, reject) => {\n rejectPlay = reject\n }),\n )\n const player = new Player({ media })\n const promise = player.play()\n player.pause()\n rejectPlay(abort)\n await expect(promise).resolves.toBeUndefined()\n })\n\n test('volume and muted', () => {\n const media = createMedia()\n const player = new Player({ media })\n player.setVolume(0.5)\n expect(player.getVolume()).toBe(0.5)\n player.setMuted(true)\n expect(player.getMuted()).toBe(true)\n })\n\n test('setTime clamps to duration', () => {\n const media = createMedia()\n Object.defineProperty(media, 'duration', { configurable: true, value: 10 })\n const player = new Player({ media })\n player.setTime(-1)\n expect(player.getCurrentTime()).toBe(0)\n player.setTime(11)\n expect(player.getCurrentTime()).toBe(10)\n })\n\n test('setSinkId uses media method', async () => {\n const media = createMedia()\n const player = new Player({ media })\n await player.setSinkId('id')\n expect(media.setSinkId).toHaveBeenCalledWith('id')\n })\n\n describe('reactive signals', () => {\n test('exposes isPlayingSignal', () => {\n const media = createMedia()\n const player = new Player({ media })\n expect(player.isPlayingSignal).toBeDefined()\n expect(player.isPlayingSignal.value).toBe(false)\n })\n\n test('exposes currentTimeSignal', () => {\n const media = createMedia()\n const player = new Player({ media })\n expect(player.currentTimeSignal).toBeDefined()\n expect(player.currentTimeSignal.value).toBe(0)\n })\n\n test('exposes durationSignal', () => {\n const media = createMedia()\n const player = new Player({ media })\n expect(player.durationSignal).toBeDefined()\n expect(typeof player.durationSignal.value).toBe('number')\n })\n\n test('exposes volumeSignal', () => {\n const media = createMedia()\n const player = new Player({ media })\n expect(player.volumeSignal).toBeDefined()\n expect(typeof player.volumeSignal.value).toBe('number')\n })\n\n test('exposes mutedSignal', () => {\n const media = createMedia()\n const player = new Player({ media })\n expect(player.mutedSignal).toBeDefined()\n expect(typeof player.mutedSignal.value).toBe('boolean')\n })\n\n test('exposes playbackRateSignal', () => {\n const media = createMedia()\n const player = new Player({ media })\n expect(player.playbackRateSignal).toBeDefined()\n expect(typeof player.playbackRateSignal.value).toBe('number')\n })\n\n test('exposes seekingSignal', () => {\n const media = createMedia()\n const player = new Player({ media })\n expect(player.seekingSignal).toBeDefined()\n expect(player.seekingSignal.value).toBe(false)\n })\n\n test('isPlayingSignal updates on play event', () => {\n const media = createMedia()\n const player = new Player({ media })\n expect(player.isPlayingSignal.value).toBe(false)\n media.dispatchEvent(new Event('play'))\n expect(player.isPlayingSignal.value).toBe(true)\n })\n\n test('isPlayingSignal updates on pause event', () => {\n const media = createMedia()\n const player = new Player({ media })\n media.dispatchEvent(new Event('play'))\n expect(player.isPlayingSignal.value).toBe(true)\n media.dispatchEvent(new Event('pause'))\n expect(player.isPlayingSignal.value).toBe(false)\n })\n\n test('isPlayingSignal updates on ended event', () => {\n const media = createMedia()\n const player = new Player({ media })\n media.dispatchEvent(new Event('play'))\n expect(player.isPlayingSignal.value).toBe(true)\n media.dispatchEvent(new Event('ended'))\n expect(player.isPlayingSignal.value).toBe(false)\n })\n\n test('currentTimeSignal updates on timeupdate event', () => {\n const media = createMedia()\n Object.defineProperty(media, 'currentTime', { configurable: true, value: 5.5, writable: true })\n const player = new Player({ media })\n expect(player.currentTimeSignal.value).toBe(0)\n media.dispatchEvent(new Event('timeupdate'))\n expect(player.currentTimeSignal.value).toBe(5.5)\n })\n\n test('durationSignal updates on durationchange event', () => {\n const media = createMedia()\n Object.defineProperty(media, 'duration', { configurable: true, value: 120.5, writable: true })\n const player = new Player({ media })\n media.dispatchEvent(new Event('durationchange'))\n expect(player.durationSignal.value).toBe(120.5)\n })\n\n test('seekingSignal updates on seeking and seeked events', () => {\n const media = createMedia()\n const player = new Player({ media })\n expect(player.seekingSignal.value).toBe(false)\n media.dispatchEvent(new Event('seeking'))\n expect(player.seekingSignal.value).toBe(true)\n media.dispatchEvent(new Event('seeked'))\n expect(player.seekingSignal.value).toBe(false)\n })\n\n test('volumeSignal and mutedSignal update on volumechange event', () => {\n const media = createMedia()\n const player = new Player({ media })\n Object.defineProperty(media, 'volume', { configurable: true, value: 0.7, writable: true })\n Object.defineProperty(media, 'muted', { configurable: true, value: true, writable: true })\n media.dispatchEvent(new Event('volumechange'))\n expect(player.volumeSignal.value).toBe(0.7)\n expect(player.mutedSignal.value).toBe(true)\n })\n\n test('playbackRateSignal updates on ratechange event', () => {\n const media = createMedia()\n const player = new Player({ media })\n Object.defineProperty(media, 'playbackRate', { configurable: true, value: 1.5, writable: true })\n media.dispatchEvent(new Event('ratechange'))\n expect(player.playbackRateSignal.value).toBe(1.5)\n })\n })\n})\n" }, { "path": "src/__tests__/regions.test.ts", "content": "import RegionsPlugin from '../plugins/regions.js'\n\ntype Listener = (...args: any[]) => void\n\nconst createEmitter = () => {\n const listeners = new Map>()\n\n return {\n on: jest.fn((event: string, listener: Listener) => {\n if (!listeners.has(event)) {\n listeners.set(event, new Set())\n }\n\n listeners.get(event)!.add(listener)\n return () => listeners.get(event)?.delete(listener)\n }),\n }\n}\n\nconst createWaveSurfer = (duration = 10, width = 100, scroll = 0) => {\n const emitter = createEmitter()\n const wrapper = document.createElement('div')\n document.body.appendChild(wrapper)\n\n return {\n ...emitter,\n getDecodedData: jest.fn(() => ({ numberOfChannels: 1 })),\n getDuration: jest.fn(() => duration),\n getScroll: jest.fn(() => scroll),\n getWidth: jest.fn(() => width),\n getWrapper: jest.fn(() => wrapper),\n }\n}\n\ndescribe('RegionsPlugin', () => {\n beforeEach(() => {\n jest.useFakeTimers()\n Object.defineProperty(window, 'matchMedia', {\n writable: true,\n value: jest.fn().mockImplementation((query) => ({\n matches: false,\n media: query,\n onchange: null,\n addListener: jest.fn(),\n removeListener: jest.fn(),\n addEventListener: jest.fn(),\n removeEventListener: jest.fn(),\n dispatchEvent: jest.fn(),\n })),\n })\n })\n\n afterEach(() => {\n jest.runOnlyPendingTimers()\n jest.useRealTimers()\n document.body.innerHTML = ''\n jest.clearAllMocks()\n })\n\n test('re-renders a lazily detached region when setOptions moves it into view', () => {\n const wavesurfer = createWaveSurfer()\n const plugin = RegionsPlugin.create()\n\n plugin._init(wavesurfer as any)\n\n const regionsContainer = wavesurfer.getWrapper().querySelector('[part=\"regions-container\"]')\n expect(regionsContainer).toBeTruthy()\n Object.defineProperty(regionsContainer, 'clientWidth', { configurable: true, value: 1000 })\n\n const region = plugin.addRegion({ start: 8, end: 9 })\n\n jest.runOnlyPendingTimers()\n\n expect(region.element?.parentElement).toBeNull()\n\n region.setOptions({ start: 0.5, end: 1.5 })\n\n expect(region.element?.parentElement).toBe(regionsContainer)\n expect(region.element?.style.left).toBe('5%')\n expect(region.element?.style.right).toBe('85%')\n\n region.setOptions({ start: 8, end: 9 })\n\n expect(region.element?.parentElement).toBeNull()\n })\n})\n" }, { "path": "src/__tests__/renderer-utils.test.ts", "content": "import {\n MAX_CANVAS_WIDTH,\n MAX_NODES,\n calculateBarHeights,\n calculateBarRenderConfig,\n calculateBarSegments,\n calculateLinePaths,\n calculateScrollPercentages,\n calculateSingleCanvasWidth,\n calculateVerticalScale,\n calculateWaveformLayout,\n clampToUnit,\n clampWidthToBarGrid,\n getLazyRenderRange,\n getPixelRatio,\n getRelativePointerPosition,\n resolveBarYPosition,\n resolveChannelHeight,\n resolveColorValue,\n shouldClearCanvases,\n shouldRenderBars,\n sliceChannelData,\n} from '../renderer-utils.js'\nimport type { WaveSurferOptions } from '../wavesurfer.js'\n\ndescribe('renderer-utils', () => {\n describe('clampToUnit', () => {\n it('clamps numbers to the [0, 1] range', () => {\n expect(clampToUnit(-0.5)).toBe(0)\n expect(clampToUnit(0.3)).toBe(0.3)\n expect(clampToUnit(1.8)).toBe(1)\n })\n })\n\n describe('calculateBarRenderConfig', () => {\n const options: WaveSurferOptions = {\n container: document.createElement('div'),\n barWidth: 2,\n barGap: 1,\n barRadius: 3,\n }\n\n it('derives spacing values and scaling information', () => {\n const config = calculateBarRenderConfig({\n width: 100,\n height: 50,\n length: 10,\n options,\n pixelRatio: 2,\n })\n\n expect(config).toEqual({\n halfHeight: 25,\n barWidth: 4,\n barGap: 2,\n barRadius: 3,\n barIndexScale: 100 / ((4 + 2) * 10),\n barSpacing: 6,\n barMinHeight: 0,\n })\n })\n })\n\n describe('calculateBarHeights', () => {\n it('returns rounded heights and ensures total height is at least 1', () => {\n expect(\n calculateBarHeights({\n maxTop: 0.5,\n maxBottom: 0.25,\n halfHeight: 20,\n vScale: 1,\n }),\n ).toEqual({ topHeight: 10, totalHeight: 15 })\n\n expect(\n calculateBarHeights({\n maxTop: 0,\n maxBottom: 0,\n halfHeight: 20,\n vScale: 1,\n }),\n ).toEqual({ topHeight: 0, totalHeight: 1 })\n })\n\n it('ensures total height is at least barMinHeight', () => {\n expect(\n calculateBarHeights({\n maxTop: 0,\n maxBottom: 0,\n halfHeight: 20,\n vScale: 1,\n barMinHeight: 10,\n }),\n ).toEqual({ topHeight: 5, totalHeight: 10 })\n\n expect(\n calculateBarHeights({\n maxTop: 0,\n maxBottom: 0,\n halfHeight: 20,\n vScale: 1,\n barMinHeight: 10,\n barAlign: 'top',\n }),\n ).toEqual({ topHeight: 0, totalHeight: 10 })\n })\n })\n\n describe('resolveBarYPosition', () => {\n const baseArgs = {\n halfHeight: 20,\n topHeight: 10,\n totalHeight: 20,\n canvasHeight: 40,\n }\n\n it('positions bars relative to alignment', () => {\n expect(\n resolveBarYPosition({\n barAlign: 'top',\n ...baseArgs,\n }),\n ).toBe(0)\n\n expect(\n resolveBarYPosition({\n barAlign: 'bottom',\n ...baseArgs,\n }),\n ).toBe(20)\n\n expect(\n resolveBarYPosition({\n barAlign: undefined,\n ...baseArgs,\n }),\n ).toBe(10)\n })\n })\n\n describe('calculateBarSegments', () => {\n const options: WaveSurferOptions = {\n container: document.createElement('div'),\n }\n\n it('aggregates bar segments across the channel data', () => {\n const { barIndexScale, barSpacing, barWidth, halfHeight } = calculateBarRenderConfig({\n width: 6,\n height: 20,\n length: 6,\n options,\n pixelRatio: 1,\n })\n const segments = calculateBarSegments({\n channelData: [\n new Float32Array([0.2, -0.4, 0.6, -0.8, 1, -1]),\n new Float32Array([0.1, -0.2, 0.3, -0.4, 0.5, -0.6]),\n ],\n barIndexScale,\n barSpacing,\n barWidth,\n halfHeight,\n vScale: 1,\n canvasHeight: 40,\n barAlign: undefined,\n barMinHeight: 0,\n })\n\n expect(segments).toEqual([\n { x: 0, y: 8, width: 1, height: 3 },\n { x: 1, y: 6, width: 1, height: 6 },\n { x: 2, y: 4, width: 1, height: 9 },\n { x: 3, y: 2, width: 1, height: 12 },\n { x: 4, y: 0, width: 1, height: 15 },\n { x: 5, y: 0, width: 1, height: 16 },\n ])\n })\n\n it('ensures bars are at least barMinHeight tall', () => {\n const height = 40\n const length = 10\n\n const { barIndexScale, barSpacing, barWidth, halfHeight } = calculateBarRenderConfig({\n width: 100,\n height,\n length,\n options,\n pixelRatio: 1,\n })\n\n const segments = calculateBarSegments({\n channelData: [\n new Float32Array(length).fill(0.001), // Very small values\n ],\n barIndexScale,\n barSpacing,\n barWidth,\n halfHeight,\n vScale: 1,\n canvasHeight: height / 2,\n barAlign: undefined,\n barMinHeight: 10,\n })\n\n expect(segments.length).toBeGreaterThan(0)\n expect(segments[0].height).toBe(10)\n expect(segments[0].y).toBe(15) // Centered: 20 - 10/2\n })\n })\n\n describe('getRelativePointerPosition', () => {\n it('returns pointer coordinates as relative offsets', () => {\n const rect = {\n left: 10,\n top: 20,\n width: 200,\n height: 100,\n } as DOMRect\n expect(getRelativePointerPosition(rect, 110, 70)).toEqual([0.5, 0.5])\n })\n })\n\n describe('resolveChannelHeight', () => {\n it('returns numeric height when provided', () => {\n expect(\n resolveChannelHeight({\n optionsHeight: 150,\n parentHeight: 0,\n numberOfChannels: 2,\n }),\n ).toBe(150)\n })\n\n it('splits height across channels when auto with overlays disabled', () => {\n const splitChannels: NonNullable = [{ overlay: false }, { overlay: false }]\n expect(\n resolveChannelHeight({\n optionsHeight: 'auto',\n optionsSplitChannels: splitChannels,\n parentHeight: 200,\n numberOfChannels: 2,\n }),\n ).toBe(100)\n })\n\n it('falls back to default height when invalid', () => {\n expect(\n resolveChannelHeight({\n optionsHeight: 'invalid' as never,\n parentHeight: 0,\n numberOfChannels: 2,\n defaultHeight: 75,\n }),\n ).toBe(75)\n })\n })\n\n describe('getPixelRatio', () => {\n it('never returns less than 1', () => {\n expect(getPixelRatio(undefined)).toBe(1)\n expect(getPixelRatio(0.5)).toBe(1)\n expect(getPixelRatio(2)).toBe(2)\n })\n })\n\n describe('shouldRenderBars', () => {\n const options: WaveSurferOptions = { container: document.createElement('div') }\n\n it('returns true when any bar option is configured', () => {\n expect(shouldRenderBars({ ...options, barWidth: 1 })).toBe(true)\n expect(shouldRenderBars({ ...options, barGap: 2 })).toBe(true)\n expect(shouldRenderBars({ ...options, barAlign: 'top' })).toBe(true)\n })\n\n it('returns false when bars are not configured', () => {\n expect(shouldRenderBars(options)).toBe(false)\n })\n })\n\n describe('resolveColorValue', () => {\n const canvas = document.createElement('canvas')\n\n let createLinearGradient: jest.Mock\n let addColorStop: jest.Mock\n\n beforeEach(() => {\n createLinearGradient = jest.fn(() => ({ addColorStop }))\n addColorStop = jest.fn()\n\n jest.spyOn(document, 'createElement').mockImplementation(() => canvas)\n jest\n .spyOn(canvas, 'getContext')\n .mockImplementation(() => ({ createLinearGradient }) as unknown as CanvasRenderingContext2D)\n })\n\n afterEach(() => {\n jest.restoreAllMocks()\n })\n\n it('returns string values unchanged', () => {\n expect(resolveColorValue('#000', 2)).toBe('#000')\n })\n\n it('falls back to default gray when gradient list is empty', () => {\n expect(resolveColorValue([], 2)).toBe('#999')\n })\n\n it('uses the single color when gradient list has one item', () => {\n expect(resolveColorValue(['#111'], 2)).toBe('#111')\n })\n\n it('creates a canvas gradient for multiple colors', () => {\n const gradient = resolveColorValue(['#000', '#fff'], 2) as { addColorStop: jest.Mock }\n expect(createLinearGradient).toHaveBeenCalledWith(0, 0, 0, 300)\n expect(addColorStop).toHaveBeenCalledTimes(2)\n expect(addColorStop).toHaveBeenNthCalledWith(1, 0, '#000')\n expect(addColorStop).toHaveBeenNthCalledWith(2, 1, '#fff')\n expect(gradient.addColorStop).toBe(addColorStop)\n })\n })\n\n describe('calculateWaveformLayout', () => {\n const baseArgs = {\n duration: 2,\n parentWidth: 300,\n pixelRatio: 1,\n }\n\n it('uses parent width when not scrollable and fillParent is true', () => {\n expect(calculateWaveformLayout({ ...baseArgs, minPxPerSec: 10, fillParent: true })).toEqual({\n scrollWidth: 20,\n isScrollable: false,\n useParentWidth: true,\n width: 300,\n })\n })\n\n it('uses scroll width when waveform exceeds parent width', () => {\n expect(calculateWaveformLayout({ ...baseArgs, minPxPerSec: 500, fillParent: true })).toEqual({\n scrollWidth: 1000,\n isScrollable: true,\n useParentWidth: false,\n width: 1000,\n })\n })\n })\n\n describe('clampWidthToBarGrid', () => {\n const options: WaveSurferOptions = { container: document.createElement('div'), barWidth: 2, barGap: 1 }\n\n it('returns original width when bars are disabled', () => {\n expect(clampWidthToBarGrid(123, { container: document.createElement('div') })).toBe(123)\n })\n\n it('clamps width down to align with bar grid spacing', () => {\n expect(clampWidthToBarGrid(10, options)).toBe(9)\n })\n })\n\n describe('calculateSingleCanvasWidth', () => {\n const options: WaveSurferOptions = { container: document.createElement('div'), barWidth: 2, barGap: 1 }\n\n it('limits width by canvas cap, client size, and total width', () => {\n expect(\n calculateSingleCanvasWidth({\n clientWidth: 9000,\n totalWidth: 5000,\n options,\n }),\n ).toBe(clampWidthToBarGrid(Math.min(MAX_CANVAS_WIDTH, 5000), options))\n })\n })\n\n describe('sliceChannelData', () => {\n it('returns proportional slices based on offset and width', () => {\n const channel = new Float32Array([1, 2, 3, 4, 5, 6, 7, 8])\n const slices = sliceChannelData({\n channelData: [channel, channel],\n offset: 100,\n clampedWidth: 50,\n totalWidth: 200,\n })\n\n expect(slices[0]).toEqual(new Float32Array([5, 6]))\n expect(slices[1]).toEqual(new Float32Array([5, 6]))\n })\n })\n\n describe('shouldClearCanvases', () => {\n it('clears when exceeding maximum nodes', () => {\n expect(shouldClearCanvases(MAX_NODES)).toBe(false)\n expect(shouldClearCanvases(MAX_NODES + 1)).toBe(true)\n })\n })\n\n describe('getLazyRenderRange', () => {\n it('returns surrounding canvas indices', () => {\n expect(\n getLazyRenderRange({\n scrollLeft: 50,\n totalWidth: 200,\n numCanvases: 5,\n }),\n ).toEqual([0, 1, 2])\n })\n\n it('defaults to the first canvas when width is zero', () => {\n expect(getLazyRenderRange({ scrollLeft: 0, totalWidth: 0, numCanvases: 3 })).toEqual([0])\n })\n })\n\n describe('calculateVerticalScale', () => {\n it('returns base scale when not normalizing', () => {\n expect(\n calculateVerticalScale({\n channelData: [new Float32Array([0.5])],\n barHeight: 2,\n normalize: false,\n }),\n ).toBe(2)\n })\n\n it('normalizes against the maximum magnitude when requested', () => {\n expect(\n calculateVerticalScale({\n channelData: [new Float32Array([0.25, -0.5])],\n barHeight: 2,\n normalize: true,\n }),\n ).toBe(4)\n })\n })\n\n describe('calculateLinePaths', () => {\n it('produces symmetrical paths for mirrored channel data', () => {\n const [topPath, bottomPath] = calculateLinePaths({\n channelData: [new Float32Array([0, 0.5, 1]), new Float32Array([0, 0.25, 0.75])],\n width: 6,\n height: 8,\n vScale: 1,\n })\n\n expect(topPath[0]).toEqual({ x: 0, y: 4 })\n expect(topPath[topPath.length - 1]).toEqual({ x: 6, y: 4 })\n expect(bottomPath[0]).toEqual({ x: 0, y: 4 })\n expect(bottomPath[bottomPath.length - 1]).toEqual({ x: 6, y: 4 })\n expect(topPath).toEqual([\n { x: 0, y: 4 },\n { x: 0, y: 3 },\n { x: 2, y: 2 },\n { x: 4, y: 0 },\n { x: 6, y: 4 },\n ])\n expect(bottomPath).toEqual([\n { x: 0, y: 4 },\n { x: 0, y: 5 },\n { x: 2, y: 5 },\n { x: 4, y: 7 },\n { x: 6, y: 4 },\n ])\n })\n })\n\n describe('calculateScrollPercentages', () => {\n it('returns full range when scroll width is zero', () => {\n expect(\n calculateScrollPercentages({\n scrollLeft: 0,\n clientWidth: 100,\n scrollWidth: 0,\n }),\n ).toEqual({ startX: 0, endX: 1 })\n })\n\n it('returns start and end ratios relative to scroll width', () => {\n expect(\n calculateScrollPercentages({\n scrollLeft: 50,\n clientWidth: 100,\n scrollWidth: 400,\n }),\n ).toEqual({ startX: 0.125, endX: 0.375 })\n })\n\n it('clamps values to 0-1 range', () => {\n expect(\n calculateScrollPercentages({\n scrollLeft: -10,\n clientWidth: 100,\n scrollWidth: 400,\n }),\n ).toEqual({ startX: 0, endX: 0.225 })\n })\n })\n})\n" }, { "path": "src/__tests__/renderer.test.ts", "content": "import Renderer from '../renderer.js'\n\ndeclare global {\n interface Window {\n HTMLCanvasElement: typeof HTMLCanvasElement\n }\n}\n\nconst createAudioBuffer = (channels: number[][], duration = 1): AudioBuffer => {\n return {\n duration,\n length: channels[0].length,\n sampleRate: channels[0].length / duration,\n numberOfChannels: channels.length,\n getChannelData: (i: number) => Float32Array.from(channels[i]),\n copyFromChannel: jest.fn(),\n copyToChannel: jest.fn(),\n } as unknown as AudioBuffer\n}\n\ndescribe('Renderer', () => {\n let container: HTMLDivElement\n let renderer: Renderer\n const originalGetContext = window.HTMLCanvasElement.prototype.getContext\n const originalToDataURL = window.HTMLCanvasElement.prototype.toDataURL\n const originalToBlob = window.HTMLCanvasElement.prototype.toBlob\n\n beforeAll(() => {\n Object.defineProperty(window, 'devicePixelRatio', { value: 1, writable: true })\n\n window.HTMLCanvasElement.prototype.getContext = jest.fn(() => ({\n beginPath: jest.fn(),\n rect: jest.fn(),\n roundRect: jest.fn(),\n moveTo: jest.fn(),\n lineTo: jest.fn(),\n closePath: jest.fn(),\n fill: jest.fn(),\n drawImage: jest.fn(),\n fillRect: jest.fn(),\n createLinearGradient: jest.fn(() => ({ addColorStop: jest.fn() })),\n globalCompositeOperation: '',\n canvas: { width: 100, height: 100 },\n })) as any\n\n window.HTMLCanvasElement.prototype.toDataURL = jest.fn(() => 'data:mock')\n window.HTMLCanvasElement.prototype.toBlob = jest.fn((cb) => cb(new Blob([''])))\n })\n\n afterAll(() => {\n window.HTMLCanvasElement.prototype.getContext = originalGetContext\n window.HTMLCanvasElement.prototype.toDataURL = originalToDataURL\n window.HTMLCanvasElement.prototype.toBlob = originalToBlob\n })\n\n beforeEach(() => {\n container = document.createElement('div')\n container.id = 'root'\n document.body.appendChild(container)\n renderer = new Renderer({ container })\n })\n\n afterEach(() => {\n renderer.destroy()\n container.remove()\n jest.clearAllMocks()\n })\n\n test('parentFromOptionsContainer returns element and throws', () => {\n expect((renderer as any).parentFromOptionsContainer(container)).toBe(container)\n expect((renderer as any).parentFromOptionsContainer('#root')).toBe(container)\n expect(() => (renderer as any).parentFromOptionsContainer('#missing')).toThrow()\n })\n\n test('initHtml creates shadow root', () => {\n const [el, shadow] = (renderer as any).initHtml()\n expect(el.shadowRoot).toBe(shadow)\n expect(shadow.querySelector('.scroll')).not.toBeNull()\n })\n\n test('getHeight calculates values', () => {\n ;(renderer as any).audioData = { numberOfChannels: 2 }\n expect((renderer as any).getHeight(undefined, undefined)).toBe(128)\n expect((renderer as any).getHeight(50, undefined)).toBe(50)\n container.style.height = '200px'\n expect((renderer as any).getHeight('auto', [{ overlay: false }])).toBe(64)\n })\n\n test('createDelay resolves after time', async () => {\n jest.useFakeTimers()\n const delay = (renderer as any).createDelay(10)\n const spy = jest.fn()\n const p = delay().then(spy)\n jest.advanceTimersByTime(10)\n await p\n expect(spy).toHaveBeenCalled()\n jest.useRealTimers()\n })\n\n test('convertColorValues supports gradients', () => {\n const result = (renderer as any).convertColorValues(['red', 'blue'])\n expect(typeof result).toBe('object')\n expect((renderer as any).convertColorValues('red')).toBe('red')\n })\n\n test('getPixelRatio returns positive', () => {\n window.devicePixelRatio = 2\n expect((renderer as any).getPixelRatio()).toBe(2)\n })\n\n test('renderBarWaveform and renderLineWaveform draw on context', () => {\n const ctx = (renderer as any).canvasWrapper.ownerDocument.createElement('canvas').getContext('2d') as any\n const data = [new Float32Array([0, 0.5, -0.5]), new Float32Array([0, -0.5, 0.5])]\n ;(renderer as any).renderBarWaveform(data, {}, ctx, 1)\n expect(ctx.beginPath).toHaveBeenCalled()\n ;(renderer as any).renderLineWaveform(data, {}, ctx, 1)\n expect(ctx.lineTo).toHaveBeenCalled()\n })\n\n test('renderWaveform chooses rendering path', () => {\n const ctx = document.createElement('canvas').getContext('2d') as any\n const data = [new Float32Array([0, 1])]\n const spyBar = jest.spyOn(renderer as any, 'renderBarWaveform')\n const spyLine = jest.spyOn(renderer as any, 'renderLineWaveform')\n ;(renderer as any).renderWaveform(data, { barWidth: 1 }, ctx)\n expect(spyBar).toHaveBeenCalled()\n ;(renderer as any).renderWaveform(data, {}, ctx)\n expect(spyLine).toHaveBeenCalled()\n })\n\n test('renderSingleCanvas appends canvases', () => {\n const canvasContainer = document.createElement('div')\n const progressContainer = document.createElement('div')\n const data = [new Float32Array([0, 1])]\n ;(renderer as any).renderSingleCanvas(data, {}, 10, 10, 0, canvasContainer, progressContainer)\n expect(canvasContainer.querySelector('canvas')).not.toBeNull()\n expect(progressContainer.querySelector('canvas')).not.toBeNull()\n })\n\n test('renderMultiCanvas draws and subscribes', () => {\n const canvasContainer = document.createElement('div')\n const progressContainer = document.createElement('div')\n const data = [new Float32Array([0, 1])] as any\n Object.defineProperty((renderer as any).scrollContainer, 'clientWidth', { configurable: true, value: 200 })\n ;(renderer as any).renderMultiCanvas(data, { barWidth: 1 }, 200, 10, canvasContainer, progressContainer)\n expect(canvasContainer.querySelector('canvas')).not.toBeNull()\n })\n\n test('renderChannel creates containers', () => {\n const data = [new Float32Array([0, 1])]\n ;(renderer as any).renderChannel(data, {}, 10, 0)\n expect((renderer as any).canvasWrapper.children.length).toBeGreaterThan(0)\n })\n\n test('render processes audio buffer', async () => {\n const buffer = createAudioBuffer([[0, 0.5, -0.5]])\n const spy = jest.fn()\n renderer.on('render', spy)\n await renderer.render(buffer)\n expect(spy).toHaveBeenCalled()\n })\n\n test('reRender keeps scroll position', async () => {\n const buffer = createAudioBuffer([[0, 0.5, -0.5]])\n await renderer.render(buffer)\n renderer.setScroll(10)\n renderer.reRender()\n expect(renderer.getScroll()).toBe(10)\n })\n\n test('zoom updates option', () => {\n renderer.zoom(20)\n expect((renderer as any).options.minPxPerSec).toBe(20)\n })\n\n test('scrollIntoView updates scroll', () => {\n Object.defineProperty((renderer as any).scrollContainer, 'scrollWidth', { configurable: true, value: 100 })\n Object.defineProperty((renderer as any).scrollContainer, 'clientWidth', { configurable: true, value: 50 })\n renderer.renderProgress(0)\n ;(renderer as any).scrollIntoView(0.8)\n expect(renderer.getScroll()).toBeGreaterThanOrEqual(0)\n })\n\n test('renderProgress clamps only at low zoom when auto-centering', () => {\n ;(renderer as any).options.autoScroll = true\n ;(renderer as any).options.autoCenter = true\n ;(renderer as any).isScrollable = true\n\n const viewportWidth = 100\n const lowZoomDuration = 2\n const lowZoomScrollWidth = 200\n const highZoomDuration = 1\n const highZoomScrollWidth = 800\n\n Object.defineProperty((renderer as any).scrollContainer, 'clientWidth', {\n configurable: true,\n value: viewportWidth,\n })\n ;(renderer as any).audioData = { duration: lowZoomDuration }\n Object.defineProperty((renderer as any).scrollContainer, 'scrollWidth', {\n configurable: true,\n value: lowZoomScrollWidth,\n })\n renderer.setScroll(0)\n renderer.renderProgress(0.35, true)\n // 200 / 2 = 100 px/s, so low zoom keeps Math.min(20, 10) = 10\n expect(renderer.getScroll()).toBe(10)\n ;(renderer as any).audioData = { duration: highZoomDuration }\n Object.defineProperty((renderer as any).scrollContainer, 'scrollWidth', {\n configurable: true,\n value: highZoomScrollWidth,\n })\n renderer.setScroll(0)\n renderer.renderProgress(0.0875, true)\n // 800 / 1 = 800 px/s, so high zoom applies no clamp and scrolls by the full center offset\n expect(renderer.getScroll()).toBe(20)\n })\n\n test('renderProgress updates styles', () => {\n renderer.renderProgress(0.5)\n expect((renderer as any).progressWrapper.style.width).toBe('50%')\n })\n\n test('exportImage returns data', async () => {\n const canvas = document.createElement('canvas')\n ;(renderer as any).canvasWrapper.appendChild(canvas)\n const urls = await renderer.exportImage('image/png', 1, 'dataURL')\n expect(urls).toHaveLength(1)\n const blobs = await renderer.exportImage('image/png', 1, 'blob')\n expect(blobs).toHaveLength(1)\n })\n\n test('destroy cleans up', () => {\n renderer.destroy()\n expect(container.contains(renderer.getWrapper())).toBe(false)\n })\n})\n" }, { "path": "src/__tests__/timeline.test.ts", "content": "import TimelinePlugin from '../plugins/timeline.js'\nimport { signal } from '../reactive/store.js'\n\ntype Listener = (...args: any[]) => void\n\nconst createEmitter = () => {\n const listeners = new Map>()\n\n return {\n on: jest.fn((event: string, listener: Listener) => {\n if (!listeners.has(event)) {\n listeners.set(event, new Set())\n }\n\n listeners.get(event)!.add(listener)\n return () => listeners.get(event)?.delete(listener)\n }),\n }\n}\n\nconst createWaveSurfer = (duration = 1, scrollWidth = 100) => {\n const emitter = createEmitter()\n const durationSignal = signal(duration)\n const wrapper = document.createElement('div')\n\n Object.defineProperty(wrapper, 'scrollWidth', { configurable: true, value: scrollWidth })\n document.body.appendChild(wrapper)\n\n return {\n ...emitter,\n getDuration: jest.fn(() => duration),\n getScroll: jest.fn(() => 0),\n getState: jest.fn(() => ({ duration: durationSignal })),\n getWidth: jest.fn(() => scrollWidth * 2),\n getWrapper: jest.fn(() => wrapper),\n }\n}\n\ndescribe('TimelinePlugin', () => {\n afterEach(() => {\n document.body.innerHTML = ''\n jest.clearAllMocks()\n })\n\n test('preserves high precision offsets for notch positions', () => {\n const wavesurfer = createWaveSurfer(1, 100)\n const plugin = TimelinePlugin.create({\n duration: 1,\n timeInterval: 0.333,\n timeOffset: 0.001,\n primaryLabelInterval: 10,\n secondaryLabelInterval: 10,\n })\n\n plugin._init(wavesurfer as any)\n\n const notches = wavesurfer.getWrapper().querySelectorAll('[part^=\"timeline-notch\"]')\n expect(notches).toHaveLength(4)\n const offsets = Array.from(notches, (notch) => parseFloat(notch.style.left))\n\n expect(offsets[0]).toBeCloseTo(0.1)\n expect(offsets[1]).toBeCloseTo(33.4)\n expect(offsets[2]).toBeCloseTo(66.7)\n expect(offsets[3]).toBeCloseTo(100)\n })\n})\n" }, { "path": "src/__tests__/timer.test.ts", "content": "import Timer from '../timer.js'\n\ndescribe('Timer', () => {\n test('start schedules ticks', () => {\n const timer = new Timer()\n const tick = jest.fn()\n timer.on('tick', tick)\n const raf = jest\n .fn()\n .mockImplementationOnce((cb: FrameRequestCallback) => {\n cb(0)\n return 1\n })\n .mockImplementation(() => 1)\n global.requestAnimationFrame = raf\n timer.start()\n expect(tick).toHaveBeenCalledTimes(2)\n })\n})\n" }, { "path": "src/__tests__/wavesurfer.test.ts", "content": "jest.mock('../renderer.js', () => {\n let lastInstance: any\n class Renderer {\n options: any\n wrapper = document.createElement('div')\n renderProgress = jest.fn()\n on = jest.fn(() => () => undefined)\n setOptions = jest.fn()\n getWrapper = jest.fn(() => this.wrapper)\n getWidth = jest.fn(() => 100)\n getScroll = jest.fn(() => 0)\n setScroll = jest.fn()\n setScrollPercentage = jest.fn()\n render = jest.fn()\n zoom = jest.fn()\n exportImage = jest.fn(() => [])\n destroy = jest.fn()\n constructor(options: any) {\n this.options = options\n lastInstance = this\n }\n }\n return { __esModule: true, default: Renderer, getLastInstance: () => lastInstance }\n})\n\njest.mock('../timer.js', () => {\n let lastInstance: any\n class Timer {\n on = jest.fn(() => () => undefined)\n start = jest.fn()\n stop = jest.fn()\n destroy = jest.fn()\n }\n const ctor = jest.fn(() => {\n lastInstance = new Timer()\n return lastInstance\n })\n return { __esModule: true, default: ctor, getLastInstance: () => lastInstance }\n})\n\njest.mock('../decoder.js', () => {\n const createBuffer = jest.fn((data: any[], duration: number) => ({\n duration,\n numberOfChannels: data.length,\n getChannelData: (i: number) => Float32Array.from(data[i] as number[]),\n }))\n return { __esModule: true, default: { decode: jest.fn(), createBuffer } }\n})\nimport WaveSurfer from '../wavesurfer.js'\nimport { BasePlugin } from '../base-plugin.js'\nimport * as RendererModule from '../renderer.js'\nimport * as TimerModule from '../timer.js'\nconst getRenderer = (RendererModule as any).getLastInstance as () => any\nconst getTimer = (TimerModule as any).getLastInstance as () => any\n\nconst createMedia = () => {\n const media = document.createElement('audio') as HTMLMediaElement & { play: jest.Mock; pause: jest.Mock }\n media.play = jest.fn().mockResolvedValue(undefined)\n media.pause = jest.fn()\n Object.defineProperty(media, 'duration', { configurable: true, value: 100, writable: true })\n return media\n}\n\nconst createWs = (opts: any = {}) => {\n const container = document.createElement('div')\n return WaveSurfer.create({ container, media: createMedia(), ...opts })\n}\n\nafterEach(() => {\n jest.clearAllMocks()\n})\n\ndescribe('WaveSurfer public methods', () => {\n test('create returns instance', () => {\n const ws = createWs()\n expect(ws).toBeInstanceOf(WaveSurfer)\n })\n\n test('setOptions merges options and updates renderer', () => {\n const ws = createWs()\n ws.setOptions({ height: 200, audioRate: 2, mediaControls: true })\n const renderer = getRenderer()\n expect(ws.options.height).toBe(200)\n expect(renderer.setOptions).toHaveBeenCalledWith(ws.options)\n expect(ws.getPlaybackRate()).toBe(2)\n expect(ws.getMediaElement().controls).toBe(true)\n })\n\n test('registerPlugin adds and removes plugin', () => {\n const ws = createWs()\n class TestPlugin extends BasePlugin<{ destroy: [] }, {}> {}\n const plugin = new TestPlugin({})\n ws.registerPlugin(plugin)\n expect(ws.getActivePlugins()).toContain(plugin)\n plugin.destroy()\n expect(ws.getActivePlugins()).not.toContain(plugin)\n })\n\n test('wrapper and scroll helpers call renderer', () => {\n const ws = createWs()\n const renderer = getRenderer()\n ws.getWrapper()\n expect(renderer.getWrapper).toHaveBeenCalled()\n ws.getWidth()\n expect(renderer.getWidth).toHaveBeenCalled()\n ws.getScroll()\n expect(renderer.getScroll).toHaveBeenCalled()\n ws.setScroll(42)\n expect(renderer.setScroll).toHaveBeenCalledWith(42)\n jest.spyOn(ws, 'getDuration').mockReturnValue(10)\n ws.setScrollTime(5)\n expect(renderer.setScrollPercentage).toHaveBeenCalledWith(0.5)\n })\n\n test('load and loadBlob call loadAudio', async () => {\n const ws = createWs()\n const spy = jest.spyOn(ws as any, 'loadAudio').mockResolvedValue(undefined)\n await ws.load('url')\n expect(spy).toHaveBeenCalledWith('url', undefined, undefined, undefined)\n const blob = new Blob([])\n await ws.loadBlob(blob)\n expect(spy).toHaveBeenCalledWith('', blob, undefined, undefined)\n })\n\n test('zoom requires decoded data', () => {\n const ws = createWs()\n expect(() => ws.zoom(10)).toThrow()\n ;(ws as any).decodedData = { duration: 1 }\n ws.zoom(10)\n expect(getRenderer().zoom).toHaveBeenCalledWith(10)\n })\n\n test('getDecodedData returns buffer', () => {\n const ws = createWs()\n ;(ws as any).decodedData = 123 as any\n expect(ws.getDecodedData()).toBe(123)\n })\n\n test('exportPeaks reads data from buffer', () => {\n const ws = createWs()\n ;(ws as any).decodedData = {\n numberOfChannels: 1,\n getChannelData: () => new Float32Array([0, 1, -1]),\n duration: 3,\n }\n const peaks = ws.exportPeaks({ maxLength: 3, precision: 100 })\n expect(peaks[0]).toEqual([0, 1, -1])\n })\n\n test('getDuration falls back to decoded data', () => {\n const ws = createWs()\n const media = ws.getMediaElement()\n Object.defineProperty(media, 'duration', { configurable: true, value: Infinity })\n ;(ws as any).decodedData = { duration: 2 }\n expect(ws.getDuration()).toBe(2)\n })\n\n test('toggleInteraction sets option', () => {\n const ws = createWs()\n ws.toggleInteraction(false)\n expect(ws.options.interact).toBe(false)\n })\n\n test('setTime updates progress and emits event', () => {\n const ws = createWs()\n const spy = jest.fn()\n ws.on('timeupdate', spy)\n ws.setTime(1)\n expect(spy).toHaveBeenCalledWith(1)\n expect(getRenderer().renderProgress).toHaveBeenCalled()\n })\n\n test('seekTo calculates correct time', () => {\n const ws = createWs()\n jest.spyOn(ws, 'getDuration').mockReturnValue(10)\n const setTimeSpy = jest.spyOn(ws, 'setTime')\n ws.seekTo(0.5)\n expect(setTimeSpy).toHaveBeenCalledWith(5)\n })\n\n test('play sets start and end', async () => {\n const ws = createWs()\n const spy = jest.spyOn(ws, 'setTime')\n await ws.play(2, 4)\n expect(spy).toHaveBeenCalledWith(2)\n expect((ws as any).stopAtPosition).toBe(4)\n })\n\n test('playPause toggles play and pause', async () => {\n const ws = createWs()\n const media = ws.getMediaElement()\n await ws.playPause()\n expect(media.play).toHaveBeenCalled()\n Object.defineProperty(media, 'paused', { configurable: true, value: false })\n await ws.playPause()\n expect(media.pause).toHaveBeenCalled()\n })\n\n test('stop resets time', () => {\n const ws = createWs()\n ws.setTime(5)\n ws.stop()\n expect(ws.getCurrentTime()).toBe(0)\n })\n\n test('skip and empty', () => {\n const ws = createWs()\n ws.getMediaElement().currentTime = 1\n const spy = jest.spyOn(ws, 'setTime')\n ws.skip(2)\n expect(spy).toHaveBeenCalledWith(3)\n const loadSpy = jest.spyOn(ws, 'load').mockResolvedValue(undefined)\n ws.empty()\n expect(loadSpy).toHaveBeenCalledWith('', [[0]], 0.001)\n })\n\n test('setMediaElement reinitializes events', () => {\n const ws = createWs()\n const unsub = jest.spyOn(ws as any, 'unsubscribePlayerEvents')\n const init = jest.spyOn(ws as any, 'initPlayerEvents')\n const el = createMedia()\n ws.setMediaElement(el)\n expect(unsub).toHaveBeenCalled()\n expect(init).toHaveBeenCalled()\n expect(ws.getMediaElement()).toBe(el)\n })\n\n test('exportImage uses renderer', async () => {\n const ws = createWs()\n await ws.exportImage('image/png', 1, 'dataURL')\n expect(getRenderer().exportImage).toHaveBeenCalled()\n })\n\n test('destroy cleans up renderer and timer', () => {\n const ws = createWs()\n ws.destroy()\n expect(getRenderer().destroy).toHaveBeenCalled()\n expect(getTimer().destroy).toHaveBeenCalled()\n })\n})\n" }, { "path": "src/base-plugin.ts", "content": "import EventEmitter from './event-emitter.js'\nimport type WaveSurfer from './wavesurfer.js'\n\nexport type BasePluginEvents = {\n destroy: []\n}\n\nexport type GenericPlugin = BasePlugin\n\n/** Base class for wavesurfer plugins */\nexport class BasePlugin extends EventEmitter {\n protected wavesurfer?: WaveSurfer\n protected subscriptions: (() => void)[] = []\n protected options: Options\n private isDestroyed = false\n\n /** Create a plugin instance */\n constructor(options: Options) {\n super()\n this.options = options\n }\n\n /** Called after this.wavesurfer is available */\n protected onInit() {\n return\n }\n\n /** Do not call directly, only called by WavesSurfer internally */\n public _init(wavesurfer: WaveSurfer) {\n // Reset state if plugin was previously destroyed\n if (this.isDestroyed) {\n this.subscriptions = []\n this.isDestroyed = false\n }\n\n this.wavesurfer = wavesurfer\n this.onInit()\n }\n\n /** Destroy the plugin and unsubscribe from all events */\n public destroy() {\n this.emit('destroy')\n this.subscriptions.forEach((unsubscribe) => unsubscribe())\n this.subscriptions = []\n this.isDestroyed = true\n this.wavesurfer = undefined\n }\n}\n\nexport default BasePlugin\n" }, { "path": "src/decoder.ts", "content": "/** Decode an array buffer into an audio buffer */\nasync function decode(audioData: ArrayBuffer, sampleRate: number): Promise {\n const audioCtx = new AudioContext({ sampleRate })\n try {\n return await audioCtx.decodeAudioData(audioData)\n } finally {\n // Ensure AudioContext is always closed, even on synchronous errors\n audioCtx.close()\n }\n}\n\n/** Normalize peaks to -1..1 */\nfunction normalize>(channelData: T): T {\n const firstChannel = channelData[0]\n if (firstChannel.some((n) => n > 1 || n < -1)) {\n const length = firstChannel.length\n let max = 0\n for (let i = 0; i < length; i++) {\n const absN = Math.abs(firstChannel[i])\n if (absN > max) max = absN\n }\n for (const channel of channelData) {\n for (let i = 0; i < length; i++) {\n channel[i] /= max\n }\n }\n }\n return channelData\n}\n\n/** Create an audio buffer from pre-decoded audio data */\nfunction createBuffer(channelData: Array, duration: number): AudioBuffer {\n // Validate inputs\n if (!channelData || channelData.length === 0) {\n throw new Error('channelData must be a non-empty array')\n }\n if (duration <= 0) {\n throw new Error('duration must be greater than 0')\n }\n\n // If a single array of numbers is passed, make it an array of arrays\n if (typeof channelData[0] === 'number') channelData = [channelData as unknown as number[]]\n\n // Validate channel data after conversion\n if (!channelData[0] || channelData[0].length === 0) {\n throw new Error('channelData must contain non-empty channel arrays')\n }\n\n // Normalize to -1..1\n normalize(channelData)\n\n // Convert to Float32Array for consistency\n const float32Channels = channelData.map((channel) =>\n channel instanceof Float32Array ? channel : Float32Array.from(channel),\n )\n\n return {\n duration,\n length: float32Channels[0].length,\n sampleRate: float32Channels[0].length / duration,\n numberOfChannels: float32Channels.length,\n getChannelData: (i: number) => {\n const channel = float32Channels[i]\n if (!channel) {\n throw new Error(`Channel ${i} not found`)\n }\n return channel\n },\n copyFromChannel: AudioBuffer.prototype.copyFromChannel,\n copyToChannel: AudioBuffer.prototype.copyToChannel,\n } as AudioBuffer\n}\n\nconst Decoder = {\n decode,\n createBuffer,\n}\n\nexport default Decoder\n" }, { "path": "src/dom.ts", "content": "type TreeNode = { [key: string]: string | number | boolean | CSSStyleDeclaration | TreeNode | Node } & {\n xmlns?: string\n style?: Partial\n textContent?: string | Node\n children?: TreeNode\n}\n\nfunction renderNode(tagName: string, content: TreeNode): HTMLElement | SVGElement {\n const element = content.xmlns\n ? (document.createElementNS(content.xmlns, tagName) as SVGElement)\n : (document.createElement(tagName) as HTMLElement)\n\n for (const [key, value] of Object.entries(content)) {\n if (key === 'children' && value) {\n for (const [childTag, childValue] of Object.entries(value as TreeNode)) {\n if (childValue instanceof Node) {\n element.appendChild(childValue)\n } else if (typeof childValue === 'string') {\n element.appendChild(document.createTextNode(childValue))\n } else {\n element.appendChild(renderNode(childTag, childValue as TreeNode))\n }\n }\n } else if (key === 'style') {\n Object.assign((element as HTMLElement).style, value)\n } else if (key === 'textContent') {\n element.textContent = value as string\n } else {\n element.setAttribute(key, value.toString())\n }\n }\n\n return element\n}\n\nexport function createElement(tagName: string, content: TreeNode & { xmlns: string }, container?: Node): SVGElement\nexport function createElement(tagName: string, content?: TreeNode, container?: Node): HTMLElement\nexport function createElement(tagName: string, content?: TreeNode, container?: Node): HTMLElement | SVGElement {\n const el = renderNode(tagName, content || {})\n container?.appendChild(el)\n return el\n}\n\nexport default createElement\n" }, { "path": "src/draggable.ts", "content": "/**\n * @deprecated Use createDragStream from './reactive/drag-stream.js' instead.\n * This function is maintained for backward compatibility but will be removed in a future version.\n */\nexport function makeDraggable(\n element: HTMLElement | null,\n onDrag: (dx: number, dy: number, x: number, y: number) => void,\n onStart?: (x: number, y: number) => void,\n onEnd?: (x: number, y: number) => void,\n threshold = 3,\n mouseButton = 0,\n touchDelay = 100,\n): () => void {\n if (!element) return () => void 0\n\n const activePointers = new Map()\n const isTouchDevice = matchMedia('(pointer: coarse)').matches\n\n let unsubscribeDocument = () => void 0\n\n const onPointerDown = (event: PointerEvent) => {\n if (event.button !== mouseButton) return\n\n activePointers.set(event.pointerId, event)\n if (activePointers.size > 1) {\n return\n }\n\n let startX = event.clientX\n let startY = event.clientY\n let isDragging = false\n const touchStartTime = Date.now()\n\n const onPointerMove = (event: PointerEvent) => {\n if (event.defaultPrevented || activePointers.size > 1) {\n return\n }\n\n if (isTouchDevice && Date.now() - touchStartTime < touchDelay) return\n\n const x = event.clientX\n const y = event.clientY\n const dx = x - startX\n const dy = y - startY\n\n if (isDragging || Math.abs(dx) > threshold || Math.abs(dy) > threshold) {\n event.preventDefault()\n event.stopPropagation()\n\n const rect = element.getBoundingClientRect()\n const { left, top } = rect\n\n if (!isDragging) {\n onStart?.(startX - left, startY - top)\n isDragging = true\n }\n\n onDrag(dx, dy, x - left, y - top)\n\n startX = x\n startY = y\n }\n }\n\n const onPointerUp = (event: PointerEvent) => {\n activePointers.delete(event.pointerId)\n if (isDragging) {\n const x = event.clientX\n const y = event.clientY\n const rect = element.getBoundingClientRect()\n const { left, top } = rect\n\n onEnd?.(x - left, y - top)\n }\n unsubscribeDocument()\n }\n\n const onPointerLeave = (e: PointerEvent) => {\n activePointers.delete(e.pointerId)\n if (!e.relatedTarget || e.relatedTarget === document.documentElement) {\n onPointerUp(e)\n }\n }\n\n const onClick = (event: MouseEvent) => {\n if (isDragging) {\n event.stopPropagation()\n event.preventDefault()\n }\n }\n\n const onTouchMove = (event: TouchEvent) => {\n if (event.defaultPrevented || activePointers.size > 1) {\n return\n }\n if (isDragging) {\n event.preventDefault()\n }\n }\n\n document.addEventListener('pointermove', onPointerMove)\n document.addEventListener('pointerup', onPointerUp)\n document.addEventListener('pointerout', onPointerLeave)\n document.addEventListener('pointercancel', onPointerLeave)\n document.addEventListener('touchmove', onTouchMove, { passive: false })\n document.addEventListener('click', onClick, { capture: true })\n\n unsubscribeDocument = () => {\n document.removeEventListener('pointermove', onPointerMove)\n document.removeEventListener('pointerup', onPointerUp)\n document.removeEventListener('pointerout', onPointerLeave)\n document.removeEventListener('pointercancel', onPointerLeave)\n document.removeEventListener('touchmove', onTouchMove)\n setTimeout(() => {\n document.removeEventListener('click', onClick, { capture: true })\n }, 10)\n }\n }\n\n element.addEventListener('pointerdown', onPointerDown)\n\n return () => {\n unsubscribeDocument()\n element.removeEventListener('pointerdown', onPointerDown)\n activePointers.clear()\n }\n}\n" }, { "path": "src/event-emitter.ts", "content": "export type GeneralEventTypes = {\n // the name of the event and the data it dispatches with\n // e.g. 'entryCreated': [count: 1]\n [EventName: string]: unknown[]\n}\n\ntype EventListener = (\n ...args: EventTypes[EventName]\n) => void\n\ntype EventMap = {\n [EventName in keyof EventTypes]: Set>\n}\n\n/** A simple event emitter that can be used to listen to and emit events. */\nclass EventEmitter {\n private listeners = {} as EventMap\n\n /** Subscribe to an event. Returns an unsubscribe function. */\n public on(\n event: EventName,\n listener: EventListener,\n options?: { once?: boolean },\n ): () => void {\n if (!this.listeners[event]) {\n this.listeners[event] = new Set()\n }\n\n if (options?.once) {\n // Create a wrapper that removes itself after being called once\n const onceWrapper: EventListener = (...args) => {\n this.un(event, onceWrapper)\n listener(...args)\n }\n this.listeners[event].add(onceWrapper)\n return () => this.un(event, onceWrapper)\n }\n\n this.listeners[event].add(listener)\n return () => this.un(event, listener)\n }\n\n /** Unsubscribe from an event */\n public un(\n event: EventName,\n listener: EventListener,\n ): void {\n this.listeners[event]?.delete(listener)\n }\n\n /** Subscribe to an event only once */\n public once(\n event: EventName,\n listener: EventListener,\n ): () => void {\n return this.on(event, listener, { once: true })\n }\n\n /** Clear all events */\n public unAll(): void {\n this.listeners = {} as EventMap\n }\n\n /** Emit an event */\n protected emit(eventName: EventName, ...args: EventTypes[EventName]): void {\n if (this.listeners[eventName]) {\n this.listeners[eventName].forEach((listener) => listener(...args))\n }\n }\n}\n\nexport default EventEmitter\n" }, { "path": "src/fetcher.ts", "content": "async function watchProgress(response: Response, progressCallback: (percentage: number) => void) {\n if (!response.body || !response.headers) return\n const reader = response.body.getReader()\n\n const contentLength = Number(response.headers.get('Content-Length')) || 0\n let receivedLength = 0\n\n // Process the data\n const processChunk = (value: Uint8Array | undefined) => {\n // Add to the received length\n receivedLength += value?.length || 0\n const percentage = Math.round((receivedLength / contentLength) * 100)\n progressCallback(percentage)\n }\n\n // Use iteration instead of recursion to avoid stack issues\n try {\n while (true) {\n const data = await reader.read()\n\n if (data.done) {\n break\n }\n\n processChunk(data.value)\n }\n } catch (err) {\n // Ignore errors because we can only handle the main response\n console.warn('Progress tracking error:', err)\n }\n}\n\nasync function fetchBlob(\n url: string,\n progressCallback: (percentage: number) => void,\n requestInit?: RequestInit,\n): Promise {\n // Fetch the resource\n const response = await fetch(url, requestInit)\n\n if (response.status >= 400) {\n throw new Error(`Failed to fetch ${url}: ${response.status} (${response.statusText})`)\n }\n\n // Read the data to track progress\n watchProgress(response.clone(), progressCallback)\n\n return response.blob()\n}\n\nconst Fetcher = {\n fetchBlob,\n}\n\nexport default Fetcher\n" }, { "path": "src/fft.ts", "content": "/**\n * FFT (Fast Fourier Transform) implementation\n * Based on https://github.com/corbanbrook/dsp.js\n *\n * Centralized FFT functionality for spectrogram plugins\n */\n\n// eslint-disable-next-line\n// @ts-nocheck\n\nexport const ERB_A = (1000 * Math.log(10)) / (24.7 * 4.37)\n\n// Frequency scaling functions\nexport function hzToMel(hz: number): number {\n return 2595 * Math.log10(1 + hz / 700)\n}\n\nexport function melToHz(mel: number): number {\n return 700 * (Math.pow(10, mel / 2595) - 1)\n}\n\nexport function hzToLog(hz: number): number {\n return Math.log10(Math.max(1, hz))\n}\n\nexport function logToHz(log: number): number {\n return Math.pow(10, log)\n}\n\nexport function hzToBark(hz: number): number {\n // https://www.mathworks.com/help/audio/ref/hz2bark.html#function_hz2bark_sep_mw_06bea6f7-353b-4479-a58d-ccadb90e44de\n let bark = (26.81 * hz) / (1960 + hz) - 0.53\n if (bark < 2) {\n bark += 0.15 * (2 - bark)\n }\n if (bark > 20.1) {\n bark += 0.22 * (bark - 20.1)\n }\n return bark\n}\n\nexport function barkToHz(bark: number): number {\n // https://www.mathworks.com/help/audio/ref/bark2hz.html#function_bark2hz_sep_mw_bee310ea-48ac-4d95-ae3d-80f3e4149555\n if (bark < 2) {\n bark = (bark - 0.3) / 0.85\n }\n if (bark > 20.1) {\n bark = (bark + 4.422) / 1.22\n }\n return 1960 * ((bark + 0.53) / (26.28 - bark))\n}\n\nexport function hzToErb(hz: number): number {\n // https://www.mathworks.com/help/audio/ref/hz2erb.html#function_hz2erb_sep_mw_06bea6f7-353b-4479-a58d-ccadb90e44de\n return ERB_A * Math.log10(1 + hz * 0.00437)\n}\n\nexport function erbToHz(erb: number): number {\n // https://it.mathworks.com/help/audio/ref/erb2hz.html?#function_erb2hz_sep_mw_bee310ea-48ac-4d95-ae3d-80f3e4149555\n return (Math.pow(10, erb / ERB_A) - 1) / 0.00437\n}\n\n// Generic scale conversion functions\nexport function hzToScale(hz: number, scale: 'linear' | 'logarithmic' | 'mel' | 'bark' | 'erb'): number {\n switch (scale) {\n case 'mel':\n return hzToMel(hz)\n case 'logarithmic':\n return hzToLog(hz)\n case 'bark':\n return hzToBark(hz)\n case 'erb':\n return hzToErb(hz)\n default:\n return hz\n }\n}\n\nexport function scaleToHz(scale: number, scaleType: 'linear' | 'logarithmic' | 'mel' | 'bark' | 'erb'): number {\n switch (scaleType) {\n case 'mel':\n return melToHz(scale)\n case 'logarithmic':\n return logToHz(scale)\n case 'bark':\n return barkToHz(scale)\n case 'erb':\n return erbToHz(scale)\n default:\n return scale\n }\n}\n\n// Filter bank functions\nfunction createFilterBank(\n numFilters: number,\n fftSamples: number,\n sampleRate: number,\n hzToScaleFunc: (hz: number) => number,\n scaleToHzFunc: (scale: number) => number,\n): number[][] {\n const filterMin = hzToScaleFunc(0)\n const filterMax = hzToScaleFunc(sampleRate / 2)\n const filterBank = Array.from({ length: numFilters }, () => Array(fftSamples / 2 + 1).fill(0))\n const scale = sampleRate / fftSamples\n\n for (let i = 0; i < numFilters; i++) {\n const hz = scaleToHzFunc(filterMin + (i / numFilters) * (filterMax - filterMin))\n const j = Math.floor(hz / scale)\n const hzLow = j * scale\n const hzHigh = (j + 1) * scale\n const r = (hz - hzLow) / (hzHigh - hzLow)\n filterBank[i][j] = 1 - r\n filterBank[i][j + 1] = r\n }\n return filterBank\n}\n\nexport function applyFilterBank(fftPoints: Float32Array, filterBank: number[][]): Float32Array {\n const numFilters = filterBank.length\n const logSpectrum = Float32Array.from({ length: numFilters }, () => 0)\n for (let i = 0; i < numFilters; i++) {\n for (let j = 0; j < fftPoints.length; j++) {\n logSpectrum[i] += fftPoints[j] * filterBank[i][j]\n }\n }\n return logSpectrum\n}\n\n// Centralized filter bank creation based on scale type\nexport function createFilterBankForScale(\n scale: 'linear' | 'logarithmic' | 'mel' | 'bark' | 'erb',\n numFilters: number,\n fftSamples: number,\n sampleRate: number,\n): number[][] | null {\n switch (scale) {\n case 'mel':\n return createFilterBank(numFilters, fftSamples, sampleRate, hzToMel, melToHz)\n case 'logarithmic':\n return createFilterBank(numFilters, fftSamples, sampleRate, hzToLog, logToHz)\n case 'bark':\n return createFilterBank(numFilters, fftSamples, sampleRate, hzToBark, barkToHz)\n case 'erb':\n return createFilterBank(numFilters, fftSamples, sampleRate, hzToErb, erbToHz)\n case 'linear':\n default:\n return null // No filter bank for linear scale\n }\n}\n\nexport const COLOR_MAPS = {\n gray: () => {\n const colorMap = []\n for (let i = 0; i < 256; i++) {\n const val = (255 - i) / 256\n colorMap.push([val, val, val, 1])\n }\n return colorMap\n },\n\n igray: () => {\n const colorMap = []\n for (let i = 0; i < 256; i++) {\n const val = i / 256\n colorMap.push([val, val, val, 1])\n }\n return colorMap\n },\n\n roseus: () => [\n [0.004528, 0.004341, 0.004307, 1],\n [0.005625, 0.006156, 0.00601, 1],\n [0.006628, 0.008293, 0.008161, 1],\n [0.007551, 0.010738, 0.01079, 1],\n [0.008382, 0.013482, 0.013941, 1],\n [0.009111, 0.01652, 0.017662, 1],\n [0.009727, 0.019846, 0.022009, 1],\n [0.010223, 0.023452, 0.027035, 1],\n [0.010593, 0.027331, 0.032799, 1],\n [0.010833, 0.031475, 0.039361, 1],\n [0.010941, 0.035875, 0.046415, 1],\n [0.010918, 0.04052, 0.053597, 1],\n [0.010768, 0.045158, 0.060914, 1],\n [0.010492, 0.049708, 0.068367, 1],\n [0.010098, 0.054171, 0.075954, 1],\n [0.009594, 0.058549, 0.083672, 1],\n [0.008989, 0.06284, 0.091521, 1],\n [0.008297, 0.067046, 0.099499, 1],\n [0.00753, 0.071165, 0.107603, 1],\n [0.006704, 0.075196, 0.11583, 1],\n [0.005838, 0.07914, 0.124178, 1],\n [0.004949, 0.082994, 0.132643, 1],\n [0.004062, 0.086758, 0.141223, 1],\n [0.003198, 0.09043, 0.149913, 1],\n [0.002382, 0.09401, 0.158711, 1],\n [0.001643, 0.097494, 0.167612, 1],\n [0.001009, 0.100883, 0.176612, 1],\n [0.000514, 0.104174, 0.185704, 1],\n [0.000187, 0.107366, 0.194886, 1],\n [0.000066, 0.110457, 0.204151, 1],\n [0.000186, 0.113445, 0.213496, 1],\n [0.000587, 0.116329, 0.222914, 1],\n [0.001309, 0.119106, 0.232397, 1],\n [0.002394, 0.121776, 0.241942, 1],\n [0.003886, 0.124336, 0.251542, 1],\n [0.005831, 0.126784, 0.261189, 1],\n [0.008276, 0.12912, 0.270876, 1],\n [0.011268, 0.131342, 0.280598, 1],\n [0.014859, 0.133447, 0.290345, 1],\n [0.0191, 0.135435, 0.300111, 1],\n [0.024043, 0.137305, 0.309888, 1],\n [0.029742, 0.139054, 0.319669, 1],\n [0.036252, 0.140683, 0.329441, 1],\n [0.043507, 0.142189, 0.339203, 1],\n [0.050922, 0.143571, 0.348942, 1],\n [0.058432, 0.144831, 0.358649, 1],\n [0.066041, 0.145965, 0.368319, 1],\n [0.073744, 0.146974, 0.377938, 1],\n [0.081541, 0.147858, 0.387501, 1],\n [0.089431, 0.148616, 0.396998, 1],\n [0.097411, 0.149248, 0.406419, 1],\n [0.105479, 0.149754, 0.415755, 1],\n [0.113634, 0.150134, 0.424998, 1],\n [0.121873, 0.150389, 0.434139, 1],\n [0.130192, 0.150521, 0.443167, 1],\n [0.138591, 0.150528, 0.452075, 1],\n [0.147065, 0.150413, 0.460852, 1],\n [0.155614, 0.150175, 0.469493, 1],\n [0.164232, 0.149818, 0.477985, 1],\n [0.172917, 0.149343, 0.486322, 1],\n [0.181666, 0.148751, 0.494494, 1],\n [0.190476, 0.148046, 0.502493, 1],\n [0.199344, 0.147229, 0.510313, 1],\n [0.208267, 0.146302, 0.517944, 1],\n [0.217242, 0.145267, 0.52538, 1],\n [0.226264, 0.144131, 0.532613, 1],\n [0.235331, 0.142894, 0.539635, 1],\n [0.24444, 0.141559, 0.546442, 1],\n [0.253587, 0.140131, 0.553026, 1],\n [0.262769, 0.138615, 0.559381, 1],\n [0.271981, 0.137016, 0.5655, 1],\n [0.281222, 0.135335, 0.571381, 1],\n [0.290487, 0.133581, 0.577017, 1],\n [0.299774, 0.131757, 0.582404, 1],\n [0.30908, 0.129867, 0.587538, 1],\n [0.318399, 0.12792, 0.592415, 1],\n [0.32773, 0.125921, 0.597032, 1],\n [0.337069, 0.123877, 0.601385, 1],\n [0.346413, 0.121793, 0.605474, 1],\n [0.355758, 0.119678, 0.609295, 1],\n [0.365102, 0.11754, 0.612846, 1],\n [0.374443, 0.115386, 0.616127, 1],\n [0.383774, 0.113226, 0.619138, 1],\n [0.393096, 0.111066, 0.621876, 1],\n [0.402404, 0.108918, 0.624343, 1],\n [0.411694, 0.106794, 0.62654, 1],\n [0.420967, 0.104698, 0.628466, 1],\n [0.430217, 0.102645, 0.630123, 1],\n [0.439442, 0.100647, 0.631513, 1],\n [0.448637, 0.098717, 0.632638, 1],\n [0.457805, 0.096861, 0.633499, 1],\n [0.46694, 0.095095, 0.6341, 1],\n [0.47604, 0.093433, 0.634443, 1],\n [0.485102, 0.091885, 0.634532, 1],\n [0.494125, 0.090466, 0.63437, 1],\n [0.503104, 0.08919, 0.633962, 1],\n [0.512041, 0.088067, 0.633311, 1],\n [0.520931, 0.087108, 0.63242, 1],\n [0.529773, 0.086329, 0.631297, 1],\n [0.538564, 0.085738, 0.629944, 1],\n [0.547302, 0.085346, 0.628367, 1],\n [0.555986, 0.085162, 0.626572, 1],\n [0.564615, 0.08519, 0.624563, 1],\n [0.573187, 0.085439, 0.622345, 1],\n [0.581698, 0.085913, 0.619926, 1],\n [0.590149, 0.086615, 0.617311, 1],\n [0.598538, 0.087543, 0.614503, 1],\n [0.606862, 0.0887, 0.611511, 1],\n [0.61512, 0.090084, 0.608343, 1],\n [0.623312, 0.09169, 0.605001, 1],\n [0.631438, 0.093511, 0.601489, 1],\n [0.639492, 0.095546, 0.597821, 1],\n [0.647476, 0.097787, 0.593999, 1],\n [0.655389, 0.100226, 0.590028, 1],\n [0.66323, 0.102856, 0.585914, 1],\n [0.670995, 0.105669, 0.581667, 1],\n [0.678686, 0.108658, 0.577291, 1],\n [0.686302, 0.111813, 0.57279, 1],\n [0.69384, 0.115129, 0.568175, 1],\n [0.7013, 0.118597, 0.563449, 1],\n [0.708682, 0.122209, 0.558616, 1],\n [0.715984, 0.125959, 0.553687, 1],\n [0.723206, 0.12984, 0.548666, 1],\n [0.730346, 0.133846, 0.543558, 1],\n [0.737406, 0.13797, 0.538366, 1],\n [0.744382, 0.142209, 0.533101, 1],\n [0.751274, 0.146556, 0.527767, 1],\n [0.758082, 0.151008, 0.522369, 1],\n [0.764805, 0.155559, 0.516912, 1],\n [0.771443, 0.160206, 0.511402, 1],\n [0.777995, 0.164946, 0.505845, 1],\n [0.784459, 0.169774, 0.500246, 1],\n [0.790836, 0.174689, 0.494607, 1],\n [0.797125, 0.179688, 0.488935, 1],\n [0.803325, 0.184767, 0.483238, 1],\n [0.809435, 0.189925, 0.477518, 1],\n [0.815455, 0.19516, 0.471781, 1],\n [0.821384, 0.200471, 0.466028, 1],\n [0.827222, 0.205854, 0.460267, 1],\n [0.832968, 0.211308, 0.454505, 1],\n [0.838621, 0.216834, 0.448738, 1],\n [0.844181, 0.222428, 0.442979, 1],\n [0.849647, 0.22809, 0.43723, 1],\n [0.855019, 0.233819, 0.431491, 1],\n [0.860295, 0.239613, 0.425771, 1],\n [0.865475, 0.245471, 0.420074, 1],\n [0.870558, 0.251393, 0.414403, 1],\n [0.875545, 0.25738, 0.408759, 1],\n [0.880433, 0.263427, 0.403152, 1],\n [0.885223, 0.269535, 0.397585, 1],\n [0.889913, 0.275705, 0.392058, 1],\n [0.894503, 0.281934, 0.386578, 1],\n [0.898993, 0.288222, 0.381152, 1],\n [0.903381, 0.294569, 0.375781, 1],\n [0.907667, 0.300974, 0.370469, 1],\n [0.911849, 0.307435, 0.365223, 1],\n [0.915928, 0.313953, 0.360048, 1],\n [0.919902, 0.320527, 0.354948, 1],\n [0.923771, 0.327155, 0.349928, 1],\n [0.927533, 0.333838, 0.344994, 1],\n [0.931188, 0.340576, 0.340149, 1],\n [0.934736, 0.347366, 0.335403, 1],\n [0.938175, 0.354207, 0.330762, 1],\n [0.941504, 0.361101, 0.326229, 1],\n [0.944723, 0.368045, 0.321814, 1],\n [0.947831, 0.375039, 0.317523, 1],\n [0.950826, 0.382083, 0.313364, 1],\n [0.953709, 0.389175, 0.309345, 1],\n [0.956478, 0.396314, 0.305477, 1],\n [0.959133, 0.403499, 0.301766, 1],\n [0.961671, 0.410731, 0.298221, 1],\n [0.964093, 0.418008, 0.294853, 1],\n [0.966399, 0.425327, 0.291676, 1],\n [0.968586, 0.43269, 0.288696, 1],\n [0.970654, 0.440095, 0.285926, 1],\n [0.972603, 0.44754, 0.28338, 1],\n [0.974431, 0.455025, 0.281067, 1],\n [0.976139, 0.462547, 0.279003, 1],\n [0.977725, 0.470107, 0.277198, 1],\n [0.979188, 0.477703, 0.275666, 1],\n [0.980529, 0.485332, 0.274422, 1],\n [0.981747, 0.492995, 0.273476, 1],\n [0.98284, 0.50069, 0.272842, 1],\n [0.983808, 0.508415, 0.272532, 1],\n [0.984653, 0.516168, 0.27256, 1],\n [0.985373, 0.523948, 0.272937, 1],\n [0.985966, 0.531754, 0.273673, 1],\n [0.986436, 0.539582, 0.274779, 1],\n [0.98678, 0.547434, 0.276264, 1],\n [0.986998, 0.555305, 0.278135, 1],\n [0.987091, 0.563195, 0.280401, 1],\n [0.987061, 0.5711, 0.283066, 1],\n [0.986907, 0.579019, 0.286137, 1],\n [0.986629, 0.58695, 0.289615, 1],\n [0.986229, 0.594891, 0.293503, 1],\n [0.985709, 0.602839, 0.297802, 1],\n [0.985069, 0.610792, 0.302512, 1],\n [0.98431, 0.618748, 0.307632, 1],\n [0.983435, 0.626704, 0.313159, 1],\n [0.982445, 0.634657, 0.319089, 1],\n [0.981341, 0.642606, 0.32542, 1],\n [0.98013, 0.650546, 0.332144, 1],\n [0.978812, 0.658475, 0.339257, 1],\n [0.977392, 0.666391, 0.346753, 1],\n [0.97587, 0.67429, 0.354625, 1],\n [0.974252, 0.68217, 0.362865, 1],\n [0.972545, 0.690026, 0.371466, 1],\n [0.97075, 0.697856, 0.380419, 1],\n [0.968873, 0.705658, 0.389718, 1],\n [0.966921, 0.713426, 0.399353, 1],\n [0.964901, 0.721157, 0.409313, 1],\n [0.962815, 0.728851, 0.419594, 1],\n [0.960677, 0.7365, 0.430181, 1],\n [0.95849, 0.744103, 0.44107, 1],\n [0.956263, 0.751656, 0.452248, 1],\n [0.954009, 0.759153, 0.463702, 1],\n [0.951732, 0.766595, 0.475429, 1],\n [0.949445, 0.773974, 0.487414, 1],\n [0.947158, 0.781289, 0.499647, 1],\n [0.944885, 0.788535, 0.512116, 1],\n [0.942634, 0.795709, 0.524811, 1],\n [0.940423, 0.802807, 0.537717, 1],\n [0.938261, 0.809825, 0.550825, 1],\n [0.936163, 0.81676, 0.564121, 1],\n [0.934146, 0.823608, 0.577591, 1],\n [0.932224, 0.830366, 0.59122, 1],\n [0.930412, 0.837031, 0.604997, 1],\n [0.928727, 0.843599, 0.618904, 1],\n [0.927187, 0.850066, 0.632926, 1],\n [0.925809, 0.856432, 0.647047, 1],\n [0.92461, 0.862691, 0.661249, 1],\n [0.923607, 0.868843, 0.675517, 1],\n [0.92282, 0.874884, 0.689832, 1],\n [0.922265, 0.880812, 0.704174, 1],\n [0.921962, 0.886626, 0.718523, 1],\n [0.92193, 0.892323, 0.732859, 1],\n [0.922183, 0.897903, 0.747163, 1],\n [0.922741, 0.903364, 0.76141, 1],\n [0.92362, 0.908706, 0.77558, 1],\n [0.924837, 0.913928, 0.789648, 1],\n [0.926405, 0.919031, 0.80359, 1],\n [0.92834, 0.924015, 0.817381, 1],\n [0.930655, 0.928881, 0.830995, 1],\n [0.93336, 0.933631, 0.844405, 1],\n [0.936466, 0.938267, 0.857583, 1],\n [0.939982, 0.942791, 0.870499, 1],\n [0.943914, 0.947207, 0.883122, 1],\n [0.948267, 0.951519, 0.895421, 1],\n [0.953044, 0.955732, 0.907359, 1],\n [0.958246, 0.959852, 0.918901, 1],\n [0.963869, 0.963887, 0.930004, 1],\n [0.969909, 0.967845, 0.940623, 1],\n [0.976355, 0.971737, 0.950704, 1],\n [0.983195, 0.97558, 0.960181, 1],\n [0.990402, 0.979395, 0.968966, 1],\n [0.99793, 0.983217, 0.97692, 1],\n ],\n}\n\n/**\n * Set up color map based on options\n */\nexport function setupColorMap(colorMap: number[][] | 'gray' | 'igray' | 'roseus' = 'roseus'): number[][] {\n if (colorMap && typeof colorMap !== 'string') {\n if (colorMap.length < 256) {\n throw new Error('Colormap must contain 256 elements')\n }\n for (let i = 0; i < colorMap.length; i++) {\n const cmEntry = colorMap[i]\n if (cmEntry.length !== 4) {\n throw new Error('ColorMap entries must contain 4 values')\n }\n }\n return colorMap\n }\n\n const mapGenerator = COLOR_MAPS[colorMap as keyof typeof COLOR_MAPS]\n if (!mapGenerator) {\n throw Error(\"No such colormap '\" + colorMap + \"'\")\n }\n\n return mapGenerator()\n}\n\n/**\n * Format frequency value for display\n */\nexport function freqType(freq: number): string {\n return freq >= 1000 ? (freq / 1000).toFixed(1) : Math.round(freq).toString()\n}\n\n/**\n * Get frequency unit for display\n */\nexport function unitType(freq: number): string {\n return freq >= 1000 ? 'kHz' : 'Hz'\n}\n\n/**\n * Get frequency value for label at given index\n */\nexport function getLabelFrequency(\n index: number,\n labelIndex: number,\n frequencyMin: number,\n frequencyMax: number,\n scale: 'linear' | 'logarithmic' | 'mel' | 'bark' | 'erb',\n): number {\n const scaleMin = hzToScale(frequencyMin, scale)\n const scaleMax = hzToScale(frequencyMax, scale)\n return scaleToHz(scaleMin + (index / labelIndex) * (scaleMax - scaleMin), scale)\n}\n\n/**\n * Create wrapper click handler for relative position calculation\n */\nexport function createWrapperClickHandler(wrapper: HTMLElement, emit: (event: string, ...args: any[]) => void) {\n return (e: MouseEvent) => {\n const rect = wrapper.getBoundingClientRect()\n const relativeX = e.clientX - rect.left\n const relativeWidth = rect.width\n const relativePosition = relativeX / relativeWidth\n emit('click', relativePosition)\n }\n}\n\n/**\n * Calculate FFT - Based on https://github.com/corbanbrook/dsp.js\n */\nfunction FFT(bufferSize: number, sampleRate: number, windowFunc: string, alpha: number) {\n this.bufferSize = bufferSize\n this.sampleRate = sampleRate\n this.bandwidth = (2 / bufferSize) * (sampleRate / 2)\n\n this.sinTable = new Float32Array(bufferSize)\n this.cosTable = new Float32Array(bufferSize)\n this.windowValues = new Float32Array(bufferSize)\n this.reverseTable = new Uint32Array(bufferSize)\n\n this.peakBand = 0\n this.peak = 0\n\n switch (windowFunc) {\n case 'bartlett':\n for (let i = 0; i < bufferSize; i++) {\n this.windowValues[i] = (2 / (bufferSize - 1)) * ((bufferSize - 1) / 2 - Math.abs(i - (bufferSize - 1) / 2))\n }\n break\n case 'bartlettHann':\n for (let i = 0; i < bufferSize; i++) {\n this.windowValues[i] =\n 0.62 - 0.48 * Math.abs(i / (bufferSize - 1) - 0.5) - 0.38 * Math.cos((Math.PI * 2 * i) / (bufferSize - 1))\n }\n break\n case 'blackman':\n alpha = alpha || 0.16\n for (let i = 0; i < bufferSize; i++) {\n this.windowValues[i] =\n (1 - alpha) / 2 -\n 0.5 * Math.cos((Math.PI * 2 * i) / (bufferSize - 1)) +\n (alpha / 2) * Math.cos((4 * Math.PI * i) / (bufferSize - 1))\n }\n break\n case 'cosine':\n for (let i = 0; i < bufferSize; i++) {\n this.windowValues[i] = Math.cos((Math.PI * i) / (bufferSize - 1) - Math.PI / 2)\n }\n break\n case 'gauss':\n alpha = alpha || 0.25\n for (let i = 0; i < bufferSize; i++) {\n this.windowValues[i] = Math.pow(\n Math.E,\n -0.5 * Math.pow((i - (bufferSize - 1) / 2) / ((alpha * (bufferSize - 1)) / 2), 2),\n )\n }\n break\n case 'hamming':\n for (let i = 0; i < bufferSize; i++) {\n this.windowValues[i] = 0.54 - 0.46 * Math.cos((Math.PI * 2 * i) / (bufferSize - 1))\n }\n break\n case 'hann':\n case undefined:\n for (let i = 0; i < bufferSize; i++) {\n this.windowValues[i] = 0.5 * (1 - Math.cos((Math.PI * 2 * i) / (bufferSize - 1)))\n }\n break\n case 'lanczoz':\n for (let i = 0; i < bufferSize; i++) {\n this.windowValues[i] =\n Math.sin(Math.PI * ((2 * i) / (bufferSize - 1) - 1)) / (Math.PI * ((2 * i) / (bufferSize - 1) - 1))\n }\n break\n case 'rectangular':\n for (let i = 0; i < bufferSize; i++) {\n this.windowValues[i] = 1\n }\n break\n case 'triangular':\n for (let i = 0; i < bufferSize; i++) {\n this.windowValues[i] = (2 / bufferSize) * (bufferSize / 2 - Math.abs(i - (bufferSize - 1) / 2))\n }\n break\n default:\n throw Error(\"No such window function '\" + windowFunc + \"'\")\n }\n\n let limit = 1\n let bit = bufferSize >> 1\n\n while (limit < bufferSize) {\n for (let i = 0; i < limit; i++) {\n this.reverseTable[i + limit] = this.reverseTable[i] + bit\n }\n\n limit = limit << 1\n bit = bit >> 1\n }\n\n for (let i = 0; i < bufferSize; i++) {\n this.sinTable[i] = Math.sin(-Math.PI / i)\n this.cosTable[i] = Math.cos(-Math.PI / i)\n }\n\n this.calculateSpectrum = function (buffer: Float32Array): Float32Array {\n const bufferSize = this.bufferSize,\n cosTable = this.cosTable,\n sinTable = this.sinTable,\n reverseTable = this.reverseTable,\n real = new Float32Array(bufferSize),\n imag = new Float32Array(bufferSize),\n bSi = 2 / this.bufferSize,\n sqrt = Math.sqrt,\n spectrum = new Float32Array(bufferSize / 2)\n\n let rval, ival, mag\n\n const k = Math.floor(Math.log(bufferSize) / Math.LN2)\n\n if (Math.pow(2, k) !== bufferSize) {\n throw 'Invalid buffer size, must be a power of 2.'\n }\n if (bufferSize !== buffer.length) {\n throw (\n 'Supplied buffer is not the same size as defined FFT. FFT Size: ' +\n bufferSize +\n ' Buffer Size: ' +\n buffer.length\n )\n }\n\n let halfSize = 1,\n phaseShiftStepReal,\n phaseShiftStepImag,\n currentPhaseShiftReal,\n currentPhaseShiftImag,\n off,\n tr,\n ti,\n tmpReal\n\n for (let i = 0; i < bufferSize; i++) {\n real[i] = buffer[reverseTable[i]] * this.windowValues[reverseTable[i]]\n imag[i] = 0\n }\n\n while (halfSize < bufferSize) {\n phaseShiftStepReal = cosTable[halfSize]\n phaseShiftStepImag = sinTable[halfSize]\n\n currentPhaseShiftReal = 1\n currentPhaseShiftImag = 0\n\n for (let fftStep = 0; fftStep < halfSize; fftStep++) {\n let i = fftStep\n\n while (i < bufferSize) {\n off = i + halfSize\n tr = currentPhaseShiftReal * real[off] - currentPhaseShiftImag * imag[off]\n ti = currentPhaseShiftReal * imag[off] + currentPhaseShiftImag * real[off]\n\n real[off] = real[i] - tr\n imag[off] = imag[i] - ti\n real[i] += tr\n imag[i] += ti\n\n i += halfSize << 1\n }\n\n tmpReal = currentPhaseShiftReal\n currentPhaseShiftReal = tmpReal * phaseShiftStepReal - currentPhaseShiftImag * phaseShiftStepImag\n currentPhaseShiftImag = tmpReal * phaseShiftStepImag + currentPhaseShiftImag * phaseShiftStepReal\n }\n\n halfSize = halfSize << 1\n }\n\n for (let i = 0, N = bufferSize / 2; i < N; i++) {\n rval = real[i]\n ival = imag[i]\n mag = bSi * sqrt(rval * rval + ival * ival)\n\n if (mag > this.peak) {\n this.peakBand = i\n this.peak = mag\n }\n spectrum[i] = mag\n }\n return spectrum\n }\n}\n\n// TypeScript declaration for FFT class\nexport declare class FFT {\n constructor(bufferSize: number, sampleRate: number, windowFunc: string, alpha: number)\n calculateSpectrum(buffer: Float32Array): Float32Array\n}\n\n// Export the FFT constructor function\nexport { FFT }\nexport default FFT\n" }, { "path": "src/player.ts", "content": "import EventEmitter, { type GeneralEventTypes } from './event-emitter.js'\nimport { signal, type WritableSignal } from './reactive/store.js'\n\ntype PlayerOptions = {\n media?: HTMLMediaElement\n mediaControls?: boolean\n autoplay?: boolean\n playbackRate?: number\n}\n\nclass Player extends EventEmitter {\n protected media: HTMLMediaElement\n private isExternalMedia = false\n\n // Reactive state - make media state observable\n private _isPlaying: WritableSignal\n private _currentTime: WritableSignal\n private _duration: WritableSignal\n private _volume: WritableSignal\n private _muted: WritableSignal\n private _playbackRate: WritableSignal\n private _seeking: WritableSignal\n private reactiveMediaEventCleanups: Array<() => void> = []\n\n // Expose reactive state as writable signals\n // These are writable to allow WaveSurfer to compose them into centralized state\n public get isPlayingSignal(): WritableSignal {\n return this._isPlaying\n }\n public get currentTimeSignal(): WritableSignal {\n return this._currentTime\n }\n public get durationSignal(): WritableSignal {\n return this._duration\n }\n public get volumeSignal(): WritableSignal {\n return this._volume\n }\n public get mutedSignal(): WritableSignal {\n return this._muted\n }\n public get playbackRateSignal(): WritableSignal {\n return this._playbackRate\n }\n public get seekingSignal(): WritableSignal {\n return this._seeking\n }\n\n constructor(options: PlayerOptions) {\n super()\n\n if (options.media) {\n this.media = options.media\n this.isExternalMedia = true\n } else {\n this.media = document.createElement('audio')\n }\n\n // Initialize reactive state\n this._isPlaying = signal(false)\n this._currentTime = signal(0)\n this._duration = signal(0)\n this._volume = signal(this.media.volume)\n this._muted = signal(this.media.muted)\n this._playbackRate = signal(this.media.playbackRate || 1)\n this._seeking = signal(false)\n\n // Setup reactive media event handlers\n this.setupReactiveMediaEvents()\n\n // Controls\n if (options.mediaControls) {\n this.media.controls = true\n }\n // Autoplay\n if (options.autoplay) {\n this.media.autoplay = true\n }\n // Speed\n if (options.playbackRate != null) {\n this.onMediaEvent(\n 'canplay',\n () => {\n if (options.playbackRate != null) {\n this.media.playbackRate = options.playbackRate\n }\n },\n { once: true },\n )\n }\n }\n\n /**\n * Setup reactive media event handlers that update signals\n * This bridges the imperative HTMLMediaElement API to reactive state\n */\n private setupReactiveMediaEvents() {\n // Playing state\n this.reactiveMediaEventCleanups.push(\n this.onMediaEvent('play', () => {\n this._isPlaying.set(true)\n }),\n )\n\n this.reactiveMediaEventCleanups.push(\n this.onMediaEvent('pause', () => {\n this._isPlaying.set(false)\n }),\n )\n\n this.reactiveMediaEventCleanups.push(\n this.onMediaEvent('ended', () => {\n this._isPlaying.set(false)\n }),\n )\n\n // Time tracking\n this.reactiveMediaEventCleanups.push(\n this.onMediaEvent('timeupdate', () => {\n this._currentTime.set(this.media.currentTime)\n }),\n )\n\n this.reactiveMediaEventCleanups.push(\n this.onMediaEvent('durationchange', () => {\n this._duration.set(this.media.duration || 0)\n }),\n )\n\n this.reactiveMediaEventCleanups.push(\n this.onMediaEvent('loadedmetadata', () => {\n this._duration.set(this.media.duration || 0)\n }),\n )\n\n // Seeking state\n this.reactiveMediaEventCleanups.push(\n this.onMediaEvent('seeking', () => {\n this._seeking.set(true)\n }),\n )\n\n this.reactiveMediaEventCleanups.push(\n this.onMediaEvent('seeked', () => {\n this._seeking.set(false)\n }),\n )\n\n // Volume and muted\n this.reactiveMediaEventCleanups.push(\n this.onMediaEvent('volumechange', () => {\n this._volume.set(this.media.volume)\n this._muted.set(this.media.muted)\n }),\n )\n\n // Playback rate\n this.reactiveMediaEventCleanups.push(\n this.onMediaEvent('ratechange', () => {\n this._playbackRate.set(this.media.playbackRate)\n }),\n )\n }\n\n protected onMediaEvent(\n event: K,\n callback: (ev: HTMLElementEventMap[K]) => void,\n options?: boolean | AddEventListenerOptions,\n ): () => void {\n this.media.addEventListener(event, callback, options)\n return () => this.media.removeEventListener(event, callback, options)\n }\n\n protected getSrc() {\n return this.media.currentSrc || this.media.src || ''\n }\n\n private revokeSrc() {\n const src = this.getSrc()\n if (src.startsWith('blob:')) {\n URL.revokeObjectURL(src)\n }\n }\n\n private canPlayType(type: string): boolean {\n return this.media.canPlayType(type) !== ''\n }\n\n protected setSrc(url: string, blob?: Blob) {\n const prevSrc = this.getSrc()\n if (url && prevSrc === url) return // no need to change the source\n\n this.revokeSrc()\n const newSrc = blob instanceof Blob && (this.canPlayType(blob.type) || !url) ? URL.createObjectURL(blob) : url\n\n // Reset the media element, otherwise it keeps the previous source\n if (prevSrc) {\n this.media.removeAttribute('src')\n }\n\n if (newSrc || url) {\n try {\n this.media.src = newSrc\n } catch {\n this.media.src = url\n }\n }\n }\n\n protected destroy() {\n // Cleanup reactive media event listeners\n this.reactiveMediaEventCleanups.forEach((cleanup) => cleanup())\n this.reactiveMediaEventCleanups = []\n\n if (this.isExternalMedia) return\n this.media.pause()\n this.revokeSrc()\n this.media.removeAttribute('src')\n // Load resets the media element to its initial state\n this.media.load()\n // Remove from DOM after cleanup\n this.media.remove()\n }\n\n protected setMediaElement(element: HTMLMediaElement) {\n // Cleanup reactive event listeners from old media element\n this.reactiveMediaEventCleanups.forEach((cleanup) => cleanup())\n this.reactiveMediaEventCleanups = []\n\n // Set new media element\n this.media = element\n\n // Reinitialize reactive event listeners on new media element\n this.setupReactiveMediaEvents()\n }\n\n /** Start playing the audio */\n public async play(): Promise {\n try {\n return await this.media.play()\n } catch (err) {\n if (err instanceof DOMException && err.name === 'AbortError') {\n return\n }\n throw err\n }\n }\n\n /** Pause the audio */\n public pause(): void {\n this.media.pause()\n }\n\n /** Check if the audio is playing */\n public isPlaying(): boolean {\n return !this.media.paused && !this.media.ended\n }\n\n /** Jump to a specific time in the audio (in seconds) */\n public setTime(time: number) {\n this.media.currentTime = Math.max(0, Math.min(time, this.getDuration()))\n }\n\n /** Get the duration of the audio in seconds */\n public getDuration(): number {\n return this.media.duration\n }\n\n /** Get the current audio position in seconds */\n public getCurrentTime(): number {\n return this.media.currentTime\n }\n\n /** Get the audio volume */\n public getVolume(): number {\n return this.media.volume\n }\n\n /** Set the audio volume */\n public setVolume(volume: number) {\n this.media.volume = volume\n }\n\n /** Get the audio muted state */\n public getMuted(): boolean {\n return this.media.muted\n }\n\n /** Mute or unmute the audio */\n public setMuted(muted: boolean) {\n this.media.muted = muted\n }\n\n /** Get the playback speed */\n public getPlaybackRate(): number {\n return this.media.playbackRate\n }\n\n /** Check if the audio is seeking */\n public isSeeking(): boolean {\n return this.media.seeking\n }\n\n /** Set the playback speed, pass an optional false to NOT preserve the pitch */\n public setPlaybackRate(rate: number, preservePitch?: boolean) {\n // preservePitch is true by default in most browsers\n if (preservePitch != null) {\n this.media.preservesPitch = preservePitch\n }\n this.media.playbackRate = rate\n }\n\n /** Get the HTML media element */\n public getMediaElement(): HTMLMediaElement {\n return this.media\n }\n\n /** Set a sink id to change the audio output device */\n public setSinkId(sinkId: string): Promise {\n // See https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId\n const media = this.media as HTMLAudioElement & { setSinkId: (sinkId: string) => Promise }\n return media.setSinkId(sinkId)\n }\n}\n\nexport default Player\n" }, { "path": "src/plugins/envelope.ts", "content": "/**\n * Envelope is a visual UI for controlling the audio volume and add fade-in and fade-out effects.\n */\n\nimport BasePlugin, { type BasePluginEvents } from '../base-plugin.js'\nimport EventEmitter from '../event-emitter.js'\nimport createElement from '../dom.js'\nimport { createDragStream } from '../reactive/drag-stream.js'\nimport { effect } from '../reactive/store.js'\n\nexport type EnvelopePoint = {\n id?: string\n time: number // in seconds\n volume: number // 0 to 1\n}\n\nexport type EnvelopePluginOptions = {\n points?: EnvelopePoint[]\n volume?: number\n lineWidth?: string\n lineColor?: string\n dragLine?: boolean\n dragPointSize?: number\n dragPointFill?: string\n dragPointStroke?: string\n}\n\nconst defaultOptions = {\n points: [] as EnvelopePoint[],\n lineWidth: 4,\n lineColor: 'rgba(0, 0, 255, 0.5)',\n dragPointSize: 10,\n dragPointFill: 'rgba(255, 255, 255, 0.8)',\n dragPointStroke: 'rgba(255, 255, 255, 0.8)',\n}\n\ntype Options = EnvelopePluginOptions & typeof defaultOptions\n\nexport type EnvelopePluginEvents = BasePluginEvents & {\n 'points-change': [newPoints: EnvelopePoint[]]\n 'volume-change': [volume: number]\n}\n\nclass Polyline extends EventEmitter<{\n 'point-move': [point: EnvelopePoint, relativeX: number, relativeY: number]\n 'point-dragout': [point: EnvelopePoint]\n 'point-create': [relativeX: number, relativeY: number]\n 'line-move': [relativeY: number]\n}> {\n private svg: SVGSVGElement\n private options: Options\n private polyPoints: Map<\n EnvelopePoint,\n {\n polyPoint: SVGPoint\n circle: SVGEllipseElement\n }\n >\n private subscriptions: (() => void)[] = []\n private dblClickListener?: (e: MouseEvent) => void\n private touchStartListener?: (e: TouchEvent) => void\n private touchMoveListener?: () => void\n private touchEndListener?: () => void\n private pressTimer?: number\n\n constructor(options: Options, wrapper: HTMLElement) {\n super()\n\n this.subscriptions = []\n this.options = options\n this.polyPoints = new Map()\n\n const width = wrapper.clientWidth\n const height = wrapper.clientHeight\n\n // SVG element\n const svg = createElement(\n 'svg',\n {\n xmlns: 'http://www.w3.org/2000/svg',\n width: '100%',\n height: '100%',\n viewBox: `0 0 ${width} ${height}`,\n preserveAspectRatio: 'none',\n style: {\n position: 'absolute',\n left: '0',\n top: '0',\n zIndex: '4',\n },\n part: 'envelope',\n },\n wrapper,\n ) as SVGSVGElement\n\n this.svg = svg\n\n // A polyline representing the envelope\n const polyline = createElement(\n 'polyline',\n {\n xmlns: 'http://www.w3.org/2000/svg',\n points: `0,${height} ${width},${height}`,\n stroke: options.lineColor,\n 'stroke-width': options.lineWidth,\n fill: 'none',\n part: 'polyline',\n style: options.dragLine\n ? {\n cursor: 'row-resize',\n pointerEvents: 'stroke',\n }\n : {},\n },\n svg,\n ) as SVGPolylineElement\n\n // Make the polyline draggable along the Y axis\n if (options.dragLine) {\n const dragStream = createDragStream(polyline as unknown as HTMLElement)\n const unsubscribe = effect(() => {\n const drag = dragStream.signal.value\n if (!drag || drag.type !== 'move' || drag.deltaY === undefined) return\n\n const deltaY = drag.deltaY\n const { height } = svg.viewBox.baseVal\n const { points } = polyline\n for (let i = 1; i < points.numberOfItems - 1; i++) {\n const point = points.getItem(i)\n point.y = Math.min(height, Math.max(0, point.y + deltaY))\n }\n const circles = svg.querySelectorAll('ellipse')\n Array.from(circles).forEach((circle) => {\n const newY = Math.min(height, Math.max(0, Number(circle.getAttribute('cy')) + deltaY))\n circle.setAttribute('cy', newY.toString())\n })\n\n this.emit('line-move', deltaY / height)\n }, [dragStream.signal])\n\n this.subscriptions.push(() => {\n unsubscribe()\n dragStream.cleanup()\n })\n }\n\n // Listen to double click to add a new point\n this.dblClickListener = (e) => {\n const rect = svg.getBoundingClientRect()\n const x = e.clientX - rect.left\n const y = e.clientY - rect.top\n this.emit('point-create', x / rect.width, y / rect.height)\n }\n svg.addEventListener('dblclick', this.dblClickListener)\n\n // Long press on touch devices\n const clearTimer = () => {\n if (this.pressTimer !== undefined) {\n clearTimeout(this.pressTimer)\n this.pressTimer = undefined\n }\n }\n\n this.touchStartListener = (e) => {\n if (e.touches.length === 1) {\n this.pressTimer = window.setTimeout(() => {\n e.preventDefault()\n const rect = svg.getBoundingClientRect()\n const x = e.touches[0].clientX - rect.left\n const y = e.touches[0].clientY - rect.top\n this.emit('point-create', x / rect.width, y / rect.height)\n }, 500)\n } else {\n clearTimer()\n }\n }\n\n this.touchMoveListener = clearTimer\n this.touchEndListener = clearTimer\n\n svg.addEventListener('touchstart', this.touchStartListener)\n svg.addEventListener('touchmove', this.touchMoveListener)\n svg.addEventListener('touchend', this.touchEndListener)\n }\n\n private makeDraggable(draggable: SVGElement, onDrag: (x: number, y: number) => void) {\n const dragStream = createDragStream(draggable as unknown as HTMLElement, { threshold: 1 })\n\n const unsubscribe = effect(() => {\n const drag = dragStream.signal.value\n if (!drag) return\n\n if (drag.type === 'start') {\n draggable.style.cursor = 'grabbing'\n } else if (drag.type === 'move' && drag.deltaX !== undefined && drag.deltaY !== undefined) {\n onDrag(drag.deltaX, drag.deltaY)\n } else if (drag.type === 'end') {\n draggable.style.cursor = 'grab'\n }\n }, [dragStream.signal])\n\n this.subscriptions.push(() => {\n unsubscribe()\n dragStream.cleanup()\n })\n }\n\n private createCircle(x: number, y: number) {\n const size = this.options.dragPointSize\n const radius = size / 2\n return createElement(\n 'ellipse',\n {\n xmlns: 'http://www.w3.org/2000/svg',\n cx: x,\n cy: y,\n rx: radius,\n ry: radius,\n fill: this.options.dragPointFill,\n stroke: this.options.dragPointStroke,\n 'stroke-width': '2',\n style: {\n cursor: 'grab',\n pointerEvents: 'all',\n },\n part: 'envelope-circle',\n },\n this.svg,\n ) as SVGEllipseElement\n }\n\n removePolyPoint(point: EnvelopePoint) {\n const item = this.polyPoints.get(point)\n if (!item) return\n const { polyPoint, circle } = item\n const { points } = this.svg.querySelector('polyline') as SVGPolylineElement\n const index = Array.from(points).findIndex((p) => p.x === polyPoint.x && p.y === polyPoint.y)\n points.removeItem(index)\n circle.remove()\n this.polyPoints.delete(point)\n }\n\n addPolyPoint(relX: number, relY: number, refPoint: EnvelopePoint) {\n const { svg } = this\n const { width, height } = svg.viewBox.baseVal\n const x = relX * width\n const y = height - relY * height\n const threshold = this.options.dragPointSize / 2\n\n const newPoint = svg.createSVGPoint()\n newPoint.x = relX * width\n newPoint.y = height - relY * height\n\n const circle = this.createCircle(x, y)\n const { points } = svg.querySelector('polyline') as SVGPolylineElement\n const newIndex = Array.from(points).findIndex((point) => point.x >= x)\n points.insertItemBefore(newPoint, Math.max(newIndex, 1))\n\n this.polyPoints.set(refPoint, { polyPoint: newPoint, circle })\n\n this.makeDraggable(circle, (dx, dy) => {\n const newX = newPoint.x + dx\n const newY = newPoint.y + dy\n\n // Remove the point if it's dragged out of the SVG\n if (newX < -threshold || newY < -threshold || newX > width + threshold || newY > height + threshold) {\n this.emit('point-dragout', refPoint)\n return\n }\n\n // Don't allow to drag past the next or previous point\n const next = Array.from(points).find((point) => point.x > newPoint.x)\n const prev = Array.from(points).findLast((point) => point.x < newPoint.x)\n if ((next && newX >= next.x) || (prev && newX <= prev.x)) {\n return\n }\n\n // Update the point and the circle position\n newPoint.x = newX\n newPoint.y = newY\n circle.setAttribute('cx', newX.toString())\n circle.setAttribute('cy', newY.toString())\n\n // Emit the event passing the point and new relative coordinates\n this.emit('point-move', refPoint, newX / width, newY / height)\n })\n }\n\n update() {\n const { svg } = this\n // Skip the update if the container is hidden\n const { clientWidth, clientHeight } = svg\n if (!clientWidth || !clientHeight) {\n return\n }\n\n const aspectRatioX = svg.viewBox.baseVal.width / clientWidth\n const aspectRatioY = svg.viewBox.baseVal.height / clientHeight\n const circles = svg.querySelectorAll('ellipse')\n\n circles.forEach((circle) => {\n const radius = this.options.dragPointSize / 2\n const rx = radius * aspectRatioX\n const ry = radius * aspectRatioY\n circle.setAttribute('rx', rx.toString())\n circle.setAttribute('ry', ry.toString())\n })\n }\n\n destroy() {\n // Clear pending press timer\n if (this.pressTimer !== undefined) {\n clearTimeout(this.pressTimer)\n this.pressTimer = undefined\n }\n\n // Remove event listeners\n if (this.dblClickListener) {\n this.svg.removeEventListener('dblclick', this.dblClickListener)\n this.dblClickListener = undefined\n }\n if (this.touchStartListener) {\n this.svg.removeEventListener('touchstart', this.touchStartListener)\n this.touchStartListener = undefined\n }\n if (this.touchMoveListener) {\n this.svg.removeEventListener('touchmove', this.touchMoveListener)\n this.touchMoveListener = undefined\n }\n if (this.touchEndListener) {\n this.svg.removeEventListener('touchend', this.touchEndListener)\n this.touchEndListener = undefined\n }\n\n this.subscriptions.forEach((unsubscribe) => unsubscribe())\n this.polyPoints.clear()\n this.svg.remove()\n }\n}\n\nconst randomId = () => Math.random().toString(36).slice(2)\n\nclass EnvelopePlugin extends BasePlugin {\n protected options: Options\n private polyline: Polyline | null = null\n private points: EnvelopePoint[]\n private throttleTimeout: ReturnType | null = null\n private volume = 1\n\n /**\n * Create a new Envelope plugin.\n */\n constructor(options: EnvelopePluginOptions) {\n super(options)\n\n this.points = options.points || []\n\n this.options = Object.assign({}, defaultOptions, options)\n this.options.lineColor = this.options.lineColor || defaultOptions.lineColor\n this.options.dragPointFill = this.options.dragPointFill || defaultOptions.dragPointFill\n this.options.dragPointStroke = this.options.dragPointStroke || defaultOptions.dragPointStroke\n this.options.dragPointSize = this.options.dragPointSize || defaultOptions.dragPointSize\n }\n\n public static create(options: EnvelopePluginOptions) {\n return new EnvelopePlugin(options)\n }\n\n /**\n * Add an envelope point with a given time and volume.\n */\n public addPoint(point: EnvelopePoint) {\n if (!point.id) point.id = randomId()\n\n // Insert the point in the correct position to keep the array sorted\n const index = this.points.findLastIndex((p) => p.time < point.time)\n this.points.splice(index + 1, 0, point)\n\n this.emitPoints()\n\n // Add the point to the polyline if the duration is available\n const duration = this.wavesurfer?.getDuration()\n if (duration) {\n this.addPolyPoint(point, duration)\n }\n }\n\n /**\n * Remove an envelope point.\n */\n public removePoint(point: EnvelopePoint) {\n const index = this.points.indexOf(point)\n if (index > -1) {\n this.points.splice(index, 1)\n this.polyline?.removePolyPoint(point)\n this.emitPoints()\n }\n }\n\n /**\n * Get all envelope points. Should not be modified directly.\n */\n public getPoints(): EnvelopePoint[] {\n return this.points\n }\n\n /**\n * Set new envelope points.\n */\n public setPoints(newPoints: EnvelopePoint[]) {\n this.points.slice().forEach((point) => this.removePoint(point))\n newPoints.forEach((point) => this.addPoint(point))\n }\n\n /**\n * Destroy the plugin instance.\n */\n public destroy() {\n // Clear pending throttle timeout\n if (this.throttleTimeout) {\n clearTimeout(this.throttleTimeout)\n this.throttleTimeout = null\n }\n\n this.polyline?.destroy()\n super.destroy()\n }\n\n /**\n * Get the envelope volume.\n */\n public getCurrentVolume(): number {\n return this.volume\n }\n\n /**\n * Set the envelope volume. 0..1 (more than 1 will boost the volume).\n */\n public setVolume(floatValue: number) {\n this.volume = floatValue\n this.wavesurfer?.setVolume(floatValue)\n }\n\n /** Called by wavesurfer, don't call manually */\n onInit() {\n if (!this.wavesurfer) {\n throw Error('WaveSurfer is not initialized')\n }\n\n const { options } = this\n options.volume = options.volume ?? this.wavesurfer.getVolume()\n\n this.setVolume(options.volume)\n\n this.subscriptions.push(\n this.wavesurfer.on('decode', (duration) => {\n this.initPolyline()\n\n this.points.forEach((point) => {\n this.addPolyPoint(point, duration)\n })\n }),\n\n this.wavesurfer.on('redraw', () => {\n this.polyline?.update()\n }),\n\n this.wavesurfer.on('timeupdate', (time) => {\n this.onTimeUpdate(time)\n }),\n )\n }\n\n private emitPoints() {\n if (this.throttleTimeout) {\n clearTimeout(this.throttleTimeout)\n }\n this.throttleTimeout = setTimeout(() => {\n this.emit('points-change', this.points)\n }, 200)\n }\n\n private initPolyline() {\n if (this.polyline) this.polyline.destroy()\n if (!this.wavesurfer) return\n\n const wrapper = this.wavesurfer.getWrapper()\n\n this.polyline = new Polyline(this.options, wrapper)\n\n this.subscriptions.push(\n this.polyline.on('point-move', (point, relativeX, relativeY) => {\n const duration = this.wavesurfer?.getDuration() || 0\n point.time = relativeX * duration\n point.volume = 1 - relativeY\n\n this.emitPoints()\n }),\n\n this.polyline.on('point-dragout', (point) => {\n this.removePoint(point)\n }),\n\n this.polyline.on('point-create', (relativeX, relativeY) => {\n this.addPoint({\n time: relativeX * (this.wavesurfer?.getDuration() || 0),\n volume: 1 - relativeY,\n })\n }),\n\n this.polyline.on('line-move', (relativeY) => {\n this.points.forEach((point) => {\n point.volume = Math.min(1, Math.max(0, point.volume - relativeY))\n })\n\n this.emitPoints()\n\n this.onTimeUpdate(this.wavesurfer?.getCurrentTime() || 0)\n }),\n )\n }\n\n private addPolyPoint(point: EnvelopePoint, duration: number) {\n this.polyline?.addPolyPoint(point.time / duration, point.volume, point)\n }\n\n private onTimeUpdate(time: number) {\n if (!this.wavesurfer) return\n let nextPoint = this.points.find((point) => point.time > time)\n if (!nextPoint) {\n nextPoint = { time: this.wavesurfer.getDuration() || 0, volume: 0 }\n }\n let prevPoint = this.points.findLast((point) => point.time <= time)\n if (!prevPoint) {\n prevPoint = { time: 0, volume: 0 }\n }\n const timeDiff = nextPoint.time - prevPoint.time\n const volumeDiff = nextPoint.volume - prevPoint.volume\n const newVolume = prevPoint.volume + (time - prevPoint.time) * (volumeDiff / timeDiff)\n const clampedVolume = Math.min(1, Math.max(0, newVolume))\n const roundedVolume = Math.round(clampedVolume * 100) / 100\n\n if (roundedVolume !== this.getCurrentVolume()) {\n this.setVolume(roundedVolume)\n this.emit('volume-change', roundedVolume)\n }\n }\n}\n\nexport default EnvelopePlugin\n" }, { "path": "src/plugins/hover.ts", "content": "/**\n * The Hover plugin follows the mouse and shows a timestamp\n */\n\nimport BasePlugin, { type BasePluginEvents } from '../base-plugin.js'\nimport createElement from '../dom.js'\nimport { fromEvent } from '../reactive/event-streams.js'\nimport { effect } from '../reactive/store.js'\n\nexport type HoverPluginOptions = {\n /** The hover cursor color (playback cursor and progress mask colors used as falllback in this order)\n */\n lineColor?: string\n /**\n * The hover cursor width (pixels used if no units specified)\n * @default 1\n */\n lineWidth?: string | number\n /** The color of the label text */\n labelColor?: string\n /**\n * The font size of the label text (pixels used if no units specified)\n * @default 11\n */\n labelSize?: string | number\n /** The background color of the label */\n labelBackground?: string\n /**\n * Whether to display the label to the left of the cursor if possible\n * @default false\n */\n labelPreferLeft?: boolean\n /** Custom function to customize the displayed label text (m:ss used if not specified) */\n formatTimeCallback?: (seconds: number) => string\n}\n\nconst defaultOptions = {\n lineWidth: 1,\n labelSize: 11,\n labelPreferLeft: false,\n formatTimeCallback(seconds: number) {\n const minutes = Math.floor(seconds / 60)\n const secondsRemainder = Math.floor(seconds) % 60\n const paddedSeconds = `0${secondsRemainder}`.slice(-2)\n return `${minutes}:${paddedSeconds}`\n },\n}\n\nexport type HoverPluginEvents = BasePluginEvents & {\n hover: [relX: number]\n}\n\nclass HoverPlugin extends BasePlugin {\n protected options: HoverPluginOptions & typeof defaultOptions\n private wrapper: HTMLElement\n private label: HTMLElement\n private lastPointerPosition: { clientX: number; clientY: number } | null = null\n\n constructor(options?: HoverPluginOptions) {\n super(options || {})\n this.options = Object.assign({}, defaultOptions, options)\n\n // Create the plugin elements\n this.wrapper = createElement('div', { part: 'hover' })\n this.label = createElement('span', { part: 'hover-label' }, this.wrapper)\n }\n\n public static create(options?: HoverPluginOptions) {\n return new HoverPlugin(options)\n }\n\n private addUnits(value: string | number): string {\n const units = typeof value === 'number' ? 'px' : ''\n return `${value}${units}`\n }\n\n /** Called by wavesurfer, don't call manually */\n onInit() {\n if (!this.wavesurfer) {\n throw Error('WaveSurfer is not initialized')\n }\n\n const wsOptions = this.wavesurfer.options\n const lineColor = this.options.lineColor || wsOptions.cursorColor || wsOptions.progressColor\n\n // Vertical line\n Object.assign(this.wrapper.style, {\n position: 'absolute',\n zIndex: 10,\n left: 0,\n top: 0,\n height: '100%',\n pointerEvents: 'none',\n borderLeft: `${this.addUnits(this.options.lineWidth)} solid ${lineColor}`,\n opacity: '0',\n transition: 'opacity .1s ease-in',\n })\n\n // Timestamp label\n Object.assign(this.label.style, {\n display: 'block',\n backgroundColor: this.options.labelBackground,\n color: this.options.labelColor,\n fontSize: `${this.addUnits(this.options.labelSize)}`,\n transition: 'transform .1s ease-in',\n padding: '2px 3px',\n })\n\n // Append the wrapper\n const container = this.wavesurfer.getWrapper()\n container.appendChild(this.wrapper)\n\n // Get reactive state\n const state = this.wavesurfer.getState()\n\n // Create event streams for pointer events\n const pointerMove = fromEvent(container, 'pointermove')\n const pointerLeave = fromEvent(container, 'pointerleave')\n\n // React to pointer movement\n this.subscriptions.push(\n effect(() => {\n const e = pointerMove.value\n if (!e || !this.wavesurfer) return\n\n // Store only the position data needed for zoom/scroll updates\n this.lastPointerPosition = { clientX: e.clientX, clientY: e.clientY }\n\n // Position\n const bbox = this.wavesurfer.getWrapper().getBoundingClientRect()\n const { width } = bbox\n const offsetX = e.clientX - bbox.left\n const relX = Math.min(1, Math.max(0, offsetX / width))\n const posX = Math.min(width - this.options.lineWidth - 1, offsetX)\n this.wrapper.style.transform = `translateX(${posX}px)`\n this.wrapper.style.opacity = '1'\n\n // Timestamp\n const duration = state.duration.value\n this.label.textContent = this.options.formatTimeCallback(duration * relX)\n const labelWidth = this.label.offsetWidth\n const transformCondition = this.options.labelPreferLeft ? posX - labelWidth > 0 : posX + labelWidth > width\n this.label.style.transform = transformCondition ? `translateX(-${labelWidth + this.options.lineWidth}px)` : ''\n\n // Emit a hover event with the relative X position\n this.emit('hover', relX)\n }, [pointerMove, state.duration]),\n )\n\n // React to pointer leave\n this.subscriptions.push(\n effect(() => {\n const e = pointerLeave.value\n if (!e) return\n\n this.wrapper.style.opacity = '0'\n this.lastPointerPosition = null\n }, [pointerLeave]),\n )\n\n // When zoom or scroll happens, re-run the pointer move logic with the last known mouse position\n const onUpdate = () => {\n if (this.lastPointerPosition && this.wavesurfer) {\n // Position\n const bbox = this.wavesurfer.getWrapper().getBoundingClientRect()\n const { width } = bbox\n const offsetX = this.lastPointerPosition.clientX - bbox.left\n const relX = Math.min(1, Math.max(0, offsetX / width))\n const posX = Math.min(width - this.options.lineWidth - 1, offsetX)\n this.wrapper.style.transform = `translateX(${posX}px)`\n\n // Timestamp\n const duration = state.duration.value\n this.label.textContent = this.options.formatTimeCallback(duration * relX)\n const labelWidth = this.label.offsetWidth\n const transformCondition = this.options.labelPreferLeft ? posX - labelWidth > 0 : posX + labelWidth > width\n this.label.style.transform = transformCondition ? `translateX(-${labelWidth + this.options.lineWidth}px)` : ''\n }\n }\n\n // Subscribe to zoom and scroll events\n this.subscriptions.push(this.wavesurfer.on('zoom', onUpdate))\n this.subscriptions.push(this.wavesurfer.on('scroll', onUpdate))\n }\n\n /** Unmount */\n public destroy() {\n super.destroy()\n this.wrapper.remove()\n }\n}\n\nexport default HoverPlugin\n" }, { "path": "src/plugins/minimap.ts", "content": "/**\n * Minimap is a tiny copy of the main waveform serving as a navigation tool.\n */\n\nimport BasePlugin, { type BasePluginEvents } from '../base-plugin.js'\nimport WaveSurfer, { type WaveSurferOptions } from '../wavesurfer.js'\nimport createElement from '../dom.js'\n\nexport type MinimapPluginOptions = {\n overlayColor?: string\n insertPosition?: InsertPosition\n} & Partial\n\nconst defaultOptions = {\n height: 50,\n overlayColor: 'rgba(100, 100, 100, 0.1)',\n insertPosition: 'afterend',\n}\n\nexport type MinimapPluginEvents = BasePluginEvents & {\n /** An alias of timeupdate but only when the audio is playing */\n audioprocess: [currentTime: number]\n /** When the user clicks on the waveform */\n click: [relativeX: number, relativeY: number]\n /** When the user double-clicks on the waveform */\n dblclick: [relativeX: number, relativeY: number]\n /** When the audio has been decoded */\n decode: [duration: number]\n /** When the user drags the cursor */\n drag: [relativeX: number]\n /** When the user ends dragging the cursor */\n dragend: [relativeX: number]\n /** When the user starts dragging the cursor */\n dragstart: [relativeX: number]\n /** When the user interacts with the waveform (i.g. clicks or drags on it) */\n interaction: []\n /** After the minimap is created */\n init: []\n /** When the audio is both decoded and can play */\n ready: []\n /** When visible waveform is drawn */\n redraw: []\n /** When all audio channel chunks of the waveform have drawn */\n redrawcomplete: []\n /** When the user seeks to a new position */\n seeking: [currentTime: number]\n /** On audio position change, fires continuously during playback */\n timeupdate: [currentTime: number]\n}\n\nclass MinimapPlugin extends BasePlugin {\n protected options: MinimapPluginOptions & typeof defaultOptions\n private minimapWrapper: HTMLElement\n private miniWavesurfer: WaveSurfer | null = null\n private miniSubscriptions: Array<() => void> = []\n private overlay: HTMLElement\n private container: HTMLElement | null = null\n private isInitializing = false\n private dragTimeout: ReturnType | null = null\n\n constructor(options: MinimapPluginOptions) {\n super(options)\n this.options = Object.assign({}, defaultOptions, options)\n\n this.minimapWrapper = this.initMinimapWrapper()\n this.overlay = this.initOverlay()\n }\n\n public static create(options: MinimapPluginOptions) {\n return new MinimapPlugin(options)\n }\n\n /** Called by wavesurfer, don't call manually */\n onInit() {\n if (!this.wavesurfer) {\n throw Error('WaveSurfer is not initialized')\n }\n\n if (this.options.container) {\n if (typeof this.options.container === 'string') {\n this.container = document.querySelector(this.options.container) as HTMLElement\n } else if (this.options.container instanceof HTMLElement) {\n this.container = this.options.container\n }\n this.container?.appendChild(this.minimapWrapper)\n } else {\n this.container = this.wavesurfer.getWrapper().parentElement\n this.container?.insertAdjacentElement(this.options.insertPosition, this.minimapWrapper)\n }\n\n this.initWaveSurferEvents()\n\n Promise.resolve().then(() => {\n this.initMinimap()\n })\n }\n\n private initMinimapWrapper(): HTMLElement {\n return createElement('div', {\n part: 'minimap',\n style: {\n position: 'relative',\n },\n })\n }\n\n private initOverlay(): HTMLElement {\n return createElement(\n 'div',\n {\n part: 'minimap-overlay',\n style: {\n position: 'absolute',\n zIndex: '2',\n left: '0',\n top: '0',\n bottom: '0',\n transition: 'left 100ms ease-out',\n pointerEvents: 'none',\n backgroundColor: this.options.overlayColor,\n },\n },\n this.minimapWrapper,\n )\n }\n\n private initMinimap() {\n // Prevent concurrent initialization\n if (this.isInitializing) return\n this.isInitializing = true\n\n this.destroyMinimap()\n\n if (!this.wavesurfer) {\n this.isInitializing = false\n return\n }\n\n const data = this.wavesurfer.getDecodedData()\n if (!data) {\n this.isInitializing = false\n return\n }\n\n const peaks = []\n for (let i = 0; i < data.numberOfChannels; i++) {\n peaks.push(data.getChannelData(i))\n }\n\n this.miniWavesurfer = WaveSurfer.create({\n ...this.options,\n container: this.minimapWrapper,\n minPxPerSec: 0,\n fillParent: true,\n url: undefined,\n media: undefined,\n peaks,\n duration: data.duration,\n })\n\n this.syncMinimapPosition(this.wavesurfer.getCurrentTime())\n\n this.miniSubscriptions.push(\n this.miniWavesurfer.on('audioprocess', (currentTime) => {\n this.emit('audioprocess', currentTime)\n }),\n\n this.miniWavesurfer.on('click', (relativeX, relativeY) => {\n this.wavesurfer?.seekTo(relativeX)\n this.emit('click', relativeX, relativeY)\n }),\n\n this.miniWavesurfer.on('dblclick', (relativeX, relativeY) => {\n this.emit('dblclick', relativeX, relativeY)\n }),\n\n this.miniWavesurfer.on('decode', (duration) => {\n this.emit('decode', duration)\n }),\n\n this.miniWavesurfer.on('destroy', () => {\n this.emit('destroy')\n }),\n\n this.miniWavesurfer.on('drag', (relativeX) => {\n this.onMinimapDrag(relativeX)\n this.emit('drag', relativeX)\n }),\n\n this.miniWavesurfer.on('dragend', (relativeX) => {\n this.emit('dragend', relativeX)\n }),\n\n this.miniWavesurfer.on('dragstart', (relativeX) => {\n this.emit('dragstart', relativeX)\n }),\n\n this.miniWavesurfer.on('interaction', () => {\n this.emit('interaction')\n }),\n\n this.miniWavesurfer.on('init', () => {\n this.emit('init')\n }),\n\n this.miniWavesurfer.on('ready', () => {\n this.syncMinimapPosition(this.wavesurfer?.getCurrentTime() || 0)\n this.emit('ready')\n }),\n\n this.miniWavesurfer.on('redraw', () => {\n this.emit('redraw')\n }),\n\n this.miniWavesurfer.on('redrawcomplete', () => {\n this.emit('redrawcomplete')\n }),\n\n this.miniWavesurfer.on('seeking', (currentTime) => {\n this.emit('seeking', currentTime)\n }),\n\n this.miniWavesurfer.on('timeupdate', (currentTime) => {\n this.emit('timeupdate', currentTime)\n }),\n )\n\n // Reset flag after initialization completes\n this.isInitializing = false\n }\n\n private getOverlayWidth(): number {\n const waveformWidth = this.wavesurfer?.getWrapper().clientWidth || 1\n return Math.round((this.minimapWrapper.clientWidth / waveformWidth) * 100)\n }\n\n private destroyMinimap() {\n const miniWavesurfer = this.miniWavesurfer\n this.miniWavesurfer = null\n miniWavesurfer?.destroy()\n this.miniSubscriptions.forEach((unsubscribe) => unsubscribe())\n this.miniSubscriptions = []\n\n if (this.dragTimeout) {\n clearTimeout(this.dragTimeout)\n this.dragTimeout = null\n }\n }\n\n private renderMainProgress(progress: number) {\n if (!this.wavesurfer) return\n this.wavesurfer.getRenderer().renderProgress(progress, this.wavesurfer.isPlaying())\n }\n\n private renderMinimapProgress(progress: number) {\n if (!this.wavesurfer || !this.miniWavesurfer) return\n this.miniWavesurfer.getRenderer().renderProgress(progress, this.wavesurfer.isPlaying())\n }\n\n private syncMinimapPosition(currentTime: number) {\n if (!this.wavesurfer || !this.miniWavesurfer) return\n\n const duration = this.wavesurfer.getDuration()\n if (!duration) return\n\n if (this.miniWavesurfer.getDuration()) {\n this.miniWavesurfer.setTime(currentTime)\n } else {\n this.renderMinimapProgress(currentTime / duration)\n }\n }\n\n private onMinimapDrag(relativeX: number) {\n if (!this.wavesurfer) return\n\n this.renderMainProgress(relativeX)\n\n if (this.dragTimeout) {\n clearTimeout(this.dragTimeout)\n }\n\n let debounceTime = 0\n const dragToSeek = this.options.dragToSeek\n\n if (!this.wavesurfer.isPlaying() && dragToSeek === true) {\n debounceTime = 200\n } else if (!this.wavesurfer.isPlaying() && dragToSeek && typeof dragToSeek === 'object') {\n debounceTime = dragToSeek.debounceTime ?? 200\n }\n\n this.dragTimeout = setTimeout(() => {\n this.wavesurfer?.seekTo(relativeX)\n this.dragTimeout = null\n }, debounceTime)\n }\n\n private onRedraw() {\n const overlayWidth = this.getOverlayWidth()\n this.overlay.style.width = `${overlayWidth}%`\n }\n\n private onScroll(startTime: number) {\n if (!this.wavesurfer) return\n const duration = this.wavesurfer.getDuration()\n this.overlay.style.left = `${(startTime / duration) * 100}%`\n }\n\n private initWaveSurferEvents() {\n if (!this.wavesurfer) return\n\n // Subscribe to decode, scroll and redraw events\n this.subscriptions.push(\n this.wavesurfer.on('decode', () => {\n this.initMinimap()\n }),\n\n this.wavesurfer.on('timeupdate', (currentTime: number) => {\n this.syncMinimapPosition(currentTime)\n }),\n\n this.wavesurfer.on('drag', (relativeX: number) => {\n this.renderMinimapProgress(relativeX)\n }),\n\n this.wavesurfer.on('scroll', (startTime: number) => {\n this.onScroll(startTime)\n }),\n\n this.wavesurfer.on('redraw', () => {\n this.onRedraw()\n }),\n )\n }\n\n /** Unmount */\n public destroy() {\n this.destroyMinimap()\n this.minimapWrapper.remove()\n this.container = null\n super.destroy()\n }\n}\n\nexport default MinimapPlugin\n" }, { "path": "src/plugins/record.ts", "content": "/**\n * Record audio from the microphone with a real-time waveform preview\n */\n\nimport BasePlugin, { type BasePluginEvents } from '../base-plugin.js'\nimport Timer from '../timer.js'\nimport type { WaveSurferOptions } from '../wavesurfer.js'\n\nexport type RecordPluginOptions = {\n /** The MIME type to use when recording audio */\n mimeType?: MediaRecorderOptions['mimeType']\n /** The audio bitrate to use when recording audio, defaults to 128000 to avoid a VBR encoding. */\n audioBitsPerSecond?: MediaRecorderOptions['audioBitsPerSecond']\n /** Whether to render the recorded audio at the end, true by default */\n renderRecordedAudio?: boolean\n /** Whether to render the scrolling waveform, false by default */\n scrollingWaveform?: boolean\n /** The duration of the scrolling waveform window, defaults to 5 seconds */\n scrollingWaveformWindow?: number\n /** Accumulate and render the waveform data as the audio is being recorded, false by default */\n continuousWaveform?: boolean\n /** The duration of the continuous waveform, in seconds */\n continuousWaveformDuration?: number\n /** The timeslice to use for the media recorder */\n mediaRecorderTimeslice?: number\n}\n\nexport type RecordPluginDeviceOptions = MediaTrackConstraints\n\nexport type RecordPluginEvents = BasePluginEvents & {\n /** Fires when the recording starts */\n 'record-start': []\n /** Fires when the recording is paused */\n 'record-pause': [blob: Blob]\n /** Fires when the recording is resumed */\n 'record-resume': []\n /* When the recording stops, either by calling stopRecording or when the media recorder stops */\n 'record-end': [blob: Blob]\n /** Fires continuously while recording */\n 'record-progress': [duration: number]\n /** On every new recorded chunk */\n 'record-data-available': [blob: Blob]\n}\n\ntype MicStream = {\n onDestroy: () => void\n onEnd: () => void\n}\n\nconst DEFAULT_BITS_PER_SECOND = 128000\nconst DEFAULT_SCROLLING_WAVEFORM_WINDOW = 5\nconst FPS = 100\n\nconst MIME_TYPES = ['audio/webm', 'audio/wav', 'audio/mpeg', 'audio/mp4', 'audio/mp3']\nconst findSupportedMimeType = () => MIME_TYPES.find((mimeType) => MediaRecorder.isTypeSupported(mimeType))\n\nclass RecordPlugin extends BasePlugin {\n private stream: MediaStream | null = null\n private mediaRecorder: MediaRecorder | null = null\n private dataWindow: Float32Array | null = null\n private isWaveformPaused = false\n private originalOptions?: Partial\n private timer: Timer\n private lastStartTime = 0\n private lastDuration = 0\n private duration = 0\n private micStream: MicStream | null = null\n private unsubscribeDestroy?: () => void\n private unsubscribeRecordEnd?: () => void\n private recordedBlobUrl: string | null = null\n\n /** Create an instance of the Record plugin */\n constructor(options: RecordPluginOptions) {\n super({\n ...options,\n audioBitsPerSecond: options.audioBitsPerSecond ?? DEFAULT_BITS_PER_SECOND,\n scrollingWaveform: options.scrollingWaveform ?? false,\n scrollingWaveformWindow: options.scrollingWaveformWindow ?? DEFAULT_SCROLLING_WAVEFORM_WINDOW,\n continuousWaveform: options.continuousWaveform ?? false,\n renderRecordedAudio: options.renderRecordedAudio ?? true,\n mediaRecorderTimeslice: options.mediaRecorderTimeslice ?? undefined,\n })\n\n this.timer = new Timer()\n\n this.subscriptions.push(\n this.timer.on('tick', () => {\n const currentTime = performance.now() - this.lastStartTime\n this.duration = this.isPaused() ? this.duration : this.lastDuration + currentTime\n this.emit('record-progress', this.duration)\n }),\n )\n }\n\n /** Create an instance of the Record plugin */\n public static create(options?: RecordPluginOptions) {\n return new RecordPlugin(options || {})\n }\n\n public renderMicStream(stream: MediaStream): MicStream {\n const audioContext = new AudioContext()\n const source = audioContext.createMediaStreamSource(stream)\n const analyser = audioContext.createAnalyser()\n source.connect(analyser)\n\n // Use smaller FFT size for more responsive peak detection\n if (this.options.continuousWaveform || this.options.scrollingWaveform) {\n analyser.fftSize = 32\n }\n const bufferLength = analyser.frequencyBinCount\n const dataArray = new Float32Array(bufferLength)\n\n let sampleIdx = 0\n\n if (this.wavesurfer) {\n this.originalOptions ??= {\n ...this.wavesurfer.options,\n }\n\n this.wavesurfer.options.interact = false\n if (this.options.scrollingWaveform) {\n this.wavesurfer.options.cursorWidth = 0\n // Use fixed max peak in scrolling mode to prevent \"dancing\" waveform\n this.wavesurfer.options.normalize = true\n this.wavesurfer.options.maxPeak = 1\n }\n }\n\n const drawWaveform = () => {\n if (this.isWaveformPaused) return\n\n analyser.getFloatTimeDomainData(dataArray)\n\n if (this.options.scrollingWaveform) {\n // Scrolling waveform - use peak values for smooth rendering\n const windowSize = Math.floor((this.options.scrollingWaveformWindow || 0) * FPS)\n\n // Calculate peak value from the current buffer\n let maxValue = 0\n for (let i = 0; i < bufferLength; i++) {\n const value = Math.abs(dataArray[i])\n if (value > maxValue) {\n maxValue = value\n }\n }\n\n if (!this.dataWindow) {\n this.dataWindow = new Float32Array(windowSize)\n }\n\n const tempArray = new Float32Array(windowSize)\n\n if (this.dataWindow && this.dataWindow.length > 0) {\n // Shift old data to the left, dropping the oldest sample\n const keepLength = windowSize - 1\n const oldData = this.dataWindow.slice(-keepLength)\n tempArray.set(oldData, 0)\n }\n\n // Add new peak value at the end\n tempArray[windowSize - 1] = maxValue\n this.dataWindow = tempArray\n } else if (this.options.continuousWaveform) {\n // Continuous waveform\n if (!this.dataWindow) {\n const size = this.options.continuousWaveformDuration\n ? Math.round(this.options.continuousWaveformDuration * FPS)\n : (this.wavesurfer?.getWidth() ?? 0) * window.devicePixelRatio\n this.dataWindow = new Float32Array(size)\n }\n\n let maxValue = 0\n for (let i = 0; i < bufferLength; i++) {\n const value = Math.abs(dataArray[i])\n if (value > maxValue) {\n maxValue = value\n }\n }\n\n if (sampleIdx + 1 > this.dataWindow.length) {\n const tempArray = new Float32Array(this.dataWindow.length * 2)\n tempArray.set(this.dataWindow, 0)\n this.dataWindow = tempArray\n }\n\n this.dataWindow[sampleIdx] = maxValue\n sampleIdx++\n } else {\n this.dataWindow = dataArray\n }\n\n // Render the waveform\n if (this.wavesurfer) {\n const totalDuration = (this.dataWindow?.length ?? 0) / FPS\n this.wavesurfer\n .load(\n '',\n [this.dataWindow],\n this.options.scrollingWaveform ? this.options.scrollingWaveformWindow : totalDuration,\n )\n .then(() => {\n if (this.wavesurfer && this.options.continuousWaveform) {\n this.wavesurfer.setTime(this.getDuration() / 1000)\n\n if (!this.wavesurfer.options.minPxPerSec) {\n this.wavesurfer.setOptions({\n minPxPerSec: this.wavesurfer.getWidth() / this.wavesurfer.getDuration(),\n })\n }\n }\n })\n .catch((err) => {\n console.error('Error rendering real-time recording data:', err)\n })\n }\n }\n\n const intervalId = setInterval(drawWaveform, 1000 / FPS)\n\n const cleanup = () => {\n clearInterval(intervalId)\n source?.disconnect()\n audioContext?.close()\n }\n\n return {\n onDestroy: cleanup,\n onEnd: () => {\n this.isWaveformPaused = true\n this.stopMic()\n },\n }\n }\n\n /** Request access to the microphone and start monitoring incoming audio */\n public async startMic(options?: RecordPluginDeviceOptions): Promise {\n // Stop previous mic stream if exists to clean up AudioContext\n if (this.micStream) {\n this.stopMic()\n }\n\n let stream: MediaStream\n try {\n stream = await navigator.mediaDevices.getUserMedia({\n audio: options ?? true,\n })\n } catch (err) {\n throw new Error('Error accessing the microphone: ' + (err as Error).message)\n }\n\n const micStream = this.renderMicStream(stream)\n this.micStream = micStream\n this.unsubscribeDestroy = this.once('destroy', micStream.onDestroy)\n this.unsubscribeRecordEnd = this.once('record-end', micStream.onEnd)\n this.stream = stream\n\n return stream\n }\n\n /** Stop monitoring incoming audio */\n public stopMic() {\n this.micStream?.onDestroy()\n this.unsubscribeDestroy?.()\n this.unsubscribeRecordEnd?.()\n this.micStream = null\n this.unsubscribeDestroy = undefined\n this.unsubscribeRecordEnd = undefined\n if (!this.stream) return\n this.stream.getTracks().forEach((track) => track.stop())\n this.stream = null\n this.mediaRecorder = null\n }\n\n /** Start recording audio from the microphone */\n public async startRecording(options?: RecordPluginDeviceOptions) {\n const stream = this.stream || (await this.startMic(options))\n this.dataWindow = null\n const mediaRecorder =\n this.mediaRecorder ||\n new MediaRecorder(stream, {\n mimeType: this.options.mimeType || findSupportedMimeType(),\n audioBitsPerSecond: this.options.audioBitsPerSecond,\n })\n this.mediaRecorder = mediaRecorder\n this.stopRecording()\n\n const recordedChunks: BlobPart[] = []\n\n mediaRecorder.ondataavailable = (event) => {\n if (event.data.size > 0) {\n recordedChunks.push(event.data)\n }\n this.emit('record-data-available', event.data)\n }\n\n const emitWithBlob = (ev: 'record-pause' | 'record-end') => {\n const blob = new Blob(recordedChunks, { type: mediaRecorder.mimeType })\n this.emit(ev, blob)\n if (this.options.renderRecordedAudio) {\n this.applyOriginalOptionsIfNeeded()\n // Revoke previous blob URL before creating a new one\n if (this.recordedBlobUrl) {\n URL.revokeObjectURL(this.recordedBlobUrl)\n }\n this.recordedBlobUrl = URL.createObjectURL(blob)\n this.wavesurfer?.load(this.recordedBlobUrl)\n }\n }\n\n mediaRecorder.onpause = () => emitWithBlob('record-pause')\n\n mediaRecorder.onstop = () => emitWithBlob('record-end')\n\n mediaRecorder.start(this.options.mediaRecorderTimeslice)\n this.lastStartTime = performance.now()\n this.lastDuration = 0\n this.duration = 0\n this.isWaveformPaused = false\n this.timer.start()\n\n this.emit('record-start')\n }\n\n /** Get the duration of the recording */\n public getDuration(): number {\n return this.duration\n }\n\n /** Check if the audio is being recorded */\n public isRecording(): boolean {\n return this.mediaRecorder?.state === 'recording'\n }\n\n public isPaused(): boolean {\n return this.mediaRecorder?.state === 'paused'\n }\n\n public isActive(): boolean {\n return this.mediaRecorder?.state !== 'inactive'\n }\n\n /** Stop the recording */\n public stopRecording() {\n if (this.isActive()) {\n this.mediaRecorder?.stop()\n this.timer.stop()\n }\n }\n\n /** Pause the recording */\n public pauseRecording() {\n if (this.isRecording()) {\n this.isWaveformPaused = true\n this.mediaRecorder?.requestData()\n this.mediaRecorder?.pause()\n this.timer.stop()\n this.lastDuration = this.duration\n }\n }\n\n /** Resume the recording */\n public resumeRecording() {\n if (this.isPaused()) {\n this.isWaveformPaused = false\n this.mediaRecorder?.resume()\n this.timer.start()\n this.lastStartTime = performance.now()\n this.emit('record-resume')\n }\n }\n\n /** Get a list of available audio devices\n * You can use this to get the device ID of the microphone to use with the startMic and startRecording methods\n * Will return an empty array if the browser doesn't support the MediaDevices API or if the user has not granted access to the microphone\n * You can ask for permission to the microphone by calling startMic\n */\n public static async getAvailableAudioDevices() {\n return navigator.mediaDevices\n .enumerateDevices()\n .then((devices) => devices.filter((device) => device.kind === 'audioinput'))\n }\n\n /** Destroy the plugin */\n public destroy() {\n this.applyOriginalOptionsIfNeeded()\n super.destroy()\n this.stopRecording()\n this.stopMic()\n // Revoke blob URL to free memory\n if (this.recordedBlobUrl) {\n URL.revokeObjectURL(this.recordedBlobUrl)\n this.recordedBlobUrl = null\n }\n }\n\n private applyOriginalOptionsIfNeeded() {\n if (this.wavesurfer && this.originalOptions) {\n this.wavesurfer.setOptions(this.originalOptions)\n delete this.originalOptions\n }\n }\n}\n\nexport default RecordPlugin\n" }, { "path": "src/plugins/regions.ts", "content": "/**\n * Regions are visual overlays on the waveform that can be used to mark segments of audio.\n * Regions can be clicked on, dragged and resized.\n * You can set the color and content of each region, as well as their HTML content.\n */\n\nimport BasePlugin, { type BasePluginEvents } from '../base-plugin.js'\nimport EventEmitter from '../event-emitter.js'\nimport createElement from '../dom.js'\nimport { createDragStream } from '../reactive/drag-stream.js'\nimport { effect } from '../reactive/store.js'\nimport { fromEvent, cleanup as cleanupStream } from '../reactive/event-streams.js'\n\nexport type RegionsPluginOptions = undefined\nexport type UpdateSide = 'start' | 'end'\nexport type RegionsPluginEvents = BasePluginEvents & {\n /** When a new region is initialized but not rendered yet */\n 'region-initialized': [region: Region]\n /** When a region is created */\n 'region-created': [region: Region]\n /** When a region is being updated */\n 'region-update': [region: Region, side?: UpdateSide]\n /** When a region is done updating */\n 'region-updated': [region: Region, side?: UpdateSide]\n /** When a region is removed */\n 'region-removed': [region: Region]\n /** When a region is clicked */\n 'region-clicked': [region: Region, e: MouseEvent]\n /** When a region is double-clicked */\n 'region-double-clicked': [region: Region, e: MouseEvent]\n /** When playback enters a region */\n 'region-in': [region: Region]\n /** When playback leaves a region */\n 'region-out': [region: Region]\n /** When region content is changed */\n 'region-content-changed': [region: Region]\n}\n\nexport type RegionEvents = {\n /** Before the region is removed */\n remove: []\n /** When the region's parameters are being updated */\n update: [side?: UpdateSide]\n /** When dragging or resizing is finished */\n 'update-end': [side?: UpdateSide]\n /** When the region needs to be re-rendered */\n render: []\n /** On play */\n play: [end?: number]\n /** On mouse click */\n click: [event: MouseEvent]\n /** Double click */\n dblclick: [event: MouseEvent]\n /** Mouse over */\n over: [event: MouseEvent]\n /** Mouse leave */\n leave: [event: MouseEvent]\n /** content changed */\n 'content-changed': []\n}\n\nexport type RegionParams = {\n /** The id of the region, any string */\n id?: string\n /** The start position of the region (in seconds) */\n start: number\n /** The end position of the region (in seconds) */\n end?: number\n /** Allow/dissallow dragging the region */\n drag?: boolean\n /** Allow/dissallow resizing the region */\n resize?: boolean\n /** Allow/dissallow resizing the start of the region */\n resizeStart?: boolean\n /** Allow/dissallow resizing the end of the region */\n resizeEnd?: boolean\n /** The color of the region (CSS color) */\n color?: string\n /** Content string or HTML element */\n content?: string | HTMLElement\n /** Min length when resizing (in seconds) */\n minLength?: number\n /** Max length when resizing (in seconds) */\n maxLength?: number\n /** The index of the channel */\n channelIdx?: number\n /** Allow/Disallow contenteditable property for content */\n contentEditable?: boolean\n}\n\nclass SingleRegion extends EventEmitter implements Region {\n public element: HTMLElement | null = null // Element is created on init\n public id: string\n public start: number\n public end: number\n public drag: boolean\n public resize: boolean\n public resizeStart: boolean\n public resizeEnd: boolean\n public color: string\n public content?: HTMLElement\n public minLength = 0\n public maxLength = Infinity\n public channelIdx: number\n public contentEditable = false\n public subscriptions: (() => void)[] = []\n public updatingSide?: UpdateSide = undefined\n public isRemoved = false\n private contentClickListener?: (e: MouseEvent) => void\n private contentBlurListener?: () => void\n\n constructor(\n params: RegionParams,\n private totalDuration: number,\n private numberOfChannels = 0,\n ) {\n super()\n\n this.subscriptions = []\n this.id = params.id || `region-${Math.random().toString(32).slice(2)}`\n this.start = this.clampPosition(params.start)\n this.end = this.clampPosition(params.end ?? params.start)\n this.drag = params.drag ?? true\n this.resize = params.resize ?? true\n this.resizeStart = params.resizeStart ?? true\n this.resizeEnd = params.resizeEnd ?? true\n this.color = params.color ?? 'rgba(0, 0, 0, 0.1)'\n this.minLength = params.minLength ?? this.minLength\n this.maxLength = params.maxLength ?? this.maxLength\n this.channelIdx = params.channelIdx ?? -1\n this.contentEditable = params.contentEditable ?? this.contentEditable\n this.element = this.initElement()\n this.setContent(params.content)\n this.setPart()\n\n this.renderPosition()\n this.initMouseEvents()\n }\n\n private clampPosition(time: number): number {\n return Math.max(0, Math.min(this.totalDuration, time))\n }\n\n private setPart() {\n const isMarker = this.start === this.end\n this.element?.setAttribute('part', `${isMarker ? 'marker' : 'region'} ${this.id}`)\n }\n\n private addResizeHandles(element: HTMLElement) {\n const handleStyle = {\n position: 'absolute',\n zIndex: '2',\n width: '6px',\n height: '100%',\n top: '0',\n cursor: 'ew-resize',\n wordBreak: 'keep-all',\n }\n\n const leftHandle = createElement(\n 'div',\n {\n part: 'region-handle region-handle-left',\n style: {\n ...handleStyle,\n left: '0',\n borderLeft: '2px solid rgba(0, 0, 0, 0.5)',\n borderRadius: '2px 0 0 2px',\n },\n },\n element,\n )\n\n const rightHandle = createElement(\n 'div',\n {\n part: 'region-handle region-handle-right',\n style: {\n ...handleStyle,\n right: '0',\n borderRight: '2px solid rgba(0, 0, 0, 0.5)',\n borderRadius: '0 2px 2px 0',\n },\n },\n element,\n )\n\n // Resize\n const resizeThreshold = 1\n const leftDragStream = createDragStream(leftHandle, { threshold: resizeThreshold })\n const rightDragStream = createDragStream(rightHandle, { threshold: resizeThreshold })\n\n const unsubscribeLeft = effect(() => {\n const drag = leftDragStream.signal.value\n if (!drag) return\n if (drag.type === 'move' && drag.deltaX !== undefined) {\n this.onResize(drag.deltaX, 'start')\n } else if (drag.type === 'end') {\n this.onEndResizing('start')\n }\n }, [leftDragStream.signal])\n\n const unsubscribeRight = effect(() => {\n const drag = rightDragStream.signal.value\n if (!drag) return\n if (drag.type === 'move' && drag.deltaX !== undefined) {\n this.onResize(drag.deltaX, 'end')\n } else if (drag.type === 'end') {\n this.onEndResizing('end')\n }\n }, [rightDragStream.signal])\n\n this.subscriptions.push(() => {\n unsubscribeLeft()\n unsubscribeRight()\n leftDragStream.cleanup()\n rightDragStream.cleanup()\n })\n }\n\n private removeResizeHandles(element: HTMLElement) {\n const leftHandle = element.querySelector('[part*=\"region-handle-left\"]')\n const rightHandle = element.querySelector('[part*=\"region-handle-right\"]')\n if (leftHandle) {\n element.removeChild(leftHandle)\n }\n if (rightHandle) {\n element.removeChild(rightHandle)\n }\n }\n\n private initElement(): HTMLElement | null {\n if (this.isRemoved) return null\n\n const isMarker = this.start === this.end\n\n let elementTop = 0\n let elementHeight = 100\n\n if (this.channelIdx >= 0 && this.numberOfChannels > 0 && this.channelIdx < this.numberOfChannels) {\n elementHeight = 100 / this.numberOfChannels\n elementTop = elementHeight * this.channelIdx\n }\n\n const element = createElement('div', {\n style: {\n position: 'absolute',\n top: `${elementTop}%`,\n height: `${elementHeight}%`,\n backgroundColor: isMarker ? 'none' : this.color,\n borderLeft: isMarker ? '2px solid ' + this.color : 'none',\n borderRadius: '2px',\n boxSizing: 'border-box',\n transition: 'background-color 0.2s ease',\n cursor: this.drag ? 'grab' : 'default',\n pointerEvents: 'all',\n },\n })\n\n // Add resize handles\n if (!isMarker && this.resize) {\n this.addResizeHandles(element)\n }\n\n return element\n }\n\n private renderPosition() {\n if (!this.element) return\n const start = this.start / this.totalDuration\n const end = (this.totalDuration - this.end) / this.totalDuration\n this.element.style.left = `${start * 100}%`\n this.element.style.right = `${end * 100}%`\n }\n\n private toggleCursor(toggle: boolean) {\n if (!this.drag || !this.element?.style) return\n this.element.style.cursor = toggle ? 'grabbing' : 'grab'\n }\n\n private initMouseEvents() {\n const { element } = this\n if (!element) return\n\n // Create event streams\n const clicks = fromEvent(element, 'click')\n const mouseenters = fromEvent(element, 'mouseenter')\n const mouseleaves = fromEvent(element, 'mouseleave')\n const dblclicks = fromEvent(element, 'dblclick')\n const pointerdowns = fromEvent(element, 'pointerdown')\n const pointerups = fromEvent(element, 'pointerup')\n\n // Subscribe to streams\n const unsubscribeClick = clicks.subscribe((e) => e && this.emit('click', e))\n const unsubscribeMouseenter = mouseenters.subscribe((e) => e && this.emit('over', e))\n const unsubscribeMouseleave = mouseleaves.subscribe((e) => e && this.emit('leave', e))\n const unsubscribeDblclick = dblclicks.subscribe((e) => e && this.emit('dblclick', e))\n const unsubscribePointerdown = pointerdowns.subscribe((e) => e && this.toggleCursor(true))\n const unsubscribePointerup = pointerups.subscribe((e) => e && this.toggleCursor(false))\n\n // Store cleanup\n this.subscriptions.push(() => {\n unsubscribeClick()\n unsubscribeMouseenter()\n unsubscribeMouseleave()\n unsubscribeDblclick()\n unsubscribePointerdown()\n unsubscribePointerup()\n cleanupStream(clicks)\n cleanupStream(mouseenters)\n cleanupStream(mouseleaves)\n cleanupStream(dblclicks)\n cleanupStream(pointerdowns)\n cleanupStream(pointerups)\n })\n\n // Drag\n const dragStream = createDragStream(element)\n\n const unsubscribeDrag = effect(() => {\n const drag = dragStream.signal.value\n if (!drag) return\n\n if (drag.type === 'start') {\n this.toggleCursor(true)\n } else if (drag.type === 'move' && drag.deltaX !== undefined) {\n this.onMove(drag.deltaX)\n } else if (drag.type === 'end') {\n this.toggleCursor(false)\n if (this.drag) this.emit('update-end')\n }\n }, [dragStream.signal])\n\n this.subscriptions.push(() => {\n unsubscribeDrag()\n dragStream.cleanup()\n })\n\n if (this.contentEditable && this.content) {\n this.contentClickListener = (e) => this.onContentClick(e)\n this.contentBlurListener = () => this.onContentBlur()\n this.content.addEventListener('click', this.contentClickListener)\n this.content.addEventListener('blur', this.contentBlurListener)\n }\n }\n\n public _onUpdate(dx: number, side?: UpdateSide, startTime?: number) {\n if (!this.element?.parentElement) return\n const { width } = this.element.parentElement.getBoundingClientRect()\n const deltaSeconds = (dx / width) * this.totalDuration\n let newStart = !side || side === 'start' ? this.start + deltaSeconds : this.start\n let newEnd = !side || side === 'end' ? this.end + deltaSeconds : this.end\n const isRegionCreating = startTime !== undefined // startTime is passed when the region is being created.\n if (isRegionCreating) {\n if (this.updatingSide && this.updatingSide !== side) {\n if (this.updatingSide === 'start') {\n newStart = startTime\n } else {\n newEnd = startTime\n }\n }\n }\n\n newStart = Math.max(0, newStart)\n newEnd = Math.min(this.totalDuration, newEnd)\n const length = newEnd - newStart\n\n this.updatingSide = side\n const resizeValid = length >= this.minLength && length <= this.maxLength\n if (newStart <= newEnd && (resizeValid || isRegionCreating)) {\n this.start = newStart\n this.end = newEnd\n\n this.renderPosition()\n this.emit('update', side)\n }\n }\n\n private onMove(dx: number) {\n if (!this.drag) return\n this._onUpdate(dx)\n }\n\n private onResize(dx: number, side: UpdateSide) {\n if (!this.resize) return\n if (!this.resizeStart && side === 'start') return\n if (!this.resizeEnd && side === 'end') return\n this._onUpdate(dx, side)\n }\n\n private onEndResizing(side: UpdateSide) {\n if (!this.resize) return\n this.emit('update-end', side)\n this.updatingSide = undefined\n }\n\n private onContentClick(event: MouseEvent) {\n event.stopPropagation()\n const contentContainer = event.target as HTMLDivElement\n contentContainer.focus()\n this.emit('click', event)\n }\n\n public onContentBlur() {\n this.emit('update-end')\n }\n\n public _setTotalDuration(totalDuration: number) {\n this.totalDuration = totalDuration\n this.renderPosition()\n }\n\n /** Play the region from the start, pass `true` to stop at region end */\n public play(stopAtEnd?: boolean) {\n this.emit('play', stopAtEnd && this.end !== this.start ? this.end : undefined)\n }\n\n /** Get Content as html or string */\n public getContent(asHTML: boolean = false): string | HTMLElement | undefined {\n if (asHTML) {\n return this.content || undefined\n }\n if (this.element instanceof HTMLElement) {\n return this.content?.innerHTML || undefined\n }\n return ''\n }\n\n /** Set the HTML content of the region */\n public setContent(content: RegionParams['content']) {\n if (!this.element) return\n\n // Remove event listeners from old content before removing it\n if (this.content && this.contentEditable) {\n if (this.contentClickListener) {\n this.content.removeEventListener('click', this.contentClickListener)\n }\n if (this.contentBlurListener) {\n this.content.removeEventListener('blur', this.contentBlurListener)\n }\n }\n\n this.content?.remove()\n if (!content) {\n this.content = undefined\n return\n }\n if (typeof content === 'string') {\n const isMarker = this.start === this.end\n this.content = createElement('div', {\n style: {\n padding: `0.2em ${isMarker ? 0.2 : 0.4}em`,\n display: 'inline-block',\n },\n textContent: content,\n })\n } else {\n this.content = content\n }\n if (this.contentEditable) {\n this.content.contentEditable = 'true'\n // Re-add event listeners to new content\n this.contentClickListener = (e) => this.onContentClick(e)\n this.contentBlurListener = () => this.onContentBlur()\n this.content.addEventListener('click', this.contentClickListener)\n this.content.addEventListener('blur', this.contentBlurListener)\n }\n this.content.setAttribute('part', 'region-content')\n this.element.appendChild(this.content)\n this.emit('content-changed')\n }\n\n /** Update the region's options */\n public setOptions(\n options: Partial<\n Pick\n >,\n ) {\n if (!this.element) return\n\n if (options.color) {\n this.color = options.color\n this.element.style.backgroundColor = this.color\n }\n\n if (options.drag !== undefined) {\n this.drag = options.drag\n this.element.style.cursor = this.drag ? 'grab' : 'default'\n }\n\n if (options.start !== undefined || options.end !== undefined) {\n const isMarker = this.start === this.end\n this.start = this.clampPosition(options.start ?? this.start)\n this.end = this.clampPosition(options.end ?? (isMarker ? this.start : this.end))\n this.renderPosition()\n this.setPart()\n this.emit('render')\n }\n\n if (options.content) {\n this.setContent(options.content)\n }\n\n if (options.id) {\n this.id = options.id\n this.setPart()\n }\n\n if (options.resize !== undefined && options.resize !== this.resize) {\n const isMarker = this.start === this.end\n this.resize = options.resize\n if (this.resize && !isMarker) {\n this.addResizeHandles(this.element)\n } else {\n this.removeResizeHandles(this.element)\n }\n }\n\n if (options.resizeStart !== undefined) {\n this.resizeStart = options.resizeStart\n }\n\n if (options.resizeEnd !== undefined) {\n this.resizeEnd = options.resizeEnd\n }\n }\n\n /** Remove the region */\n public remove() {\n this.isRemoved = true\n this.emit('remove')\n\n // Clean up all subscriptions (drag streams, event listeners, etc.)\n this.subscriptions.forEach((unsubscribe) => unsubscribe())\n this.subscriptions = []\n\n // Clean up content event listeners\n if (this.content && this.contentEditable) {\n if (this.contentClickListener) {\n this.content.removeEventListener('click', this.contentClickListener)\n this.contentClickListener = undefined\n }\n if (this.contentBlurListener) {\n this.content.removeEventListener('blur', this.contentBlurListener)\n this.contentBlurListener = undefined\n }\n }\n\n // Remove DOM element\n if (this.element) {\n this.element.remove()\n this.element = null\n }\n\n // Clear all event listeners from the EventEmitter\n this.unAll()\n }\n}\n\nclass RegionsPlugin extends BasePlugin {\n private regions: Region[] = []\n private regionsContainer: HTMLElement\n\n /** Create an instance of RegionsPlugin */\n constructor(options?: RegionsPluginOptions) {\n super(options)\n this.regionsContainer = this.initRegionsContainer()\n }\n\n /** Create an instance of RegionsPlugin */\n public static create(options?: RegionsPluginOptions) {\n return new RegionsPlugin(options)\n }\n\n /** Called by wavesurfer, don't call manually */\n onInit() {\n if (!this.wavesurfer) {\n throw Error('WaveSurfer is not initialized')\n }\n this.wavesurfer.getWrapper().appendChild(this.regionsContainer)\n\n // Update region durations when a new audio file is loaded\n this.subscriptions.push(\n this.wavesurfer.on('ready', (duration) => {\n this.regions.forEach((region) => region._setTotalDuration(duration))\n }),\n )\n\n let activeRegions: Region[] = []\n this.subscriptions.push(\n this.wavesurfer.on('timeupdate', (currentTime) => {\n // Detect when regions are being played\n const playedRegions = this.regions.filter(\n (region) =>\n region.start <= currentTime &&\n (region.end === region.start ? region.start + 0.05 : region.end) >= currentTime,\n )\n\n // Trigger region-in when activeRegions doesn't include a played regions\n playedRegions.forEach((region) => {\n if (!activeRegions.includes(region)) {\n this.emit('region-in', region)\n }\n })\n\n // Trigger region-out when activeRegions include a un-played regions\n activeRegions.forEach((region) => {\n if (!playedRegions.includes(region)) {\n this.emit('region-out', region)\n }\n })\n\n // Update activeRegions only played regions\n activeRegions = playedRegions\n }),\n )\n }\n\n private initRegionsContainer(): HTMLElement {\n return createElement('div', {\n part: 'regions-container',\n style: {\n position: 'absolute',\n top: '0',\n left: '0',\n width: '100%',\n height: '100%',\n zIndex: '5',\n pointerEvents: 'none',\n },\n })\n }\n\n /** Get all created regions */\n public getRegions(): Region[] {\n return this.regions\n }\n\n private avoidOverlapping(region: Region) {\n if (!region.content || region.isRemoved) return\n\n setTimeout(() => {\n // Check that the label doesn't overlap with other labels\n // If it does, push it down until it doesn't\n // only check regions that are before us in the list -- otherwise\n // both overlapping regions will try to move down away from each other.\n const div = region.content as HTMLElement\n const box = div.getBoundingClientRect()\n\n const regionIndex = this.regions.indexOf(region)\n\n const overlap = this.regions\n .slice(0, regionIndex)\n .filter((reg) => !reg.isRemoved)\n .map((reg) => {\n if (reg === region || !reg.content) return 0\n\n const otherBox = reg.content.getBoundingClientRect()\n if (box.left < otherBox.left + otherBox.width && otherBox.left < box.left + box.width) {\n return otherBox.height + 2\n }\n return 0\n })\n .reduce((sum, val) => sum + val, 0)\n\n div.style.marginTop = `${overlap}px`\n }, 10)\n }\n\n private adjustScroll(region: Region) {\n if (!region.element) return\n const scrollContainer = this.wavesurfer?.getWrapper()?.parentElement\n if (!scrollContainer) return\n const { clientWidth, scrollWidth } = scrollContainer\n if (scrollWidth <= clientWidth) return\n const scrollBbox = scrollContainer.getBoundingClientRect()\n const bbox = region.element.getBoundingClientRect()\n const left = bbox.left - scrollBbox.left\n const right = bbox.right - scrollBbox.left\n if (left < 0) {\n scrollContainer.scrollLeft += left\n } else if (right > clientWidth) {\n scrollContainer.scrollLeft += right - clientWidth\n }\n }\n\n private virtualAppend(region: Region, container: HTMLElement, element: HTMLElement) {\n const renderIfVisible = () => {\n if (!this.wavesurfer) return\n const clientWidth = this.wavesurfer.getWidth()\n const scrollLeft = this.wavesurfer.getScroll()\n const scrollWidth = container.clientWidth\n const duration = this.wavesurfer.getDuration()\n const start = Math.round((region.start / duration) * scrollWidth)\n const width = Math.round(((region.end - region.start) / duration) * scrollWidth) || 1\n\n // Check if the region is between the scrollLeft and scrollLeft + clientWidth\n const isVisible = start + width > scrollLeft && start < scrollLeft + clientWidth\n\n if (isVisible && !element.parentElement) {\n container.appendChild(element)\n } else if (!isVisible && element.parentElement) {\n element.remove()\n }\n }\n\n setTimeout(() => {\n // Check if region was removed before setTimeout executed\n if (!this.wavesurfer || !region.element) return\n renderIfVisible()\n\n const unsubscribeScroll = this.wavesurfer.on('scroll', renderIfVisible)\n const unsubscribeZoom = this.wavesurfer.on('zoom', renderIfVisible)\n const unsubscribeResize = this.wavesurfer.on('resize', renderIfVisible)\n const unsubscribeRender = region.on('render', renderIfVisible)\n\n // Only push the unsubscribe functions, not the once() return values\n this.subscriptions.push(unsubscribeScroll, unsubscribeZoom, unsubscribeResize, unsubscribeRender)\n\n // Clean up subscriptions when region is removed\n region.once('remove', () => {\n unsubscribeScroll()\n unsubscribeZoom()\n unsubscribeResize()\n unsubscribeRender()\n })\n }, 0)\n }\n\n private saveRegion(region: Region) {\n if (!region.element) return\n this.virtualAppend(region, this.regionsContainer, region.element)\n this.avoidOverlapping(region)\n this.regions.push(region)\n\n const regionSubscriptions = [\n region.on('update', (side) => {\n // Undefined side indicates that we are dragging not resizing\n if (!side) {\n this.adjustScroll(region)\n }\n this.emit('region-update', region, side)\n }),\n\n region.on('update-end', (side) => {\n this.avoidOverlapping(region)\n this.emit('region-updated', region, side)\n }),\n\n region.on('play', (end?: number) => {\n this.wavesurfer?.play(region.start, end)\n }),\n\n region.on('click', (e) => {\n this.emit('region-clicked', region, e)\n }),\n\n region.on('dblclick', (e) => {\n this.emit('region-double-clicked', region, e)\n }),\n region.on('content-changed', () => {\n this.emit('region-content-changed', region)\n }),\n\n // Remove the region from the list when it's removed\n region.once('remove', () => {\n regionSubscriptions.forEach((unsubscribe) => unsubscribe())\n this.regions = this.regions.filter((reg) => reg !== region)\n this.emit('region-removed', region)\n }),\n ]\n\n this.subscriptions.push(...regionSubscriptions)\n\n this.emit('region-created', region)\n }\n\n /** Create a region with given parameters */\n public addRegion(options: RegionParams): Region {\n if (!this.wavesurfer) {\n throw Error('WaveSurfer is not initialized')\n }\n\n const duration = this.wavesurfer.getDuration()\n const numberOfChannels = this.wavesurfer?.getDecodedData()?.numberOfChannels\n const region = new SingleRegion(options, duration, numberOfChannels)\n this.emit('region-initialized', region)\n\n if (!duration) {\n this.subscriptions.push(\n this.wavesurfer.once('ready', (duration) => {\n region._setTotalDuration(duration)\n this.saveRegion(region)\n }),\n )\n } else {\n this.saveRegion(region)\n }\n\n return region\n }\n\n /**\n * Enable creation of regions by dragging on an empty space on the waveform.\n * Returns a function to disable the drag selection.\n */\n public enableDragSelection(options: Omit, threshold = 3): () => void {\n const wrapper = this.wavesurfer?.getWrapper()\n if (!wrapper || !(wrapper instanceof HTMLElement)) return () => undefined\n\n const initialSize = 5\n let region: Region | null = null\n let startX = 0\n let startTime = 0\n\n const dragStream = createDragStream(wrapper, { threshold })\n\n const unsubscribe = effect(() => {\n const drag = dragStream.signal.value\n if (!drag) return\n\n if (drag.type === 'start') {\n // On drag start\n startX = drag.x\n if (!this.wavesurfer) return\n const duration = this.wavesurfer.getDuration()\n const numberOfChannels = this.wavesurfer?.getDecodedData()?.numberOfChannels\n const { width } = this.wavesurfer.getWrapper().getBoundingClientRect()\n startTime = (startX / width) * duration\n\n // Calculate the start time of the region\n const start = (drag.x / width) * duration\n // Give the region a small initial size\n const end = ((drag.x + initialSize) / width) * duration\n\n // Create a region but don't save it until the drag ends\n region = new SingleRegion(\n {\n ...options,\n start,\n end,\n },\n duration,\n numberOfChannels,\n )\n\n this.emit('region-initialized', region)\n\n // Just add it to the DOM for now\n if (region.element) {\n this.regionsContainer.appendChild(region.element)\n }\n } else if (drag.type === 'move' && drag.deltaX !== undefined) {\n // On drag move\n if (region) {\n // Update the end position of the region\n // If we're dragging to the left, we need to update the start instead\n region._onUpdate(drag.deltaX, drag.x > startX ? 'end' : 'start', startTime)\n }\n } else if (drag.type === 'end') {\n // On drag end\n if (region) {\n this.saveRegion(region)\n region.updatingSide = undefined\n region = null\n }\n }\n }, [dragStream.signal])\n\n return () => {\n unsubscribe()\n dragStream.cleanup()\n }\n }\n\n /** Remove all regions */\n public clearRegions() {\n const regions = this.regions.slice()\n regions.forEach((region) => region.remove())\n this.regions = []\n }\n\n /** Destroy the plugin and clean up */\n public destroy() {\n this.clearRegions()\n super.destroy()\n this.regionsContainer.remove()\n }\n}\n\nexport default RegionsPlugin\nexport type Region = SingleRegion\n" }, { "path": "src/plugins/spectrogram-windowed.ts", "content": "/**\n * Windowed Spectrogram plugin - Optimized for very long audio files\n *\n * Only renders frequency data in a sliding window around the current viewport,\n * keeping memory usage constant regardless of audio length.\n */\n\n// @ts-nocheck\n\nimport BasePlugin, { type BasePluginEvents } from '../base-plugin.js'\nimport createElement from '../dom.js'\n// Import centralized FFT functionality\nimport FFT, {\n hzToScale,\n scaleToHz,\n createFilterBankForScale,\n applyFilterBank,\n setupColorMap,\n freqType,\n unitType,\n getLabelFrequency,\n createWrapperClickHandler,\n} from '../fft.js'\n\n// Import the worker using rollup-plugin-web-worker-loader\nimport SpectrogramWorker from 'web-worker:./spectrogram-worker.ts'\n\nexport type WindowedSpectrogramPluginOptions = {\n /** Selector of element or element in which to render */\n container?: string | HTMLElement\n /** Number of samples to fetch to FFT. Must be a power of 2. */\n fftSamples?: number\n /** Height of the spectrogram view in CSS pixels */\n height?: number\n /** Set to true to display frequency labels. */\n labels?: boolean\n labelsBackground?: string\n labelsColor?: string\n labelsHzColor?: string\n /** Size of the overlapping window. Must be < fftSamples. */\n noverlap?: number\n /** The window function to be used. */\n windowFunc?:\n | 'bartlett'\n | 'bartlettHann'\n | 'blackman'\n | 'cosine'\n | 'gauss'\n | 'hamming'\n | 'hann'\n | 'lanczoz'\n | 'rectangular'\n | 'triangular'\n /** Some window functions have this extra value. (Between 0 and 1) */\n alpha?: number\n /** Min frequency to scale spectrogram. */\n frequencyMin?: number\n /** Max frequency to scale spectrogram. */\n frequencyMax?: number\n /** Sample rate of the audio when using pre-computed spectrogram data. */\n sampleRate?: number\n /** Frequency scale type */\n scale?: 'linear' | 'logarithmic' | 'mel' | 'bark' | 'erb'\n /** Gain in dB */\n gainDB?: number\n /** Range in dB */\n rangeDB?: number\n /** Color map */\n colorMap?: number[][] | 'gray' | 'igray' | 'roseus'\n /** Render a spectrogram for each channel independently when true. */\n splitChannels?: boolean\n /** Window size in seconds (how much data to keep in memory) */\n windowSize?: number\n /** Buffer size in pixels (how much extra to render beyond viewport) */\n bufferSize?: number\n /** Enable progressive background loading of all segments (default: true) */\n progressiveLoading?: boolean\n /** Use web worker for FFT calculations (default: true) */\n useWebWorker?: boolean\n}\n\nexport type WindowedSpectrogramPluginEvents = BasePluginEvents & {\n ready: []\n click: [relativeX: number]\n progress: [progress: number] // Progress from 0 to 1\n}\n\n/**\n * Represents a segment of frequency data in the sliding window\n */\ninterface FrequencySegment {\n startTime: number\n endTime: number\n startPixel: number\n endPixel: number\n frequencies: Uint8Array[][]\n canvas?: HTMLCanvasElement\n}\n\nclass WindowedSpectrogramPlugin extends BasePlugin {\n private container: HTMLElement\n private wrapper: HTMLElement\n private labelsEl: HTMLCanvasElement\n private canvasContainer: HTMLElement\n private colorMap: number[][]\n private fftSamples: WindowedSpectrogramPluginOptions['fftSamples']\n private height: WindowedSpectrogramPluginOptions['height']\n private noverlap: WindowedSpectrogramPluginOptions['noverlap']\n private windowFunc: WindowedSpectrogramPluginOptions['windowFunc']\n private alpha: WindowedSpectrogramPluginOptions['alpha']\n private frequencyMin: WindowedSpectrogramPluginOptions['frequencyMin']\n private frequencyMax: WindowedSpectrogramPluginOptions['frequencyMax']\n private gainDB: WindowedSpectrogramPluginOptions['gainDB']\n private rangeDB: WindowedSpectrogramPluginOptions['rangeDB']\n private scale: WindowedSpectrogramPluginOptions['scale']\n\n // Windowing properties\n private windowSize: number // seconds\n private bufferSize: number // pixels\n private progressiveLoading: boolean\n private useWebWorker: boolean\n private segments: Map = new Map()\n private buffer: AudioBuffer | null = null\n private currentPosition = 0 // current playback position in seconds\n private pixelsPerSecond = 0\n private isRendering = false\n private renderTimeout: number | null = null\n\n // FFT and processing\n private fft: FFT | null = null\n private numMelFilters: number\n private numLogFilters: number\n private numBarkFilters: number\n private numErbFilters: number\n\n // Progressive loading\n private progressiveLoadTimeout: number | null = null\n private isProgressiveLoading = false\n private nextProgressiveSegmentTime = 0 // Track which segment to load next\n\n // Web worker for FFT calculations\n private worker: Worker | null = null\n private workerPromises: Map = new Map()\n\n static create(options?: WindowedSpectrogramPluginOptions) {\n return new WindowedSpectrogramPlugin(options || {})\n }\n\n constructor(options: WindowedSpectrogramPluginOptions) {\n super(options)\n\n this.container =\n 'string' == typeof options.container ? document.querySelector(options.container) : options.container\n\n // Set up color map using shared utility\n this.colorMap = setupColorMap(options.colorMap)\n\n // FFT and processing options\n this.fftSamples = options.fftSamples || 512\n this.height = options.height || 200\n this.noverlap = options.noverlap || null // Will be calculated later based on canvas size, like normal plugin\n this.windowFunc = options.windowFunc || 'hann'\n this.alpha = options.alpha\n this.frequencyMin = options.frequencyMin || 0\n this.frequencyMax = options.frequencyMax || 0\n this.gainDB = options.gainDB ?? 20\n this.rangeDB = options.rangeDB ?? 80\n this.scale = options.scale || 'mel'\n\n // Windowing options\n this.windowSize = options.windowSize || 30 // 30 seconds window\n this.bufferSize = options.bufferSize || 5000 // 5000 pixels buffer\n\n // Progressive loading (disabled by default to avoid system overload)\n this.progressiveLoading = options.progressiveLoading === true\n\n // Web worker (disabled by default in SSR environments like Next.js)\n this.useWebWorker = options.useWebWorker === true && typeof window !== 'undefined'\n\n // Filter banks\n this.numMelFilters = this.fftSamples / 2\n this.numLogFilters = this.fftSamples / 2\n this.numBarkFilters = this.fftSamples / 2\n this.numErbFilters = this.fftSamples / 2\n\n this.createWrapper()\n this.createCanvas()\n\n // Initialize worker if enabled\n if (this.useWebWorker) {\n this.initializeWorker()\n }\n }\n\n private initializeWorker() {\n // Skip worker initialization in SSR environments (Next.js server-side)\n if (typeof window === 'undefined' || typeof Worker === 'undefined') {\n console.warn('Worker not available in this environment, using main thread calculation')\n return\n }\n\n try {\n // Create worker using imported worker constructor\n this.worker = new SpectrogramWorker()\n\n this.worker.onmessage = (e) => {\n const { type, id, result, error } = e.data\n\n if (type === 'frequenciesResult') {\n const promise = this.workerPromises.get(id)\n if (promise) {\n this.workerPromises.delete(id)\n if (error) {\n promise.reject(new Error(error))\n } else {\n promise.resolve(result)\n }\n }\n }\n }\n\n this.worker.onerror = (error) => {\n console.warn('Spectrogram worker error, falling back to main thread:', error)\n // Fallback to main thread calculation\n this.worker = null\n }\n } catch (error) {\n console.warn('Failed to initialize worker, falling back to main thread:', error)\n this.worker = null\n }\n }\n\n onInit() {\n // Recreate DOM elements if they were destroyed\n if (!this.wrapper) {\n this.createWrapper()\n }\n if (!this.canvasContainer) {\n this.createCanvas()\n }\n\n // Always get fresh container reference to avoid stale references\n this.container = this.wavesurfer.getWrapper()\n this.container.appendChild(this.wrapper)\n\n // Set up styling\n if (this.wavesurfer.options.fillParent) {\n Object.assign(this.wrapper.style, {\n width: '100%',\n overflowX: 'hidden',\n overflowY: 'hidden',\n })\n }\n\n // Listen for playback position changes\n this.subscriptions.push(\n this.wavesurfer.on('timeupdate', (currentTime) => {\n this.updatePosition(currentTime)\n }),\n )\n\n // Listen for scroll events\n this.subscriptions.push(\n this.wavesurfer.on('scroll', () => {\n this.handleScroll()\n }),\n )\n\n // Listen for zoom changes\n this.subscriptions.push(this.wavesurfer.on('redraw', () => this.handleRedraw()))\n\n // Listen for audio data ready\n this.subscriptions.push(\n this.wavesurfer.on('ready', () => {\n const decodedData = this.wavesurfer.getDecodedData()\n if (decodedData) {\n this.render(decodedData)\n }\n }),\n )\n\n // Trigger initial render after re-initialization\n // This ensures the spectrogram appears even if no redraw event is fired\n if (this.wavesurfer.getDecodedData()) {\n // Use setTimeout to ensure DOM is fully ready\n setTimeout(() => {\n this.render(this.wavesurfer.getDecodedData())\n }, 0)\n }\n }\n\n private createWrapper() {\n this.wrapper = createElement('div', {\n style: {\n display: 'block',\n position: 'relative',\n userSelect: 'none',\n },\n })\n\n // Labels canvas\n if (this.options.labels) {\n this.labelsEl = createElement(\n 'canvas',\n {\n part: 'spec-labels',\n style: {\n position: 'absolute',\n zIndex: 9,\n width: '55px',\n height: '100%',\n },\n },\n this.wrapper,\n )\n }\n\n // Create wrapper click handler using shared utility\n this._onWrapperClick = createWrapperClickHandler(this.wrapper, this.emit.bind(this))\n this.wrapper.addEventListener('click', this._onWrapperClick)\n }\n\n private createCanvas() {\n this.canvasContainer = createElement(\n 'div',\n {\n style: {\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n zIndex: 4,\n },\n },\n this.wrapper,\n )\n }\n\n private handleRedraw() {\n const oldPixelsPerSecond = this.pixelsPerSecond\n this.pixelsPerSecond = this.getPixelsPerSecond()\n\n // Only update canvas positions if zoom changed, keep frequency data!\n if (oldPixelsPerSecond !== this.pixelsPerSecond && this.segments.size > 0) {\n this.updateSegmentPositions(oldPixelsPerSecond, this.pixelsPerSecond)\n }\n\n this.scheduleRender()\n }\n\n private updateSegmentPositions(oldPxPerSec: number, newPxPerSec: number) {\n for (const segment of this.segments.values()) {\n // Update pixel positions based on new zoom level\n segment.startPixel = segment.startTime * newPxPerSec\n segment.endPixel = segment.endTime * newPxPerSec\n\n // Update canvas positioning and size WITHOUT recalculating frequencies\n if (segment.canvas) {\n const segmentWidth = segment.endPixel - segment.startPixel\n segment.canvas.style.left = `${segment.startPixel}px`\n segment.canvas.style.width = `${segmentWidth}px`\n }\n }\n\n // Schedule a gentle re-render of visible segments only if zoom changed significantly\n const zoomRatio = newPxPerSec / oldPxPerSec\n if (zoomRatio < 0.5 || zoomRatio > 2.0) {\n this.scheduleSegmentQualityUpdate()\n }\n }\n\n private scheduleSegmentQualityUpdate() {\n // Debounce quality updates to avoid rapid re-renders during zoom\n if (this.qualityUpdateTimeout) {\n clearTimeout(this.qualityUpdateTimeout)\n }\n\n this.qualityUpdateTimeout = window.setTimeout(() => {\n this.updateVisibleSegmentQuality()\n }, 500) // Wait 500ms after zoom stops\n }\n\n private qualityUpdateTimeout: number | null = null\n\n private async updateVisibleSegmentQuality() {\n if (!this.buffer) return\n\n const wrapper = this.wavesurfer?.getWrapper()\n if (!wrapper) return\n\n // Get current viewport\n const scrollLeft = this.getScrollLeft(wrapper)\n const viewportWidth = this.getViewportWidth(wrapper)\n const pixelsPerSec = this.getPixelsPerSecond()\n\n const visibleStartTime = scrollLeft / pixelsPerSec\n const visibleEndTime = (scrollLeft + viewportWidth) / pixelsPerSec\n\n // Find segments that overlap with visible area\n const visibleSegments = Array.from(this.segments.values()).filter(\n (segment) => segment.startTime < visibleEndTime && segment.endTime > visibleStartTime,\n )\n\n if (visibleSegments.length === 0) {\n return\n }\n\n // Re-render only the visible segments with current zoom level\n for (const segment of visibleSegments) {\n if (segment.canvas) {\n await this.renderSegment(segment)\n }\n }\n }\n\n private getScrollLeft(wrapper: HTMLElement): number {\n // Try multiple sources for scroll position\n if (wrapper.scrollLeft) return wrapper.scrollLeft\n if (wrapper.parentElement?.scrollLeft) return wrapper.parentElement.scrollLeft\n if (document.documentElement.scrollLeft) return document.documentElement.scrollLeft\n if (document.body.scrollLeft) return document.body.scrollLeft\n if (window.scrollX) return window.scrollX\n if (window.pageXOffset) return window.pageXOffset\n\n // Look for scrollable ancestors\n let element = wrapper.parentElement\n while (element) {\n const computedStyle = window.getComputedStyle(element)\n if (computedStyle.overflowX === 'scroll' || computedStyle.overflowX === 'auto') {\n if (element.scrollLeft > 0) return element.scrollLeft\n }\n element = element.parentElement\n }\n\n return 0\n }\n\n private getViewportWidth(wrapper: HTMLElement): number {\n const wrapperWidth = wrapper.offsetWidth || wrapper.clientWidth\n const parentWidth = wrapper.parentElement?.offsetWidth || wrapper.parentElement?.clientWidth\n const windowWidth = window.innerWidth\n\n // Use the smallest reasonable width\n if (parentWidth && parentWidth < wrapperWidth) return parentWidth\n return Math.min(wrapperWidth || 800, windowWidth * 0.8)\n }\n\n private handleScroll() {\n const wrapper = this.wavesurfer?.getWrapper()\n\n // Use the same scroll detection logic as renderVisibleWindow\n let scrollLeft = 0\n\n if (wrapper?.scrollLeft) {\n scrollLeft = wrapper.scrollLeft\n } else if (wrapper?.parentElement?.scrollLeft) {\n scrollLeft = wrapper.parentElement.scrollLeft\n } else if (document.documentElement.scrollLeft || document.body.scrollLeft) {\n scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft\n } else if (window.scrollX || window.pageXOffset) {\n scrollLeft = window.scrollX || window.pageXOffset\n } else if (wrapper) {\n // Look for scrollable ancestors\n let element = wrapper.parentElement\n while (element && scrollLeft === 0) {\n const computedStyle = window.getComputedStyle(element)\n if (computedStyle.overflowX === 'scroll' || computedStyle.overflowX === 'auto') {\n if (element.scrollLeft > 0) {\n scrollLeft = element.scrollLeft\n break\n }\n }\n element = element.parentElement\n }\n }\n\n const pixelsPerSec = this.getPixelsPerSecond()\n const currentViewTime = scrollLeft / pixelsPerSec\n\n this.scheduleRender()\n }\n\n private updatePosition(currentTime: number) {\n this.currentPosition = currentTime\n this.scheduleRender()\n }\n\n private scheduleRender() {\n if (this.renderTimeout) {\n clearTimeout(this.renderTimeout)\n }\n this.renderTimeout = window.setTimeout(() => {\n this.renderVisibleWindow()\n }, 16) // 60fps\n }\n\n private async renderVisibleWindow() {\n if (this.isRendering || !this.buffer) return\n this.isRendering = true\n\n try {\n const wrapper = this.wavesurfer?.getWrapper()\n if (!wrapper) return\n\n // Use helper functions for consistency\n const scrollLeft = this.getScrollLeft(wrapper)\n const actualViewportWidth = this.getViewportWidth(wrapper)\n const pixelsPerSec = this.getPixelsPerSecond()\n const totalAudioDuration = this.buffer.duration\n\n const visibleStartTime = scrollLeft / pixelsPerSec\n const visibleEndTime = (scrollLeft + actualViewportWidth) / pixelsPerSec\n\n // Reasonable buffer time based on visible duration\n const visibleDuration = visibleEndTime - visibleStartTime\n let bufferTimeSeconds = Math.min(2, visibleDuration * 0.5) // Buffer is at most half the visible duration or 2s\n\n if (visibleDuration > 30) {\n console.warn(`⚠️ Large visible duration: ${visibleDuration.toFixed(1)}s - limiting buffer`)\n bufferTimeSeconds = 1 // Smaller buffer for very zoomed out views\n }\n\n const windowStartTime = Math.max(0, visibleStartTime - bufferTimeSeconds)\n const windowEndTime = Math.min(this.buffer.duration, visibleEndTime + bufferTimeSeconds)\n\n // Generate segments for this window\n await this.generateSegments(windowStartTime, windowEndTime)\n\n // Don't clean up old segments - keep them all in memory for performance\n } finally {\n this.isRendering = false\n }\n }\n\n private async generateSegments(startTime: number, endTime: number) {\n if (!this.buffer) return\n\n const pixelsPerSec = this.getPixelsPerSecond()\n const containerWidth = this.getWidth() // Get full container width\n const totalAudioDuration = this.buffer.duration\n\n // Progressive loading always uses fixed segment sizes, never fill container mode\n const isProgressiveLoadCall = this.isProgressiveLoading && endTime - startTime <= 35 // Progressive loading uses ~30s segments\n\n // Calculate if this is a short audio that should fill the container\n const totalAudioPixelWidth = totalAudioDuration * pixelsPerSec\n const shouldFillContainer =\n !isProgressiveLoadCall && totalAudioPixelWidth <= containerWidth && totalAudioDuration <= 60 // 60s max for fill mode\n\n let segmentPixelWidth: number\n let segmentDuration: number\n\n if (isProgressiveLoadCall) {\n // For progressive loading, respect the requested time range exactly\n segmentDuration = endTime - startTime\n segmentPixelWidth = segmentDuration * pixelsPerSec\n } else if (shouldFillContainer) {\n // For short audio, create one segment that fills the entire container width\n segmentPixelWidth = containerWidth\n segmentDuration = totalAudioDuration // Use full audio duration\n } else {\n // For long audio viewport rendering, use windowing approach\n segmentPixelWidth = 15000 // 15000 pixels per segment\n segmentDuration = segmentPixelWidth / pixelsPerSec // Calculate duration based on pixel width\n }\n\n // Show existing segments\n if (this.segments.size > 0) {\n for (const [key, segment] of this.segments) {\n }\n }\n\n // Check coverage first to avoid duplicate work\n const uncoveredRanges = this.findUncoveredTimeRanges(startTime, endTime, segmentDuration)\n\n if (uncoveredRanges.length === 0) {\n return\n }\n\n let newSegmentsCreated = 0\n\n // Only generate segments for uncovered ranges\n for (const range of uncoveredRanges) {\n // Create segments covering this uncovered range\n for (let time = range.start; time < range.end; time += segmentDuration) {\n const segmentStart = time\n const segmentEnd = Math.min(time + segmentDuration, range.end, this.buffer.duration)\n const segmentKey = `${Math.floor(segmentStart * 10)}_${Math.floor(segmentEnd * 10)}`\n\n // Double-check if segment already exists (shouldn't happen but be safe)\n if (this.segments.has(segmentKey)) {\n continue\n }\n\n newSegmentsCreated++\n\n // Calculate frequency data for this segment\n const freqStartTime = performance.now()\n const frequencies = await this.calculateFrequencies(segmentStart, segmentEnd)\n const freqEndTime = performance.now()\n\n if (frequencies && frequencies.length > 0) {\n const segment: FrequencySegment = {\n startTime: segmentStart,\n endTime: segmentEnd,\n startPixel: shouldFillContainer ? 0 : segmentStart * pixelsPerSec, // Start at 0 for fill mode\n endPixel: shouldFillContainer ? containerWidth : segmentEnd * pixelsPerSec, // End at container width for fill mode\n frequencies: frequencies,\n }\n\n this.segments.set(segmentKey, segment)\n\n // Render this segment\n const renderStartTime = performance.now()\n await this.renderSegment(segment)\n const renderEndTime = performance.now()\n\n // Emit progress update\n this.emitProgress()\n } else {\n }\n }\n }\n\n // Start progressive loading if not already running\n if (!this.isProgressiveLoading) {\n this.startProgressiveLoading()\n }\n }\n\n private findUncoveredTimeRanges(\n startTime: number,\n endTime: number,\n segmentDuration: number,\n ): Array<{ start: number; end: number }> {\n // Get all existing segments sorted by start time\n const existingSegments = Array.from(this.segments.values()).sort((a, b) => a.startTime - b.startTime)\n\n const uncoveredRanges: Array<{ start: number; end: number }> = []\n let currentTime = startTime\n\n for (const segment of existingSegments) {\n // If there's a gap before this segment\n if (currentTime < segment.startTime && currentTime < endTime) {\n const gapEnd = Math.min(segment.startTime, endTime)\n uncoveredRanges.push({\n start: currentTime,\n end: gapEnd,\n })\n }\n\n // Move past this segment\n currentTime = Math.max(currentTime, segment.endTime)\n\n // If we've covered the requested range, stop\n if (currentTime >= endTime) {\n break\n }\n }\n\n // If there's still uncovered time at the end\n if (currentTime < endTime) {\n uncoveredRanges.push({\n start: currentTime,\n end: endTime,\n })\n }\n\n return uncoveredRanges\n }\n\n private startProgressiveLoading() {\n if (this.isProgressiveLoading || !this.buffer || !this.progressiveLoading) return\n\n this.isProgressiveLoading = true\n this.nextProgressiveSegmentTime = 0 // Start from the beginning\n\n // Start loading after a short delay to not interfere with user interactions\n this.progressiveLoadTimeout = window.setTimeout(() => {\n this.progressiveLoadNextSegment()\n }, 1000) // Wait 1 second before starting\n }\n\n private async progressiveLoadNextSegment() {\n if (!this.buffer || !this.isProgressiveLoading) return\n\n // For progressive loading, use fixed time-based segments (not pixel-based)\n const segmentDuration = 30 // 30 seconds per segment for progressive loading\n const totalDuration = this.buffer.duration\n\n // Check if we've reached the end\n if (this.nextProgressiveSegmentTime >= totalDuration) {\n this._stopProgressiveLoading()\n return\n }\n\n const segmentStart = this.nextProgressiveSegmentTime\n const segmentEnd = Math.min(segmentStart + segmentDuration, totalDuration)\n\n // Check if this segment is already loaded\n const segmentKey = `${Math.floor(segmentStart * 10)}_${Math.floor(segmentEnd * 10)}`\n const isAlreadyLoaded = this.segments.has(segmentKey)\n\n if (!isAlreadyLoaded) {\n try {\n await this.generateSegments(segmentStart, segmentEnd)\n } catch (error) {\n console.warn('Progressive loading failed:', error)\n this._stopProgressiveLoading()\n return\n }\n }\n\n // Move to next segment\n this.nextProgressiveSegmentTime = segmentEnd\n\n // Schedule next progressive load\n this.progressiveLoadTimeout = window.setTimeout(() => {\n this.progressiveLoadNextSegment()\n }, 2000) // Wait 2 seconds between segments\n }\n\n private _stopProgressiveLoading() {\n this.isProgressiveLoading = false\n if (this.progressiveLoadTimeout) {\n clearTimeout(this.progressiveLoadTimeout)\n this.progressiveLoadTimeout = null\n }\n }\n\n /** Get the current loading progress as a percentage (0-100) */\n public getLoadingProgress(): number {\n if (!this.buffer) return 0\n\n const totalDuration = this.buffer.duration\n\n if (totalDuration === 0) return 100\n if (!this.isProgressiveLoading && this.segments.size === 0) return 0\n\n // Calculate progress based on how far we've progressed through the audio\n const progress = Math.min(100, (this.nextProgressiveSegmentTime / totalDuration) * 100)\n\n // If progressive loading is complete, return 100%\n if (!this.isProgressiveLoading && this.nextProgressiveSegmentTime >= totalDuration) {\n return 100\n }\n\n return progress\n }\n\n private emitProgress() {\n const progress = this.getLoadingProgress() / 100 // Convert to 0-1 range\n this.emit('progress', progress)\n }\n\n private async calculateFrequencies(startTime: number, endTime: number): Promise {\n if (!this.buffer) return []\n\n const calcStartTime = performance.now()\n const sampleRate = this.buffer.sampleRate\n const channels = this.options.splitChannels ? this.buffer.numberOfChannels : 1\n\n // Try to use web worker first\n if (this.worker) {\n try {\n const result = await this.calculateFrequenciesWithWorker(startTime, endTime)\n const totalTime = performance.now() - calcStartTime\n return result\n } catch (error) {\n console.warn('Worker calculation failed, falling back to main thread:', error)\n // Fall through to main thread calculation\n }\n }\n\n // Fallback to main thread calculation\n return this.calculateFrequenciesMainThread(startTime, endTime)\n }\n\n private async calculateFrequenciesWithWorker(startTime: number, endTime: number): Promise {\n if (!this.buffer || !this.worker) {\n throw new Error('Worker not available')\n }\n\n const sampleRate = this.buffer.sampleRate\n const channels = this.options.splitChannels ? this.buffer.numberOfChannels : 1\n\n // Calculate noverlap\n let noverlap = this.noverlap\n if (!noverlap) {\n const segmentDuration = endTime - startTime\n const pixelsPerSec = this.getPixelsPerSecond()\n const segmentWidth = segmentDuration * pixelsPerSec\n const startSample = Math.floor(startTime * sampleRate)\n const endSample = Math.floor(endTime * sampleRate)\n const uniqueSamplesPerPx = (endSample - startSample) / segmentWidth\n noverlap = Math.max(0, Math.round(this.fftSamples - uniqueSamplesPerPx))\n }\n\n // Prepare audio data for worker\n const audioData: Float32Array[] = []\n for (let c = 0; c < channels; c++) {\n audioData.push(this.buffer.getChannelData(c))\n }\n\n // Generate unique ID for this request\n const id = `${Date.now()}_${Math.random()}`\n\n // Create promise for worker response\n const promise = new Promise((resolve, reject) => {\n this.workerPromises.set(id, { resolve, reject })\n\n // Set timeout to avoid hanging\n setTimeout(() => {\n if (this.workerPromises.has(id)) {\n this.workerPromises.delete(id)\n reject(new Error('Worker timeout'))\n }\n }, 30000) // 30 second timeout\n })\n\n // Send message to worker\n this.worker.postMessage({\n type: 'calculateFrequencies',\n id,\n audioData,\n options: {\n startTime,\n endTime,\n sampleRate,\n fftSamples: this.fftSamples,\n windowFunc: this.windowFunc,\n alpha: this.alpha,\n noverlap,\n scale: this.scale,\n gainDB: this.gainDB,\n rangeDB: this.rangeDB,\n splitChannels: this.options.splitChannels || false,\n },\n })\n\n return promise\n }\n\n private async calculateFrequenciesMainThread(startTime: number, endTime: number): Promise {\n if (!this.buffer) return []\n\n const sampleRate = this.buffer.sampleRate\n const startSample = Math.floor(startTime * sampleRate)\n const endSample = Math.floor(endTime * sampleRate)\n const channels = this.options.splitChannels ? this.buffer.numberOfChannels : 1\n\n // Initialize FFT if needed\n if (!this.fft) {\n this.fft = new FFT(this.fftSamples, sampleRate, this.windowFunc, this.alpha)\n }\n\n // Calculate noverlap like the normal plugin\n let noverlap = this.noverlap\n if (!noverlap) {\n const segmentDuration = endTime - startTime\n const pixelsPerSec = this.getPixelsPerSecond()\n const segmentWidth = segmentDuration * pixelsPerSec\n const uniqueSamplesPerPx = (endSample - startSample) / segmentWidth\n noverlap = Math.max(0, Math.round(this.fftSamples - uniqueSamplesPerPx))\n }\n\n // OPTIMIZATION: For windowed mode, reduce overlap to speed up processing\n const maxOverlap = this.fftSamples * 0.5\n noverlap = Math.min(noverlap, maxOverlap)\n const minHopSize = Math.max(64, this.fftSamples * 0.25)\n const hopSize = Math.max(minHopSize, this.fftSamples - noverlap)\n\n const frequencies: Uint8Array[][] = []\n\n const fftStartTime = performance.now()\n let totalFFTs = 0\n\n for (let c = 0; c < channels; c++) {\n const channelData = this.buffer.getChannelData(c)\n const channelFreq: Uint8Array[] = []\n\n for (let sample = startSample; sample + this.fftSamples < endSample; sample += hopSize) {\n const segment = channelData.slice(sample, sample + this.fftSamples)\n let spectrum = this.fft.calculateSpectrum(segment)\n totalFFTs++\n\n // Apply filter bank if needed\n const filterBank = this.getFilterBank(sampleRate)\n if (filterBank) {\n spectrum = applyFilterBank(spectrum, filterBank)\n }\n\n // Convert to uint8 color indices\n const freqBins = new Uint8Array(spectrum.length)\n const gainPlusRange = this.gainDB + this.rangeDB\n\n for (let j = 0; j < spectrum.length; j++) {\n const magnitude = spectrum[j] > 1e-12 ? spectrum[j] : 1e-12\n const valueDB = 20 * Math.log10(magnitude)\n\n if (valueDB < -gainPlusRange) {\n freqBins[j] = 0\n } else if (valueDB > -this.gainDB) {\n freqBins[j] = 255\n } else {\n freqBins[j] = Math.round(((valueDB + this.gainDB) / this.rangeDB) * 255)\n }\n }\n channelFreq.push(freqBins)\n }\n frequencies.push(channelFreq)\n }\n\n const fftEndTime = performance.now()\n\n return frequencies\n }\n\n private async renderSegment(segment: FrequencySegment) {\n const segmentWidth = segment.endPixel - segment.startPixel\n const totalHeight = this.height * segment.frequencies.length\n\n // Create canvas for this segment\n const canvas = document.createElement('canvas')\n canvas.width = Math.round(segmentWidth)\n canvas.height = Math.round(totalHeight)\n canvas.style.position = 'absolute'\n canvas.style.left = `${segment.startPixel}px`\n canvas.style.top = '0'\n canvas.style.width = `${segmentWidth}px`\n canvas.style.height = `${totalHeight}px`\n\n const ctx = canvas.getContext('2d')\n if (!ctx) return\n\n // Get frequency scaling parameters like the normal plugin\n const freqFrom = this.buffer?.sampleRate ? this.buffer.sampleRate / 2 : 0\n const freqMin = this.frequencyMin\n const freqMax = this.frequencyMax || freqFrom\n\n // Render frequency data to canvas with proper scaling\n for (let c = 0; c < segment.frequencies.length; c++) {\n await this.renderChannelToCanvas(\n segment.frequencies[c],\n ctx,\n segmentWidth,\n this.height,\n c * this.height,\n freqFrom,\n freqMin,\n freqMax,\n )\n }\n\n // Add canvas to container\n segment.canvas = canvas\n this.canvasContainer.appendChild(canvas)\n }\n\n private async renderChannelToCanvas(\n channelFreq: Uint8Array[],\n ctx: CanvasRenderingContext2D,\n width: number,\n height: number,\n yOffset: number,\n freqFrom: number,\n freqMin: number,\n freqMax: number,\n ) {\n if (channelFreq.length === 0) return\n\n const freqBins = channelFreq[0].length\n const imageData = new ImageData(channelFreq.length, freqBins)\n const data = imageData.data\n\n // Fill image data\n for (let i = 0; i < channelFreq.length; i++) {\n const column = channelFreq[i]\n for (let j = 0; j < freqBins; j++) {\n const colorIndex = Math.min(255, Math.max(0, column[j]))\n const color = this.colorMap[colorIndex]\n const pixelIndex = ((freqBins - j - 1) * channelFreq.length + i) * 4\n\n data[pixelIndex] = color[0] * 255\n data[pixelIndex + 1] = color[1] * 255\n data[pixelIndex + 2] = color[2] * 255\n data[pixelIndex + 3] = color[3] * 255\n }\n }\n\n // Calculate frequency scaling like the normal plugin\n const rMin = hzToScale(freqMin, this.scale) / hzToScale(freqFrom, this.scale)\n const rMax = hzToScale(freqMax, this.scale) / hzToScale(freqFrom, this.scale)\n const rMax1 = Math.min(1, rMax)\n\n // Use the same frequency scaling approach as the regular spectrogram plugin\n const drawHeight = (height * rMax1) / rMax\n const drawY = yOffset + height * (1 - rMax1 / rMax)\n const bitmapSourceY = Math.round(freqBins * (1 - rMax1))\n const bitmapSourceHeight = Math.round(freqBins * (rMax1 - rMin))\n\n // Create and draw bitmap with proper frequency scaling\n const bitmap = await createImageBitmap(imageData, 0, bitmapSourceY, channelFreq.length, bitmapSourceHeight)\n\n ctx.drawImage(bitmap, 0, drawY, width, drawHeight)\n\n // Clean up\n if ('close' in bitmap) {\n bitmap.close()\n }\n }\n\n private clearAllSegments() {\n for (const segment of this.segments.values()) {\n if (segment.canvas) {\n segment.canvas.remove()\n }\n }\n this.segments.clear()\n }\n\n private getFilterBank(sampleRate: number): number[][] | null {\n const numFilters = this.fftSamples / 2\n return createFilterBankForScale(this.scale, numFilters, this.fftSamples, sampleRate)\n }\n\n private _onWrapperClick = (e: MouseEvent) => {\n const rect = this.wrapper.getBoundingClientRect()\n const relativeX = e.clientX - rect.left\n const relativeWidth = rect.width\n const relativePosition = relativeX / relativeWidth\n this.emit('click', relativePosition)\n }\n\n private freqType(freq: number) {\n return freq >= 1000 ? (freq / 1000).toFixed(1) : Math.round(freq)\n }\n\n private unitType(freq: number) {\n return freq >= 1000 ? 'kHz' : 'Hz'\n }\n\n private getLabelFrequency(index: number, labelIndex: number) {\n const scaleMin = hzToScale(this.frequencyMin, this.scale)\n const scaleMax = hzToScale(this.frequencyMax, this.scale)\n return scaleToHz(scaleMin + (index / labelIndex) * (scaleMax - scaleMin), this.scale)\n }\n\n private loadLabels(\n bgFill?: string,\n fontSizeFreq?: string,\n fontSizeUnit?: string,\n fontType?: string,\n textColorFreq?: string,\n textColorUnit?: string,\n textAlign?: string,\n container?: string,\n channels?: number,\n ) {\n const frequenciesHeight = this.height\n bgFill = bgFill || 'rgba(68,68,68,0)'\n fontSizeFreq = fontSizeFreq || '12px'\n fontSizeUnit = fontSizeUnit || '12px'\n fontType = fontType || 'Helvetica'\n textColorFreq = textColorFreq || '#fff'\n textColorUnit = textColorUnit || '#fff'\n textAlign = textAlign || 'center'\n container = container || '#specLabels'\n const bgWidth = 55\n const getMaxY = frequenciesHeight || 512\n const labelIndex = 5 * (getMaxY / 256)\n const freqStart = this.frequencyMin\n\n // prepare canvas element for labels\n const ctx = this.labelsEl.getContext('2d')\n const dispScale = window.devicePixelRatio\n this.labelsEl.height = this.height * channels * dispScale\n this.labelsEl.width = bgWidth * dispScale\n ctx.scale(dispScale, dispScale)\n\n if (!ctx) {\n return\n }\n\n for (let c = 0; c < channels; c++) {\n // for each channel\n // fill background\n ctx.fillStyle = bgFill\n ctx.fillRect(0, c * getMaxY, bgWidth, (1 + c) * getMaxY)\n ctx.fill()\n let i\n\n // render labels\n for (i = 0; i <= labelIndex; i++) {\n ctx.textAlign = textAlign as CanvasTextAlign\n ctx.textBaseline = 'middle'\n\n const freq = this.getLabelFrequency(i, labelIndex)\n const label = this.freqType(freq)\n const units = this.unitType(freq)\n const x = 16\n let y = (1 + c) * getMaxY - (i / labelIndex) * getMaxY\n\n // Make sure label remains in view\n y = Math.min(Math.max(y, c * getMaxY + 10), (1 + c) * getMaxY - 10)\n\n // unit label\n ctx.fillStyle = textColorUnit\n ctx.font = fontSizeUnit + ' ' + fontType\n ctx.fillText(units, x + 24, y)\n // freq label\n ctx.fillStyle = textColorFreq\n ctx.font = fontSizeFreq + ' ' + fontType\n ctx.fillText(label.toString(), x, y)\n }\n }\n }\n\n async render(audioData: AudioBuffer) {\n this.buffer = audioData\n this.pixelsPerSecond = this.getPixelsPerSecond()\n this.frequencyMax = this.frequencyMax || audioData.sampleRate / 2\n\n // Set wrapper height\n const channels = this.options.splitChannels ? audioData.numberOfChannels : 1\n this.wrapper.style.height = this.height * channels + 'px'\n\n // Clear existing data and reset progressive loading\n this.clearAllSegments()\n this.nextProgressiveSegmentTime = 0\n\n // Render frequency labels if enabled\n if (this.options.labels) {\n this.loadLabels(\n this.options.labelsBackground,\n '12px',\n '12px',\n '',\n this.options.labelsColor,\n this.options.labelsHzColor || this.options.labelsColor,\n 'center',\n '#specLabels',\n channels,\n )\n }\n\n // Start initial render\n this.scheduleRender()\n this.emit('ready')\n }\n\n destroy() {\n this.unAll()\n\n if (this.renderTimeout) {\n clearTimeout(this.renderTimeout)\n this.renderTimeout = null\n }\n\n if (this.qualityUpdateTimeout) {\n clearTimeout(this.qualityUpdateTimeout)\n this.qualityUpdateTimeout = null\n }\n\n // Stop progressive loading\n this.stopProgressiveLoading()\n this.nextProgressiveSegmentTime = 0\n\n // Clean up worker\n if (this.worker) {\n this.worker.terminate()\n this.worker = null\n }\n\n // Clear any pending worker promises\n for (const [id, promise] of this.workerPromises) {\n promise.reject(new Error('Plugin destroyed'))\n }\n this.workerPromises.clear()\n\n this.clearAllSegments()\n\n // Clean up DOM elements properly\n if (this.canvasContainer) {\n this.canvasContainer.remove()\n this.canvasContainer = null\n }\n if (this.wrapper) {\n this.wrapper.remove()\n this.wrapper = null\n }\n if (this.labelsEl) {\n this.labelsEl.remove()\n this.labelsEl = null\n }\n\n // Reset state for potential re-initialization\n this.container = null\n this.buffer = null\n this.fft = null\n this.isRendering = false\n this.currentPosition = 0\n this.pixelsPerSecond = 0\n\n super.destroy()\n }\n\n // Add width calculation methods like the normal plugin\n private getWidth() {\n return this.wavesurfer?.getWrapper()?.offsetWidth || 0\n }\n\n private getPixelsPerSecond() {\n // Handle default case when no zoom is specified\n const minPxPerSec = this.wavesurfer?.options.minPxPerSec\n if (minPxPerSec && minPxPerSec > 0) {\n return minPxPerSec\n }\n\n // For windowed mode, enforce a minimum zoom level so we never try to fit entire audio on screen\n const WINDOWED_MIN_PX_PER_SEC = 50 // At least 50 pixels per second for windowed mode\n\n // Fallback: calculate based on wrapper width and audio duration\n if (this.buffer) {\n const wrapperWidth = this.getWidth()\n const calculatedPxPerSec = wrapperWidth > 0 ? wrapperWidth / this.buffer.duration : 100\n\n // For windowed mode, we want to show only a small portion of audio at a time\n // Use the maximum of calculated value and our minimum to ensure reasonable zoom\n const finalPxPerSec = Math.max(calculatedPxPerSec, WINDOWED_MIN_PX_PER_SEC)\n\n return finalPxPerSec\n }\n\n return WINDOWED_MIN_PX_PER_SEC\n }\n\n /** Stop progressive loading if it's currently running */\n public stopProgressiveLoading() {\n this.isProgressiveLoading = false\n if (this.progressiveLoadTimeout) {\n clearTimeout(this.progressiveLoadTimeout)\n this.progressiveLoadTimeout = null\n }\n }\n\n /** Restart progressive loading from the beginning */\n public restartProgressiveLoading() {\n this.stopProgressiveLoading()\n this.nextProgressiveSegmentTime = 0\n if (this.progressiveLoading) {\n this.startProgressiveLoading()\n }\n }\n}\n\nexport default WindowedSpectrogramPlugin\n" }, { "path": "src/plugins/spectrogram-worker.ts", "content": "/**\n * Web Worker for Windowed Spectrogram Plugin\n * Handles FFT calculations for frequency analysis\n */\n\n// Import centralized FFT functionality\nimport FFT, { createFilterBankForScale, applyFilterBank } from '../fft.js'\n\n// Global FFT instance (reused for performance)\nlet fft: FFT | null = null\n\ninterface WorkerMessage {\n type: string\n id: string\n audioData: Float32Array[]\n options: {\n startTime: number\n endTime: number\n sampleRate: number\n fftSamples: number\n windowFunc: string\n alpha?: number\n noverlap: number\n scale: 'linear' | 'logarithmic' | 'mel' | 'bark' | 'erb'\n gainDB: number\n rangeDB: number\n splitChannels: boolean\n }\n}\n\ninterface WorkerResponse {\n type: string\n id: string\n result?: Uint8Array[][]\n error?: string\n}\n\n// Worker message handler\nself.onmessage = function (e: MessageEvent) {\n const { type, id, audioData, options } = e.data\n\n if (type === 'calculateFrequencies') {\n try {\n const result = calculateFrequencies(audioData, options)\n const response: WorkerResponse = {\n type: 'frequenciesResult',\n id: id,\n result: result,\n }\n self.postMessage(response)\n } catch (error) {\n const response: WorkerResponse = {\n type: 'frequenciesResult',\n id: id,\n error: error instanceof Error ? error.message : String(error),\n }\n self.postMessage(response)\n }\n }\n}\n\n/**\n * Calculate frequency data for audio channels\n */\nfunction calculateFrequencies(audioChannels: Float32Array[], options: WorkerMessage['options']): Uint8Array[][] {\n const {\n startTime,\n endTime,\n sampleRate,\n fftSamples,\n windowFunc,\n alpha,\n noverlap,\n scale,\n gainDB,\n rangeDB,\n splitChannels,\n } = options\n\n const startSample = Math.floor(startTime * sampleRate)\n const endSample = Math.floor(endTime * sampleRate)\n const channels = splitChannels ? audioChannels.length : 1\n\n // Initialize FFT (reuse if possible for performance)\n if (!fft || fft.bufferSize !== fftSamples) {\n fft = new (FFT as any)(fftSamples, sampleRate, windowFunc, alpha || 0.16)\n }\n\n // Create filter bank based on scale using centralized function\n const numFilters = fftSamples / 2 // Same as main thread\n const filterBank = createFilterBankForScale(scale, numFilters, fftSamples, sampleRate)\n\n // Calculate hop size\n let actualNoverlap = noverlap || Math.max(0, Math.round(fftSamples * 0.5))\n const maxOverlap = fftSamples * 0.5\n actualNoverlap = Math.min(actualNoverlap, maxOverlap)\n const minHopSize = Math.max(64, fftSamples * 0.25)\n const hopSize = Math.max(minHopSize, fftSamples - actualNoverlap)\n\n const frequencies: Uint8Array[][] = []\n\n for (let c = 0; c < channels; c++) {\n const channelData = audioChannels[c]\n const channelFreq: Uint8Array[] = []\n\n for (let sample = startSample; sample + fftSamples < endSample; sample += hopSize) {\n const segment = channelData.slice(sample, sample + fftSamples)\n let spectrum = fft.calculateSpectrum(segment)\n\n // Apply filter bank if specified (same as main thread)\n if (filterBank) {\n spectrum = applyFilterBank(spectrum, filterBank)\n }\n\n // Convert to uint8 color indices\n const freqBins = new Uint8Array(spectrum.length)\n const gainPlusRange = gainDB + rangeDB\n\n for (let j = 0; j < spectrum.length; j++) {\n const magnitude = spectrum[j] > 1e-12 ? spectrum[j] : 1e-12\n const valueDB = 20 * Math.log10(magnitude)\n\n if (valueDB < -gainPlusRange) {\n freqBins[j] = 0\n } else if (valueDB > -gainDB) {\n freqBins[j] = 255\n } else {\n freqBins[j] = Math.round(((valueDB + gainDB) / rangeDB) * 255)\n }\n }\n channelFreq.push(freqBins)\n }\n frequencies.push(channelFreq)\n }\n\n return frequencies\n}\n" }, { "path": "src/plugins/spectrogram.ts", "content": "/**\n * Spectrogram plugin\n *\n * Render a spectrogram visualisation of the audio.\n *\n * @author Pavel Denisov (https://github.com/akreal)\n * @see https://github.com/wavesurfer-js/wavesurfer.js/pull/337\n *\n * @example\n * // ... initialising wavesurfer with the plugin\n * var wavesurfer = WaveSurfer.create({\n * // wavesurfer options ...\n * plugins: [\n * SpectrogramPlugin.create({\n * // plugin options ...\n * })\n * ]\n * });\n */\n\n// @ts-nocheck\n\n// Import centralized FFT functionality\nimport FFT, {\n hzToScale,\n scaleToHz,\n createFilterBankForScale,\n applyFilterBank,\n setupColorMap,\n freqType,\n unitType,\n getLabelFrequency,\n createWrapperClickHandler,\n} from '../fft.js'\n\n/**\n * Spectrogram plugin for wavesurfer.\n */\nimport BasePlugin, { type BasePluginEvents } from '../base-plugin.js'\nimport createElement from '../dom.js'\n\n// Import the worker using rollup-plugin-web-worker-loader\nimport SpectrogramWorker from 'web-worker:./spectrogram-worker.ts'\n\nexport type SpectrogramPluginOptions = {\n /** Selector of element or element in which to render */\n container?: string | HTMLElement\n /** Number of samples to fetch to FFT. Must be a power of 2. */\n fftSamples?: number\n /** Height of the spectrogram view in CSS pixels */\n height?: number\n /** Set to true to display frequency labels. */\n labels?: boolean\n labelsBackground?: string\n labelsColor?: string\n labelsHzColor?: string\n /** Size of the overlapping window. Must be < fftSamples. Auto deduced from canvas size by default. */\n noverlap?: number\n /** The window function to be used. */\n windowFunc?:\n | 'bartlett'\n | 'bartlettHann'\n | 'blackman'\n | 'cosine'\n | 'gauss'\n | 'hamming'\n | 'hann'\n | 'lanczoz'\n | 'rectangular'\n | 'triangular'\n /** Some window functions have this extra value. (Between 0 and 1) */\n alpha?: number\n /** Min frequency to scale spectrogram. */\n frequencyMin?: number\n /** Max frequency to scale spectrogram. Set this to samplerate/2 to draw whole range of spectrogram. */\n frequencyMax?: number\n /** Sample rate of the audio when using pre-computed spectrogram data. Required when using frequenciesDataUrl. */\n sampleRate?: number\n /**\n * Based on: https://manual.audacityteam.org/man/spectrogram_settings.html\n * - Linear: Linear The linear vertical scale goes linearly from 0 kHz to 20 kHz frequency by default.\n * - Logarithmic: This view is the same as the linear view except that the vertical scale is logarithmic.\n * - Mel: The name Mel comes from the word melody to indicate that the scale is based on pitch comparisons. This is the default scale.\n * - Bark: This is a psychoacoustical scale based on subjective measurements of loudness. It is related to, but somewhat less popular than, the Mel scale.\n * - ERB: The Equivalent Rectangular Bandwidth scale or ERB is a measure used in psychoacoustics, which gives an approximation to the bandwidths of the filters in human hearing\n */\n scale?: 'linear' | 'logarithmic' | 'mel' | 'bark' | 'erb'\n /**\n * Increases / decreases the brightness of the display.\n * For small signals where the display is mostly \"blue\" (dark) you can increase this value to see brighter colors and give more detail.\n * If the display has too much \"white\", decrease this value.\n * The default is 20dB and corresponds to a -20 dB signal at a particular frequency being displayed as \"white\". */\n gainDB?: number\n /**\n * Affects the range of signal sizes that will be displayed as colors.\n * The default is 80 dB and means that you will not see anything for signals 80 dB below the value set for \"Gain\".\n */\n rangeDB?: number\n /**\n * A 256 long array of 4-element arrays. Each entry should contain a float between 0 and 1 and specify r, g, b, and alpha.\n * Each entry should contain a float between 0 and 1 and specify r, g, b, and alpha.\n * - gray: Gray scale.\n * - igray: Inverted gray scale.\n * - roseus: From https://github.com/dofuuz/roseus/blob/main/roseus/cmap/roseus.py\n */\n colorMap?: number[][] | 'gray' | 'igray' | 'roseus'\n /** Render a spectrogram for each channel independently when true. */\n splitChannels?: boolean\n /** URL with pre-computed spectrogram JSON data, the data must be a Uint8Array[][] **/\n frequenciesDataUrl?: string\n /** Maximum width of individual canvas elements in pixels (default: 30000) */\n maxCanvasWidth?: number\n /** Use web worker for FFT calculations (default: false) */\n useWebWorker?: boolean\n}\n\nexport type SpectrogramPluginEvents = BasePluginEvents & {\n ready: []\n click: [relativeX: number]\n}\n\nclass SpectrogramPlugin extends BasePlugin {\n private static MAX_CANVAS_WIDTH = 30000\n private static MAX_NODES = 10\n\n private frequenciesDataUrl?: string\n private container: HTMLElement\n private wrapper: HTMLElement\n private labelsEl: HTMLCanvasElement\n private canvases: HTMLCanvasElement[] = []\n private canvasContainer: HTMLElement\n private colorMap: number[][]\n private fftSamples: SpectrogramPluginOptions['fftSamples']\n private height: SpectrogramPluginOptions['height']\n private noverlap: SpectrogramPluginOptions['noverlap']\n private windowFunc: SpectrogramPluginOptions['windowFunc']\n private alpha: SpectrogramPluginOptions['alpha']\n private frequencyMin: SpectrogramPluginOptions['frequencyMin']\n private frequencyMax: SpectrogramPluginOptions['frequencyMax']\n private gainDB: SpectrogramPluginOptions['gainDB']\n private rangeDB: SpectrogramPluginOptions['rangeDB']\n private scale: SpectrogramPluginOptions['scale']\n private numMelFilters: number\n private numLogFilters: number\n private numBarkFilters: number\n private numErbFilters: number\n\n // Web worker support\n private useWebWorker: boolean = false\n private worker: Worker | null = null\n private workerPromises: Map = new Map()\n\n // Performance optimization properties\n private cachedFrequencies: Uint8Array[][] | null = null\n private cachedResampledData: Uint8Array[][] | null = null\n private cachedBuffer: AudioBuffer | null = null\n private cachedWidth = 0\n private renderTimeout: number | null = null\n private isRendering = false\n private lastZoomLevel = 0\n private renderThrottleMs = 50 // Reduced frequency for better performance\n private zoomThreshold = 0.05 // More sensitive zoom detection\n private drawnCanvases: Record = {}\n private pendingBitmaps = new Set>()\n private isScrollable = false\n private scrollUnsubscribe: (() => void) | null = null\n private _onWrapperClick: (e: MouseEvent) => void\n\n static create(options?: SpectrogramPluginOptions) {\n return new SpectrogramPlugin(options || {})\n }\n\n constructor(options: SpectrogramPluginOptions) {\n super(options)\n\n this.frequenciesDataUrl = options.frequenciesDataUrl\n\n // Validate that sampleRate is provided when using frequenciesDataUrl\n if (this.frequenciesDataUrl && !options.sampleRate) {\n throw new Error('sampleRate option is required when using frequenciesDataUrl')\n }\n\n this.container =\n 'string' == typeof options.container ? document.querySelector(options.container) : options.container\n\n // Web worker option (disabled by default)\n this.useWebWorker = options.useWebWorker === true\n\n // Set up color map using shared utility\n this.colorMap = setupColorMap(options.colorMap)\n\n this.fftSamples = options.fftSamples || 512\n this.height = options.height || 200\n this.noverlap = options.noverlap || null // Will be calculated later based on canvas size\n this.windowFunc = options.windowFunc || 'hann'\n this.alpha = options.alpha\n\n // Getting file's original samplerate is difficult(#1248).\n // So set 12kHz default to render like wavesurfer.js 5.x.\n this.frequencyMin = options.frequencyMin || 0\n this.frequencyMax = options.frequencyMax || 0\n\n this.gainDB = options.gainDB ?? 20\n this.rangeDB = options.rangeDB ?? 80\n this.scale = options.scale || 'mel'\n\n // Other values will currently cause a misalignment between labels and the spectrogram\n this.numMelFilters = this.fftSamples / 2\n this.numLogFilters = this.fftSamples / 2\n this.numBarkFilters = this.fftSamples / 2\n this.numErbFilters = this.fftSamples / 2\n\n // Override the default max canvas width if provided\n if (options.maxCanvasWidth) {\n SpectrogramPlugin.MAX_CANVAS_WIDTH = options.maxCanvasWidth\n }\n\n // Set default performance settings\n this.renderThrottleMs = 50\n this.zoomThreshold = 0.05\n\n this.createWrapper()\n this.createCanvas()\n\n // Initialize worker if enabled\n if (this.useWebWorker) {\n this.initializeWorker()\n }\n }\n\n private initializeWorker() {\n // Skip worker initialization in SSR environments (Next.js server-side)\n if (typeof window === 'undefined' || typeof Worker === 'undefined') {\n console.warn('Worker not available in this environment, using main thread calculation')\n return\n }\n\n try {\n // Create worker using imported worker constructor\n this.worker = new SpectrogramWorker()\n\n this.worker.onmessage = (e) => {\n const { type, id, result, error } = e.data\n\n if (type === 'frequenciesResult') {\n const promise = this.workerPromises.get(id)\n if (promise) {\n this.workerPromises.delete(id)\n if (error) {\n promise.reject(new Error(error))\n } else {\n promise.resolve(result)\n }\n }\n }\n }\n\n this.worker.onerror = (error) => {\n console.warn('Spectrogram worker error, falling back to main thread:', error)\n // Fallback to main thread calculation\n this.worker = null\n }\n } catch (error) {\n console.warn('Failed to initialize worker, falling back to main thread:', error)\n this.worker = null\n }\n }\n\n onInit() {\n // Recreate DOM elements if they were destroyed\n if (!this.wrapper) {\n this.createWrapper()\n }\n if (!this.canvasContainer) {\n this.createCanvas()\n }\n\n // Always get fresh container reference to avoid stale references\n this.container = this.wavesurfer.getWrapper()\n this.container.appendChild(this.wrapper)\n\n if (this.wavesurfer.options.fillParent) {\n Object.assign(this.wrapper.style, {\n width: '100%',\n overflowX: 'hidden',\n overflowY: 'hidden',\n })\n }\n this.subscriptions.push(this.wavesurfer.on('redraw', () => this.throttledRender()))\n\n // Trigger initial render after re-initialization\n // This ensures the spectrogram appears even if no redraw event is fired\n if (this.wavesurfer.getDecodedData()) {\n // Use setTimeout to ensure DOM is fully ready\n setTimeout(() => {\n this.throttledRender()\n }, 0)\n }\n }\n\n public destroy() {\n this.unAll()\n\n // Clean up any direct event listeners (if they exist)\n if (this.wavesurfer) {\n // Note: _onReady and _onRender methods may not exist, but the original code had these\n // We should be cautious and only call un if the methods exist\n if (typeof this._onReady === 'function') {\n this.wavesurfer.un('ready', this._onReady)\n }\n if (typeof this._onRender === 'function') {\n this.wavesurfer.un('redraw', this._onRender)\n }\n }\n\n // Clean up performance optimization resources\n if (this.renderTimeout) {\n clearTimeout(this.renderTimeout)\n this.renderTimeout = null\n }\n\n // Clean up scroll listener\n if (this.scrollUnsubscribe) {\n this.scrollUnsubscribe()\n this.scrollUnsubscribe = null\n }\n\n // Cancel pending bitmap operations\n this.pendingBitmaps.clear()\n\n // Clean up worker\n if (this.worker) {\n this.worker.terminate()\n this.worker = null\n }\n\n this.cachedFrequencies = null\n this.cachedResampledData = null\n this.cachedBuffer = null\n\n // Clean up DOM elements properly\n this.clearCanvases()\n if (this.canvasContainer) {\n this.canvasContainer.remove()\n this.canvasContainer = null\n }\n if (this.wrapper) {\n this.wrapper.remove()\n this.wrapper = null\n }\n if (this.labelsEl) {\n // Properly remove labels canvas from DOM before nullifying reference\n this.labelsEl.remove()\n this.labelsEl = null\n }\n\n // Reset state for potential re-initialization\n this.container = null\n this.isRendering = false\n this.lastZoomLevel = 0\n this.wavesurfer = null\n this.util = null\n this.options = null\n\n super.destroy()\n }\n\n public async loadFrequenciesData(url: string | URL) {\n const resp = await fetch(url)\n if (!resp.ok) {\n throw new Error('Unable to fetch frequencies data')\n }\n const data = await resp.json()\n this.drawSpectrogram(data)\n }\n\n public async getFrequenciesData(): Uint8Array[][] | null {\n const decodedData = this.wavesurfer?.getDecodedData()\n if (!decodedData) {\n return null\n }\n\n if (this.cachedBuffer === decodedData && this.cachedFrequencies) {\n // Check if we can use cached frequencies\n return this.cachedFrequencies\n } else {\n // Calculate new frequencies and cache them\n const frequencies = await this.getFrequencies(decodedData)\n this.cachedFrequencies = frequencies\n this.cachedBuffer = decodedData\n return frequencies\n }\n }\n\n /** Clear cached frequency data to force recalculation */\n public clearCache() {\n this.cachedFrequencies = null\n this.cachedResampledData = null\n this.cachedBuffer = null\n this.cachedWidth = 0\n this.lastZoomLevel = 0\n }\n\n private createWrapper() {\n this.wrapper = createElement('div', {\n style: {\n display: 'block',\n position: 'relative',\n userSelect: 'none',\n },\n })\n\n // if labels are active\n if (this.options.labels) {\n this.labelsEl = createElement(\n 'canvas',\n {\n part: 'spec-labels',\n style: {\n position: 'absolute',\n zIndex: 9,\n width: '55px',\n height: '100%',\n },\n },\n this.wrapper,\n )\n }\n\n // Create wrapper click handler using shared utility\n this._onWrapperClick = createWrapperClickHandler(this.wrapper, this.emit.bind(this))\n this.wrapper.addEventListener('click', this._onWrapperClick)\n }\n\n private createCanvas() {\n this.canvasContainer = createElement(\n 'div',\n {\n style: {\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n zIndex: 4,\n },\n },\n this.wrapper,\n )\n }\n\n private createSingleCanvas(width: number, height: number, offset: number): HTMLCanvasElement {\n const canvas = createElement('canvas', {\n style: {\n position: 'absolute',\n left: `${Math.round(offset)}px`,\n top: '0',\n width: `${width}px`,\n height: `${height}px`,\n zIndex: 4,\n },\n })\n\n canvas.width = Math.round(width)\n canvas.height = Math.round(height)\n\n this.canvasContainer.appendChild(canvas)\n return canvas\n }\n\n private clearCanvases() {\n this.canvases.forEach((canvas) => canvas.remove())\n this.canvases = []\n this.drawnCanvases = {}\n }\n\n private clearExcessCanvases() {\n // Clear canvases to avoid too many DOM nodes\n if (Object.keys(this.drawnCanvases).length > SpectrogramPlugin.MAX_NODES) {\n this.clearCanvases()\n }\n }\n\n private throttledRender() {\n // Clear any pending render\n if (this.renderTimeout) {\n clearTimeout(this.renderTimeout)\n }\n\n // Skip if already rendering\n if (this.isRendering) {\n return\n }\n\n // Check if zoom level changed significantly\n const currentZoom = this.wavesurfer?.options.minPxPerSec || 0\n const zoomDiff = Math.abs(currentZoom - this.lastZoomLevel) / Math.max(currentZoom, this.lastZoomLevel, 1)\n\n if (zoomDiff < this.zoomThreshold && this.cachedFrequencies) {\n // Small zoom change - just re-render with cached data\n this.renderTimeout = window.setTimeout(() => {\n this.fastRender()\n }, this.renderThrottleMs)\n } else {\n // Significant zoom change - full re-render\n this.renderTimeout = window.setTimeout(() => {\n this.render()\n }, this.renderThrottleMs)\n }\n }\n\n private async render() {\n if (this.isRendering) return\n this.isRendering = true\n\n try {\n if (this.frequenciesDataUrl) {\n await this.loadFrequenciesData(this.frequenciesDataUrl)\n } else {\n const decodedData = this.wavesurfer?.getDecodedData()\n if (decodedData) {\n const frequencies = await this.getFrequenciesData()\n this.drawSpectrogram(this.cachedFrequencies)\n }\n }\n this.lastZoomLevel = this.wavesurfer?.options.minPxPerSec || 0\n } finally {\n this.isRendering = false\n }\n }\n\n private fastRender() {\n if (this.isRendering || !this.cachedFrequencies) return\n this.isRendering = true\n\n try {\n // Use cached frequencies for fast re-render\n this.drawSpectrogram(this.cachedFrequencies)\n this.lastZoomLevel = this.wavesurfer?.options.minPxPerSec || 0\n } finally {\n this.isRendering = false\n }\n }\n\n private drawSpectrogram(frequenciesData: Uint8Array[][]): void {\n if (!isNaN(frequenciesData[0][0])) {\n // data is 1ch [sample, freq] format\n // to [channel, sample, freq] format\n frequenciesData = [frequenciesData]\n }\n\n // Clear existing canvases\n this.clearCanvases()\n\n // Set the height to fit all channels\n const totalHeight = this.height * frequenciesData.length\n this.wrapper.style.height = totalHeight + 'px'\n\n const totalWidth = this.getWidth()\n const maxCanvasWidth = Math.min(SpectrogramPlugin.MAX_CANVAS_WIDTH, totalWidth)\n\n // Nothing to render\n if (totalWidth === 0 || totalHeight === 0) return\n\n // Calculate number of canvases needed\n const numCanvases = Math.ceil(totalWidth / maxCanvasWidth)\n\n // Smart resampling based on zoom level\n let resampledData: Uint8Array[][]\n const originalDataWidth = frequenciesData[0]?.length || 0\n const needsResampling = totalWidth !== originalDataWidth\n\n if (!needsResampling) {\n // At high zoom levels, use original data directly - much faster!\n resampledData = frequenciesData\n } else if (this.cachedResampledData && this.cachedWidth === totalWidth) {\n // Use cached resampled data\n resampledData = this.cachedResampledData\n } else {\n // Only resample when actually needed\n resampledData = this.efficientResample(frequenciesData, totalWidth)\n this.cachedResampledData = resampledData\n this.cachedWidth = totalWidth\n }\n\n // Maximum frequency represented in `frequenciesData`\n // Use buffer.sampleRate if available (from getFrequencies), otherwise use the provided sampleRate\n const freqFrom = this.buffer?.sampleRate ? this.buffer.sampleRate / 2 : (this.options.sampleRate || 0) / 2\n\n // Minimum and maximum frequency we want to draw\n const freqMin = this.frequencyMin\n const freqMax = this.frequencyMax\n\n // Draw background if needed\n const shouldDrawBackground = freqMax > freqFrom\n const bgColor = shouldDrawBackground ? this.colorMap[this.colorMap.length - 1] : null\n\n // Function to draw a single canvas\n const drawCanvas = (canvasIndex: number) => {\n if (canvasIndex < 0 || canvasIndex >= numCanvases) return\n if (this.drawnCanvases[canvasIndex]) return\n\n this.drawnCanvases[canvasIndex] = true\n\n const offset = canvasIndex * maxCanvasWidth\n const canvasWidth = Math.min(maxCanvasWidth, totalWidth - offset)\n\n if (canvasWidth <= 0) return\n\n const canvas = this.createSingleCanvas(canvasWidth, totalHeight, offset)\n this.canvases.push(canvas)\n const ctx = canvas.getContext('2d')\n\n if (!ctx) return\n\n // Draw background if needed\n if (shouldDrawBackground && bgColor) {\n ctx.fillStyle = `rgba(${bgColor[0] * 255}, ${bgColor[1] * 255}, ${bgColor[2] * 255}, ${bgColor[3]})`\n ctx.fillRect(0, 0, canvasWidth, totalHeight)\n }\n\n // Render each channel for this canvas segment\n for (let c = 0; c < resampledData.length; c++) {\n this.drawSpectrogramSegment(\n resampledData[c],\n ctx,\n canvasWidth,\n this.height,\n c * this.height,\n offset,\n totalWidth,\n freqFrom,\n freqMin,\n freqMax,\n )\n }\n }\n\n // Store rendering parameters for lazy loading\n this.isScrollable = totalWidth > this.getWrapperWidth()\n\n // Clear previous scroll listener\n if (this.scrollUnsubscribe) {\n this.scrollUnsubscribe()\n this.scrollUnsubscribe = null\n }\n\n if (!this.isScrollable || numCanvases <= 3) {\n // Draw all canvases if not scrollable or few canvases\n for (let i = 0; i < numCanvases; i++) {\n drawCanvas(i)\n }\n } else {\n // Implement lazy rendering with scroll listener\n const renderVisibleCanvases = () => {\n const wrapper = this.wavesurfer?.getWrapper()\n if (!wrapper) return\n\n const scrollLeft = wrapper.scrollLeft || 0\n const containerWidth = wrapper.clientWidth || 0\n\n // Calculate visible range with some buffer\n const bufferRatio = 0.5 // Render 50% extra on each side\n const visibleStart = Math.max(0, scrollLeft - containerWidth * bufferRatio)\n const visibleEnd = Math.min(totalWidth, scrollLeft + containerWidth * (1 + bufferRatio))\n\n const startCanvasIndex = Math.floor((visibleStart / totalWidth) * numCanvases)\n const endCanvasIndex = Math.min(Math.ceil((visibleEnd / totalWidth) * numCanvases), numCanvases - 1)\n\n // Clear excess canvases if we have too many\n if (Object.keys(this.drawnCanvases).length > SpectrogramPlugin.MAX_NODES) {\n this.clearExcessCanvases()\n }\n\n // Draw visible canvases\n for (let i = startCanvasIndex; i <= endCanvasIndex; i++) {\n drawCanvas(i)\n }\n }\n\n // Initial render of visible canvases\n renderVisibleCanvases()\n\n // Set up scroll listener for lazy loading\n let scrollTimeout: number | null = null\n const onScroll = () => {\n if (scrollTimeout) clearTimeout(scrollTimeout)\n scrollTimeout = window.setTimeout(renderVisibleCanvases, 16) // 60fps\n }\n\n const wrapper = this.wavesurfer?.getWrapper()\n if (wrapper) {\n wrapper.addEventListener('scroll', onScroll, { passive: true })\n this.scrollUnsubscribe = () => {\n wrapper.removeEventListener('scroll', onScroll)\n if (scrollTimeout) clearTimeout(scrollTimeout)\n }\n }\n }\n\n if (this.options.labels) {\n this.loadLabels(\n this.options.labelsBackground,\n '12px',\n '12px',\n '',\n this.options.labelsColor,\n this.options.labelsHzColor || this.options.labelsColor,\n 'center',\n '#specLabels',\n frequenciesData.length,\n )\n }\n\n this.emit('ready')\n }\n\n private drawSpectrogramSegment(\n resampledPixels: Uint8Array[],\n ctx: CanvasRenderingContext2D,\n canvasWidth: number,\n height: number,\n yOffset: number,\n xOffset: number,\n totalWidth: number,\n freqFrom: number,\n freqMin: number,\n freqMax: number,\n ): void {\n // Data is already resampled for the total width\n const bitmapHeight = resampledPixels[0].length\n\n // Calculate which portion of the resampled data corresponds to this canvas\n const startIndex = Math.floor((xOffset / totalWidth) * resampledPixels.length)\n const endIndex = Math.min(\n Math.ceil(((xOffset + canvasWidth) / totalWidth) * resampledPixels.length),\n resampledPixels.length,\n )\n const segmentPixels = resampledPixels.slice(startIndex, endIndex)\n\n if (segmentPixels.length === 0) return\n\n // Create ImageData for this segment\n const segmentWidth = segmentPixels.length\n const imageData = new ImageData(segmentWidth, bitmapHeight)\n const data = imageData.data\n\n // Always use quality rendering - users want accurate spectrograms\n this.fillImageDataQuality(data, segmentPixels, segmentWidth, bitmapHeight)\n\n // Calculate frequency scaling\n const rMin = hzToScale(freqMin, this.scale) / hzToScale(freqFrom, this.scale)\n const rMax = hzToScale(freqMax, this.scale) / hzToScale(freqFrom, this.scale)\n const rMax1 = Math.min(1, rMax)\n\n // Create and draw the bitmap - manage async properly\n const bitmapPromise = createImageBitmap(\n imageData,\n 0,\n Math.round(bitmapHeight * (1 - rMax1)),\n segmentWidth,\n Math.round(bitmapHeight * (rMax1 - rMin)),\n )\n\n // Track pending bitmap for cleanup\n this.pendingBitmaps.add(bitmapPromise)\n\n bitmapPromise\n .then((bitmap) => {\n // Remove from pending set\n this.pendingBitmaps.delete(bitmapPromise)\n\n // Check if canvas is still valid before drawing\n if (ctx.canvas.parentNode) {\n const drawHeight = (height * rMax1) / rMax\n const drawY = yOffset + height * (1 - rMax1 / rMax)\n\n ctx.drawImage(bitmap, 0, drawY, canvasWidth, drawHeight)\n\n // Clean up bitmap to free memory\n if ('close' in bitmap) {\n bitmap.close()\n }\n }\n })\n .catch((error) => {\n // Clean up on error\n this.pendingBitmaps.delete(bitmapPromise)\n })\n }\n\n private getWidth() {\n return this.wavesurfer.getWrapper().offsetWidth\n }\n\n private getWrapperWidth() {\n return this.wavesurfer?.getWrapper()?.clientWidth || 0\n }\n\n private async calculateFrequenciesWithWorker(buffer: AudioBuffer): Promise {\n if (!this.worker) {\n throw new Error('Worker not available')\n }\n\n const fftSamples = this.fftSamples\n const channels =\n (this.options.splitChannels ?? this.wavesurfer?.options.splitChannels) ? buffer.numberOfChannels : 1\n\n // Calculate noverlap\n let noverlap = this.noverlap\n if (!noverlap) {\n const totalWidth = this.getWidth()\n const uniqueSamplesPerPx = buffer.length / totalWidth\n noverlap = Math.max(0, Math.round(fftSamples - uniqueSamplesPerPx))\n }\n\n // Prepare audio data for worker\n const audioData: Float32Array[] = []\n for (let c = 0; c < channels; c++) {\n audioData.push(buffer.getChannelData(c))\n }\n\n // Generate unique ID for this request\n const id = `${Date.now()}_${Math.random()}`\n\n // Create promise for worker response\n const promise = new Promise((resolve, reject) => {\n this.workerPromises.set(id, { resolve, reject })\n\n // Set timeout to avoid hanging\n setTimeout(() => {\n if (this.workerPromises.has(id)) {\n this.workerPromises.delete(id)\n reject(new Error('Worker timeout'))\n }\n }, 30000) // 30 second timeout\n })\n\n // Send message to worker\n this.worker.postMessage({\n type: 'calculateFrequencies',\n id,\n audioData,\n options: {\n startTime: 0,\n endTime: buffer.duration,\n sampleRate: buffer.sampleRate,\n fftSamples: this.fftSamples,\n windowFunc: this.windowFunc,\n alpha: this.alpha,\n noverlap,\n scale: this.scale,\n gainDB: this.gainDB,\n rangeDB: this.rangeDB,\n splitChannels: this.options.splitChannels || false,\n },\n })\n\n return promise\n }\n\n private async getFrequencies(buffer: AudioBuffer): Promise {\n this.frequencyMax = this.frequencyMax || buffer.sampleRate / 2\n this.buffer = buffer\n\n if (!buffer) return []\n\n // Use worker if enabled and available\n if (this.useWebWorker && this.worker) {\n try {\n return await this.calculateFrequenciesWithWorker(buffer)\n } catch (error) {\n console.warn('Worker calculation failed, falling back to main thread:', error)\n // Fall through to main thread calculation\n }\n }\n\n const fftSamples = this.fftSamples\n const channels =\n (this.options.splitChannels ?? this.wavesurfer?.options.splitChannels) ? buffer.numberOfChannels : 1\n\n // This may differ from file samplerate. Browser resamples audio.\n const sampleRate = buffer.sampleRate\n const frequencies: Uint8Array[][] = []\n\n // Calculate noverlap and hop size (same logic as worker for consistency)\n let noverlap = this.noverlap\n if (!noverlap) {\n const totalWidth = this.getWidth()\n const uniqueSamplesPerPx = buffer.length / totalWidth\n noverlap = Math.max(0, Math.round(fftSamples - uniqueSamplesPerPx))\n }\n\n // Calculate hop size (same as worker for consistency)\n let actualNoverlap = noverlap || Math.max(0, Math.round(fftSamples * 0.5))\n const maxOverlap = fftSamples * 0.5\n actualNoverlap = Math.min(actualNoverlap, maxOverlap)\n const minHopSize = Math.max(64, fftSamples * 0.25)\n const hopSize = Math.max(minHopSize, fftSamples - actualNoverlap)\n\n // Create FFT instance (reuse if possible for performance)\n const fft = new FFT(fftSamples, sampleRate, this.windowFunc, this.alpha)\n\n // Create filter bank based on scale using centralized function\n const numFilters = this.fftSamples / 2\n const filterBank = createFilterBankForScale(this.scale, numFilters, this.fftSamples, sampleRate)\n\n for (let c = 0; c < channels; c++) {\n // for each channel\n const channelData = buffer.getChannelData(c)\n const channelFreq: Uint8Array[] = []\n\n // Use same hop size calculation as worker for consistency\n for (let sample = 0; sample + fftSamples < channelData.length; sample += hopSize) {\n const segment = channelData.slice(sample, sample + fftSamples)\n let spectrum = fft.calculateSpectrum(segment)\n\n if (filterBank) {\n spectrum = applyFilterBank(spectrum, filterBank)\n }\n\n // Convert to uint8 color indices\n const freqBins = new Uint8Array(spectrum.length)\n const gainPlusRange = this.gainDB + this.rangeDB\n\n for (let j = 0; j < spectrum.length; j++) {\n const magnitude = spectrum[j] > 1e-12 ? spectrum[j] : 1e-12\n const valueDB = 20 * Math.log10(magnitude)\n\n if (valueDB < -gainPlusRange) {\n freqBins[j] = 0\n } else if (valueDB > -this.gainDB) {\n freqBins[j] = 255\n } else {\n freqBins[j] = Math.round(((valueDB + this.gainDB) / this.rangeDB) * 255)\n }\n }\n channelFreq.push(freqBins)\n }\n frequencies.push(channelFreq)\n }\n\n return frequencies\n }\n\n private loadLabels(\n bgFill,\n fontSizeFreq,\n fontSizeUnit,\n fontType,\n textColorFreq,\n textColorUnit,\n textAlign,\n container,\n channels,\n ) {\n const frequenciesHeight = this.height\n bgFill = bgFill || 'rgba(68,68,68,0)'\n fontSizeFreq = fontSizeFreq || '12px'\n fontSizeUnit = fontSizeUnit || '12px'\n fontType = fontType || 'Helvetica'\n textColorFreq = textColorFreq || '#fff'\n textColorUnit = textColorUnit || '#fff'\n textAlign = textAlign || 'center'\n container = container || '#specLabels'\n const bgWidth = 55\n const getMaxY = frequenciesHeight || 512\n const labelIndex = 5 * (getMaxY / 256)\n const freqStart = this.frequencyMin\n const step = (this.frequencyMax - freqStart) / labelIndex\n\n // prepare canvas element for labels\n const ctx = this.labelsEl.getContext('2d')\n const dispScale = window.devicePixelRatio\n this.labelsEl.height = this.height * channels * dispScale\n this.labelsEl.width = bgWidth * dispScale\n ctx.scale(dispScale, dispScale)\n\n if (!ctx) {\n return\n }\n\n for (let c = 0; c < channels; c++) {\n // for each channel\n // fill background\n ctx.fillStyle = bgFill\n ctx.fillRect(0, c * getMaxY, bgWidth, (1 + c) * getMaxY)\n ctx.fill()\n let i\n\n // render labels\n for (i = 0; i <= labelIndex; i++) {\n ctx.textAlign = textAlign\n ctx.textBaseline = 'middle'\n\n const freq = getLabelFrequency(i, labelIndex, this.frequencyMin, this.frequencyMax, this.scale)\n const label = freqType(freq)\n const units = unitType(freq)\n const x = 16\n let y = (1 + c) * getMaxY - (i / labelIndex) * getMaxY\n\n // Make sure label remains in view\n y = Math.min(Math.max(y, c * getMaxY + 10), (1 + c) * getMaxY - 10)\n\n // unit label\n ctx.fillStyle = textColorUnit\n ctx.font = fontSizeUnit + ' ' + fontType\n ctx.fillText(units, x + 24, y)\n // freq label\n ctx.fillStyle = textColorFreq\n ctx.font = fontSizeFreq + ' ' + fontType\n ctx.fillText(label, x, y)\n }\n }\n }\n\n private efficientResample(frequenciesData: Uint8Array[][], targetWidth: number): Uint8Array[][] {\n return frequenciesData.map((channelFreq) => this.resampleChannel(channelFreq, targetWidth))\n }\n\n private resampleChannel(oldMatrix: Uint8Array[], targetWidth: number): Uint8Array[] {\n const oldColumns = oldMatrix.length\n const freqBins = oldMatrix[0]?.length || 0\n\n // Fast path for no resampling needed\n if (oldColumns === targetWidth || targetWidth === 0) {\n return oldMatrix\n }\n\n const ratio = oldColumns / targetWidth\n\n // Always use quality resampling for accurate spectrograms\n const newMatrix = new Array(targetWidth)\n\n if (ratio >= 1) {\n // Downsampling with proper averaging\n for (let i = 0; i < targetWidth; i++) {\n const start = Math.floor(i * ratio)\n const end = Math.min(Math.ceil((i + 1) * ratio), oldColumns)\n const count = end - start\n\n // Always create new column to avoid reference issues\n const column = new Uint8Array(freqBins)\n if (count === 1) {\n // Single source column - copy data\n column.set(oldMatrix[start])\n } else {\n // Average multiple source columns\n for (let k = 0; k < freqBins; k++) {\n let sum = 0\n for (let j = start; j < end; j++) {\n sum += oldMatrix[j][k]\n }\n column[k] = Math.round(sum / count)\n }\n }\n newMatrix[i] = column\n }\n } else {\n // Upsampling with linear interpolation for quality\n for (let i = 0; i < targetWidth; i++) {\n const srcIndex = i * ratio\n const leftIndex = Math.floor(srcIndex)\n const rightIndex = Math.min(leftIndex + 1, oldColumns - 1)\n const weight = srcIndex - leftIndex\n\n const column = new Uint8Array(freqBins)\n\n if (weight === 0 || leftIndex === rightIndex) {\n // Exact match or at boundary - use nearest neighbor\n column.set(oldMatrix[leftIndex])\n } else {\n // Linear interpolation for better quality\n const leftColumn = oldMatrix[leftIndex]\n const rightColumn = oldMatrix[rightIndex]\n const invWeight = 1 - weight\n for (let k = 0; k < freqBins; k++) {\n column[k] = Math.round(leftColumn[k] * invWeight + rightColumn[k] * weight)\n }\n }\n newMatrix[i] = column\n }\n }\n\n return newMatrix\n }\n\n private fillImageDataQuality(\n data: Uint8ClampedArray,\n segmentPixels: Uint8Array[],\n segmentWidth: number,\n bitmapHeight: number,\n ): void {\n // High quality rendering - process all pixels\n const colorMap = this.colorMap\n for (let i = 0; i < segmentWidth; i++) {\n const column = segmentPixels[i]\n for (let j = 0; j < bitmapHeight; j++) {\n const colorIndex = column[j]\n const color = colorMap[colorIndex]\n const pixelIndex = ((bitmapHeight - j - 1) * segmentWidth + i) * 4\n\n // Write RGBA values\n data[pixelIndex] = color[0] * 255\n data[pixelIndex + 1] = color[1] * 255\n data[pixelIndex + 2] = color[2] * 255\n data[pixelIndex + 3] = color[3] * 255\n }\n }\n }\n}\n\nexport default SpectrogramPlugin\n" }, { "path": "src/plugins/timeline.ts", "content": "/**\n * The Timeline plugin adds timestamps and notches under the waveform.\n */\n\nimport BasePlugin, { type BasePluginEvents } from '../base-plugin.js'\nimport createElement from '../dom.js'\nimport { effect } from '../reactive/store.js'\n\nexport type TimelinePluginOptions = {\n /** The height of the timeline in pixels, defaults to 20 */\n height?: number\n /** HTML element or selector for a timeline container, defaults to wavesufer's container */\n container?: HTMLElement | string\n /** Pass 'beforebegin' to insert the timeline on top of the waveform */\n insertPosition?: InsertPosition\n /** The duration of the timeline in seconds, defaults to wavesurfer's duration */\n duration?: number\n /** Interval between ticks in seconds */\n timeInterval?: number\n /** Interval between numeric labels in seconds */\n primaryLabelInterval?: number\n /** Interval between secondary numeric labels in seconds */\n secondaryLabelInterval?: number\n /** Interval between numeric labels in timeIntervals (i.e notch count) */\n primaryLabelSpacing?: number\n /** Interval between secondary numeric labels in timeIntervals (i.e notch count) */\n secondaryLabelSpacing?: number\n /** offset in seconds for the numeric labels */\n timeOffset?: number\n /** Custom inline style to apply to the container */\n style?: Partial | string\n /** Turn the time into a suitable label for the time. */\n formatTimeCallback?: (seconds: number) => string\n /** Opacity of the secondary labels, defaults to 0.25 */\n secondaryLabelOpacity?: number\n}\n\nconst defaultOptions = {\n height: 20,\n timeOffset: 0,\n formatTimeCallback: (seconds: number) => {\n if (seconds / 60 > 1) {\n // calculate minutes and seconds from seconds count\n const minutes = Math.floor(seconds / 60)\n seconds = Math.round(seconds % 60)\n const paddedSeconds = `${seconds < 10 ? '0' : ''}${seconds}`\n return `${minutes}:${paddedSeconds}`\n }\n const rounded = Math.round(seconds * 1000) / 1000\n return `${rounded}`\n },\n}\n\nexport type TimelinePluginEvents = BasePluginEvents & {\n ready: []\n}\n\nclass TimelinePlugin extends BasePlugin {\n private timelineWrapper: HTMLElement\n protected options: TimelinePluginOptions & typeof defaultOptions\n private notchElements: Map = new Map()\n private currentTimeline: HTMLElement | null = null\n\n constructor(options?: TimelinePluginOptions) {\n super(options || {})\n\n this.options = Object.assign({}, defaultOptions, options)\n this.timelineWrapper = this.initTimelineWrapper()\n }\n\n public static create(options?: TimelinePluginOptions) {\n return new TimelinePlugin(options)\n }\n\n /** Called by wavesurfer, don't call manually */\n onInit() {\n if (!this.wavesurfer) {\n throw Error('WaveSurfer is not initialized')\n }\n\n let container = this.wavesurfer.getWrapper()\n if (this.options.container instanceof HTMLElement) {\n container = this.options.container\n } else if (typeof this.options.container === 'string') {\n const el = document.querySelector(this.options.container)\n if (!el) throw Error(`No Timeline container found matching ${this.options.container}`)\n container = el as HTMLElement\n }\n\n if (this.options.insertPosition) {\n ;(container.firstElementChild || container).insertAdjacentElement(\n this.options.insertPosition,\n this.timelineWrapper,\n )\n } else {\n container.appendChild(this.timelineWrapper)\n }\n\n // Get reactive state\n const state = this.wavesurfer.getState()\n\n // React to duration changes and redraw events to initialize timeline\n this.subscriptions.push(\n effect(() => {\n const duration = state.duration.value\n if (duration > 0 || this.options.duration) {\n this.initTimeline()\n }\n }, [state.duration]),\n )\n\n this.subscriptions.push(this.wavesurfer.on('redraw', () => this.initTimeline()))\n\n // Add single scroll listener for all notches (register once, not on every redraw)\n this.subscriptions.push(\n this.wavesurfer.on('scroll', (_start, _end, scrollLeft, scrollRight) => {\n if (this.currentTimeline) {\n this.updateVisibleNotches(scrollLeft, scrollRight, this.currentTimeline)\n }\n }),\n )\n\n if (this.wavesurfer?.getDuration() || this.options.duration) {\n this.initTimeline()\n }\n }\n\n /** Unmount */\n public destroy() {\n this.timelineWrapper.remove()\n super.destroy()\n }\n\n private initTimelineWrapper(): HTMLElement {\n return createElement('div', { part: 'timeline-wrapper', style: { pointerEvents: 'none' } })\n }\n\n // Return how many seconds should be between each notch\n private defaultTimeInterval(pxPerSec: number): number {\n if (pxPerSec >= 25) {\n return 1\n } else if (pxPerSec * 5 >= 25) {\n return 5\n } else if (pxPerSec * 15 >= 25) {\n return 15\n }\n return Math.ceil(0.5 / pxPerSec) * 60\n }\n\n // Return the cadence of notches that get labels in the primary color.\n private defaultPrimaryLabelInterval(pxPerSec: number): number {\n if (pxPerSec >= 25) {\n return 10\n } else if (pxPerSec * 5 >= 25) {\n return 6\n } else if (pxPerSec * 15 >= 25) {\n return 4\n }\n return 4\n }\n\n // Return the cadence of notches that get labels in the secondary color.\n private defaultSecondaryLabelInterval(pxPerSec: number): number {\n if (pxPerSec >= 25) {\n return 5\n } else if (pxPerSec * 5 >= 25) {\n return 2\n } else if (pxPerSec * 15 >= 25) {\n return 2\n }\n return 2\n }\n\n private virtualAppend(start: number, container: HTMLElement, element: HTMLElement) {\n // Store notch metadata for batch updates\n this.notchElements.set(element, {\n start,\n width: element.clientWidth,\n wasVisible: false,\n })\n\n // Initial render check\n if (!this.wavesurfer) return\n const scrollLeft = this.wavesurfer.getScroll()\n const scrollRight = scrollLeft + this.wavesurfer.getWidth()\n\n const notchData = this.notchElements.get(element)!\n const isVisible = start >= scrollLeft && start + notchData.width < scrollRight\n notchData.wasVisible = isVisible\n\n if (isVisible) {\n container.appendChild(element)\n }\n }\n\n private updateVisibleNotches(scrollLeft: number, scrollRight: number, container: HTMLElement) {\n this.notchElements.forEach((notchData, element) => {\n const isVisible = notchData.start >= scrollLeft && notchData.start + notchData.width < scrollRight\n\n if (isVisible === notchData.wasVisible) return\n notchData.wasVisible = isVisible\n\n if (isVisible) {\n container.appendChild(element)\n } else {\n element.remove()\n }\n })\n }\n\n private initTimeline() {\n this.notchElements.clear()\n\n const duration = this.wavesurfer?.getDuration() ?? this.options.duration ?? 0\n const pxPerSec = (this.wavesurfer?.getWrapper().scrollWidth || this.timelineWrapper.scrollWidth) / duration\n const timeInterval = this.options.timeInterval ?? this.defaultTimeInterval(pxPerSec)\n const primaryLabelInterval = this.options.primaryLabelInterval ?? this.defaultPrimaryLabelInterval(pxPerSec)\n const primaryLabelSpacing = this.options.primaryLabelSpacing\n const secondaryLabelInterval = this.options.secondaryLabelInterval ?? this.defaultSecondaryLabelInterval(pxPerSec)\n const secondaryLabelSpacing = this.options.secondaryLabelSpacing\n const isTop = this.options.insertPosition === 'beforebegin'\n\n const timeline = createElement('div', {\n style: {\n height: `${this.options.height}px`,\n overflow: 'hidden',\n fontSize: `${this.options.height / 2}px`,\n whiteSpace: 'nowrap',\n ...(isTop\n ? {\n position: 'absolute',\n top: '0',\n left: '0',\n right: '0',\n zIndex: '2',\n }\n : {\n position: 'relative',\n }),\n },\n })\n\n timeline.setAttribute('part', 'timeline')\n\n if (typeof this.options.style === 'string') {\n timeline.setAttribute('style', timeline.getAttribute('style') + this.options.style)\n } else if (typeof this.options.style === 'object') {\n Object.assign(timeline.style, this.options.style)\n }\n\n const notchEl = createElement('div', {\n style: {\n width: '0',\n height: '50%',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: isTop ? 'flex-start' : 'flex-end',\n top: isTop ? '0' : 'auto',\n bottom: isTop ? 'auto' : '0',\n overflow: 'visible',\n borderLeft: '1px solid currentColor',\n opacity: `${this.options.secondaryLabelOpacity ?? 0.25}`,\n position: 'absolute',\n zIndex: '1',\n },\n })\n\n for (let i = 0, notches = 0; i < duration; i += timeInterval, notches++) {\n const notch = notchEl.cloneNode() as HTMLElement\n const isPrimary =\n Math.round(i * 100) % Math.round(primaryLabelInterval * 100) === 0 ||\n (primaryLabelSpacing && notches % primaryLabelSpacing === 0)\n const isSecondary =\n Math.round(i * 100) % Math.round(secondaryLabelInterval * 100) === 0 ||\n (secondaryLabelSpacing && notches % secondaryLabelSpacing === 0)\n\n if (isPrimary || isSecondary) {\n notch.style.height = '100%'\n notch.style.textIndent = '3px'\n notch.textContent = this.options.formatTimeCallback(i)\n if (isPrimary) notch.style.opacity = '1'\n }\n\n const mode = isPrimary ? 'primary' : isSecondary ? 'secondary' : 'tick'\n notch.setAttribute('part', `timeline-notch timeline-notch-${mode}`)\n\n const offset = (i + this.options.timeOffset) * pxPerSec\n notch.style.left = `${offset}px`\n this.virtualAppend(offset, timeline, notch)\n }\n\n this.timelineWrapper.innerHTML = ''\n this.timelineWrapper.appendChild(timeline)\n this.currentTimeline = timeline\n\n this.emit('ready')\n }\n}\n\nexport default TimelinePlugin\n" }, { "path": "src/plugins/zoom.ts", "content": "/**\n * Zoom plugin\n *\n * Zoom in or out on the waveform when scrolling the mouse wheel\n *\n * @author HoodyHuo (https://github.com/HoodyHuo)\n * @author Chris Morbitzer (https://github.com/cmorbitzer)\n * @author Sam Hulick (https://github.com/ffxsam)\n * @author Gustav Sollenius (https://github.com/gustavsollenius)\n * @author Viktor Jevdokimov (https://github.com/vitar)\n *\n * @example\n * // ... initialising wavesurfer with the plugin\n * var wavesurfer = WaveSurfer.create({\n * // wavesurfer options ...\n * plugins: [\n * ZoomPlugin.create({\n * // plugin options ...\n * })\n * ]\n * });\n */\n\nimport { BasePlugin, BasePluginEvents } from '../base-plugin.js'\nimport { effect } from '../reactive/store.js'\nimport { fromEvent } from '../reactive/event-streams.js'\n\nexport type ZoomPluginOptions = {\n /**\n * The amount of zoom per wheel step, e.g. 0.5 means a 50% magnification per scroll\n *\n * @default 0.5\n */\n scale?: number\n maxZoom?: number // The maximum pixels-per-second factor while zooming\n /**\n * The amount the wheel or trackpad needs to be moved before zooming the waveform. Set this value to 0 to have totally\n * fluid zooming (this has a high CPU cost).\n *\n * @default 5\n */\n deltaThreshold?: number\n /**\n * Whether to zoom into the waveform using a consistent exponential factor instead of a linear scale.\n * Exponential zooming ensures the zoom steps feel uniform regardless of scale.\n * When disabled, the zooming is linear and influenced by the `scale` parameter.\n *\n * @default false\n */\n exponentialZooming?: boolean\n /**\n * Number of steps required to zoom from the initial zoom level to `maxZoom`.\n *\n * @default 20\n */\n iterations?: number\n}\nconst defaultOptions = {\n scale: 0.5,\n deltaThreshold: 5,\n exponentialZooming: false,\n iterations: 20,\n}\n\nexport type ZoomPluginEvents = BasePluginEvents\n\nclass ZoomPlugin extends BasePlugin {\n protected options: ZoomPluginOptions & typeof defaultOptions\n private wrapper: HTMLElement | undefined = undefined\n private container: HTMLElement | null = null\n\n // State for wheel zoom\n private accumulatedDelta = 0\n private pointerTime: number = 0\n private oldX: number = 0\n private endZoom: number = 0\n private startZoom: number = 0\n\n // State for proportional pinch-to-zoom\n private isPinching = false\n private initialPinchDistance = 0\n private initialZoom = 0\n\n constructor(options?: ZoomPluginOptions) {\n super(options || {})\n this.options = Object.assign({}, defaultOptions, options)\n }\n\n public static create(options?: ZoomPluginOptions) {\n return new ZoomPlugin(options)\n }\n\n onInit() {\n this.wrapper = this.wavesurfer?.getWrapper()\n if (!this.wrapper) {\n return\n }\n this.container = this.wrapper.parentElement as HTMLElement\n\n if (typeof this.options.maxZoom === 'undefined') {\n this.options.maxZoom = this.container.clientWidth\n }\n this.endZoom = this.options.maxZoom\n\n // Get reactive state\n const state = this.wavesurfer?.getState()\n\n // React to zoom state changes to update internal state\n if (state) {\n this.subscriptions.push(\n effect(() => {\n const zoom = state.zoom.value\n if (zoom > 0 && this.startZoom === 0 && this.options.exponentialZooming) {\n const duration = state.duration.value\n if (duration > 0 && this.container) {\n this.startZoom = this.container.clientWidth / duration\n }\n }\n }, [state.zoom, state.duration]),\n )\n }\n\n // Create event streams\n const wheelStream = fromEvent(this.container, 'wheel')\n const touchStartStream = fromEvent(this.container, 'touchstart')\n const touchMoveStream = fromEvent(this.container, 'touchmove')\n const touchEndStream = fromEvent(this.container, 'touchend')\n const touchCancelStream = fromEvent(this.container, 'touchcancel')\n\n // React to wheel events\n this.subscriptions.push(\n effect(() => {\n const e = wheelStream.value\n if (e) this.onWheel(e)\n }, [wheelStream]),\n )\n\n // React to touch events\n this.subscriptions.push(\n effect(() => {\n const e = touchStartStream.value\n if (e) this.onTouchStart(e)\n }, [touchStartStream]),\n )\n\n this.subscriptions.push(\n effect(() => {\n const e = touchMoveStream.value\n if (e) this.onTouchMove(e)\n }, [touchMoveStream]),\n )\n\n this.subscriptions.push(\n effect(() => {\n const e = touchEndStream.value\n if (e) this.onTouchEnd(e)\n }, [touchEndStream]),\n )\n\n this.subscriptions.push(\n effect(() => {\n const e = touchCancelStream.value\n if (e) this.onTouchEnd(e)\n }, [touchCancelStream]),\n )\n }\n\n private onWheel = (e: WheelEvent) => {\n if (!this.wavesurfer || !this.container || Math.abs(e.deltaX) >= Math.abs(e.deltaY)) {\n return\n }\n // prevent scrolling the sidebar while zooming\n e.preventDefault()\n\n // Update the accumulated delta...\n this.accumulatedDelta += -e.deltaY\n\n if (this.startZoom === 0 && this.options.exponentialZooming) {\n this.startZoom = this.wavesurfer.getWrapper().clientWidth / this.wavesurfer.getDuration()\n }\n\n // ...and only scroll once we've hit our threshold\n if (this.options.deltaThreshold === 0 || Math.abs(this.accumulatedDelta) >= this.options.deltaThreshold) {\n const duration = this.wavesurfer.getDuration()\n const oldMinPxPerSec =\n this.wavesurfer.options.minPxPerSec === 0\n ? this.wavesurfer.getWrapper().scrollWidth / duration\n : this.wavesurfer.options.minPxPerSec\n const x = e.clientX - this.container.getBoundingClientRect().left\n const width = this.container.clientWidth\n const scrollX = this.wavesurfer.getScroll()\n\n // Update pointerTime only if the pointer position has changed. This prevents the waveform from drifting during fixed zooming.\n if (x !== this.oldX || this.oldX === 0) {\n this.pointerTime = (scrollX + x) / oldMinPxPerSec\n }\n this.oldX = x\n\n const newMinPxPerSec = this.calculateNewZoom(oldMinPxPerSec, this.accumulatedDelta)\n const newLeftSec = (width / newMinPxPerSec) * (x / width)\n\n if (newMinPxPerSec * duration < width) {\n this.wavesurfer.zoom(width / duration)\n this.container.scrollLeft = 0\n } else {\n this.wavesurfer.zoom(newMinPxPerSec)\n this.container.scrollLeft = (this.pointerTime - newLeftSec) * newMinPxPerSec\n }\n\n // Reset the accumulated delta\n this.accumulatedDelta = 0\n }\n }\n\n private calculateNewZoom = (oldZoom: number, delta: number) => {\n let newZoom\n if (this.options.exponentialZooming) {\n const zoomFactor =\n delta > 0\n ? Math.pow(this.endZoom / this.startZoom, 1 / (this.options.iterations - 1))\n : Math.pow(this.startZoom / this.endZoom, 1 / (this.options.iterations - 1))\n newZoom = Math.max(0, oldZoom * zoomFactor)\n } else {\n // Default linear zooming\n newZoom = Math.max(0, oldZoom + delta * this.options.scale)\n }\n return Math.min(newZoom, this.options.maxZoom!)\n }\n\n private getTouchDistance(e: TouchEvent): number {\n const touch1 = e.touches[0]\n const touch2 = e.touches[1]\n return Math.sqrt(Math.pow(touch2.clientX - touch1.clientX, 2) + Math.pow(touch2.clientY - touch1.clientY, 2))\n }\n\n private getTouchCenterX(e: TouchEvent): number {\n const touch1 = e.touches[0]\n const touch2 = e.touches[1]\n return (touch1.clientX + touch2.clientX) / 2\n }\n\n private onTouchStart = (e: TouchEvent) => {\n if (!this.wavesurfer || !this.container) return\n // Check if two fingers are used\n if (e.touches.length === 2) {\n e.preventDefault()\n this.isPinching = true\n\n // Store initial pinch distance\n this.initialPinchDistance = this.getTouchDistance(e)\n\n // Store initial zoom level\n const duration = this.wavesurfer.getDuration()\n this.initialZoom =\n this.wavesurfer.options.minPxPerSec === 0\n ? this.wavesurfer.getWrapper().scrollWidth / duration\n : this.wavesurfer.options.minPxPerSec\n\n // Store anchor point for zooming\n const x = this.getTouchCenterX(e) - this.container.getBoundingClientRect().left\n const scrollX = this.wavesurfer.getScroll()\n this.pointerTime = (scrollX + x) / this.initialZoom\n this.oldX = x // Use oldX to store the anchor X position\n }\n }\n\n private onTouchMove = (e: TouchEvent) => {\n if (!this.isPinching || e.touches.length !== 2 || !this.wavesurfer || !this.container) {\n return\n }\n e.preventDefault()\n\n // Calculate new zoom level\n const newDistance = this.getTouchDistance(e)\n const scaleFactor = newDistance / this.initialPinchDistance\n let newMinPxPerSec = this.initialZoom * scaleFactor\n\n // Constrain the zoom\n newMinPxPerSec = Math.min(newMinPxPerSec, this.options.maxZoom!)\n\n // Calculate minimum zoom (fit to width)\n const duration = this.wavesurfer.getDuration()\n const width = this.container.clientWidth\n const minZoom = width / duration\n if (newMinPxPerSec < minZoom) {\n newMinPxPerSec = minZoom\n }\n\n // Apply zoom and scroll\n const newLeftSec = (width / newMinPxPerSec) * (this.oldX / width)\n if (newMinPxPerSec === minZoom) {\n this.wavesurfer.zoom(minZoom)\n this.container.scrollLeft = 0\n } else {\n this.wavesurfer.zoom(newMinPxPerSec)\n this.container.scrollLeft = (this.pointerTime - newLeftSec) * newMinPxPerSec\n }\n }\n\n private onTouchEnd = (e: TouchEvent) => {\n if (this.isPinching && e.touches.length < 2) {\n this.isPinching = false\n this.initialPinchDistance = 0\n this.initialZoom = 0\n }\n }\n\n destroy() {\n super.destroy()\n }\n}\n\nexport default ZoomPlugin\n" }, { "path": "src/reactive/README.md", "content": "# Reactive System\n\nSignal-based reactivity for WaveSurfer.js, providing automatic state management and efficient updates.\n\n## Overview\n\nThe reactive system provides a lightweight, signal-based reactivity implementation similar to SolidJS signals. Signals are reactive values that automatically notify subscribers when they change, enabling efficient state management and UI updates.\n\n## Core Concepts\n\n### Signals\n\nReactive values that notify subscribers when they change.\n\n```typescript\nimport { signal } from './store.js'\n\nconst count = signal(0)\nconsole.log(count.value) // 0\n\ncount.set(5)\nconsole.log(count.value) // 5\n\n// Subscribe to changes\nconst unsubscribe = count.subscribe((value) => {\n console.log('Count changed:', value)\n})\n\ncount.set(10) // Logs: \"Count changed: 10\"\nunsubscribe() // Stop listening\n```\n\n### Computed Values\n\nAutomatically derived values that update when dependencies change.\n\n```typescript\nimport { signal, computed } from './store.js'\n\nconst count = signal(0)\nconst doubled = computed(() => count.value * 2, [count])\n\nconsole.log(doubled.value) // 0\ncount.set(5)\nconsole.log(doubled.value) // 10\n```\n\n### Effects\n\nSide effects that run automatically when dependencies change.\n\n```typescript\nimport { signal, effect } from './store.js'\n\nconst count = signal(0)\n\nconst cleanup = effect(() => {\n console.log('Count is:', count.value)\n // Optional: return cleanup function\n return () => console.log('Cleanup')\n}, [count])\n\ncount.set(5) // Logs: \"Cleanup\", \"Count is: 5\"\ncleanup() // Stop effect and run cleanup\n```\n\n## Module Architecture\n\n### Core Reactive Primitives\n\n- **`store.ts`** - Core signal, computed, and effect implementations\n - `signal(value)` - Create a writable reactive value\n - `computed(fn, deps)` - Create a derived reactive value\n - `effect(fn, deps)` - Run side effects on changes\n\n### Event Streams\n\n- **`event-stream-emitter.ts`** - Convert EventEmitter to reactive streams\n- **`event-streams.ts`** - DOM event streams (click, drag, scroll, zoom)\n- **`drag-stream.ts`** - Drag gesture detection and handling\n- **`scroll-stream.ts`** - Scroll position tracking with percentages\n\n### Bridges\n\n- **`state-event-emitter.ts`** - Bridge reactive state to EventEmitter API (backwards compatibility)\n- **`media-event-bridge.ts`** - Bridge HTML media events to reactive state\n\n### Utilities\n\n- **`render-scheduler.ts`** - Efficient render scheduling with RAF batching\n\n## Usage in WaveSurfer\n\n### Accessing Reactive State\n\n```typescript\nconst wavesurfer = WaveSurfer.create({ container: '#waveform' })\nconst state = wavesurfer.getState()\n\n// Read current value\nconsole.log(state.isPlaying.value)\n\n// Subscribe to changes\nstate.isPlaying.subscribe((playing) => {\n console.log('Playing:', playing)\n})\n\n// Access computed values\nconsole.log('Progress:', state.progressPercent.value)\n```\n\n### In Plugins\n\n```typescript\nclass MyPlugin extends BasePlugin {\n onInit() {\n const state = this.wavesurfer.getState()\n\n // Subscribe to state changes\n this.subscriptions.push(\n state.isPlaying.subscribe((playing) => {\n if (playing) {\n this.startAnimation()\n } else {\n this.stopAnimation()\n }\n })\n )\n\n // Access current time\n const currentTime = state.currentTime.value\n }\n}\n```\n\n## Testing\n\nRun tests:\n```bash\nnpm test src/reactive/__tests__\n```\n\nTest coverage: **97.66%**\n\nTest files:\n- `store.test.ts` - Core reactive primitives (362 tests)\n- `event-stream-emitter.test.ts` - EventEmitter streams (335 tests)\n- `event-streams.test.ts` - DOM event streams (375 tests)\n- `drag-stream.test.ts` - Drag gestures (253 tests)\n- `scroll-stream.test.ts` - Scroll tracking (250 tests)\n- `state-event-emitter.test.ts` - State bridging (368 tests)\n- `media-event-bridge.test.ts` - Media events (277 tests)\n- `render-scheduler.test.ts` - Render scheduling (278 tests)\n\n## Best Practices\n\n1. **Always unsubscribe**: Store unsubscribe functions and call them in cleanup\n ```typescript\n const unsubscribe = signal.subscribe(...)\n // Later:\n unsubscribe()\n ```\n\n2. **Use computed for derived values**: Don't manually recalculate\n ```typescript\n // Good\n const total = computed(() => price.value * quantity.value, [price, quantity])\n \n // Avoid\n let total = 0\n price.subscribe(p => total = p * quantity.value)\n quantity.subscribe(q => total = price.value * q)\n ```\n\n3. **Batch updates**: Multiple signal updates in the same tick are batched\n ```typescript\n count.set(1)\n count.set(2)\n count.set(3)\n // Subscribers notified once with value 3\n ```\n\n4. **Memory safety**: Cleanup subscriptions in destroy/cleanup methods\n ```typescript\n class Component {\n private cleanups: Array<() => void> = []\n \n init() {\n this.cleanups.push(\n state.subscribe(...)\n )\n }\n \n destroy() {\n this.cleanups.forEach(fn => fn())\n }\n }\n ```\n\n## Performance Characteristics\n\n- **O(1)** signal reads via property getter\n- **O(n)** signal writes, where n = number of subscribers\n- **Automatic batching** - Multiple updates in same tick are batched\n- **Change detection** - Uses `Object.is()` to detect changes\n- **Memory efficient** - Subscriptions use `Set` for O(1) add/remove\n\n## Future Enhancements\n\nPotential improvements for future versions:\n\n- Optional debug mode for tracking signal updates\n- WeakMap-based subscriptions for large objects\n- Automatic dependency tracking (like SolidJS)\n- Transaction support for atomic multi-signal updates\n" }, { "path": "src/reactive/__tests__/drag-stream.test.ts", "content": "import { createDragStream, type DragEvent } from '../drag-stream'\n\ndescribe('createDragStream', () => {\n beforeAll(() => {\n // Mock matchMedia\n Object.defineProperty(window, 'matchMedia', {\n writable: true,\n value: jest.fn().mockReturnValue({\n matches: false,\n addListener: jest.fn(),\n removeListener: jest.fn(),\n }),\n })\n\n // Polyfill PointerEvent for jsdom\n if (typeof window.PointerEvent === 'undefined') {\n class FakePointerEvent extends MouseEvent {\n constructor(type: string, props: any) {\n super(type, props)\n }\n }\n // @ts-expect-error - Polyfill PointerEvent for jsdom test environment\n window.PointerEvent = FakePointerEvent\n // @ts-expect-error - Polyfill PointerEvent for jsdom test environment\n global.PointerEvent = FakePointerEvent\n }\n })\n let element: HTMLElement\n let events: DragEvent[]\n\n beforeEach(() => {\n element = document.createElement('div')\n document.body.appendChild(element)\n element.getBoundingClientRect = jest.fn(() => ({\n left: 0,\n top: 0,\n right: 100,\n bottom: 100,\n width: 100,\n height: 100,\n x: 0,\n y: 0,\n toJSON: () => ({}),\n }))\n events = []\n })\n\n afterEach(() => {\n document.body.removeChild(element)\n })\n\n it('should create a drag signal', () => {\n const { signal, cleanup } = createDragStream(element)\n\n expect(signal).toBeDefined()\n expect(signal.value).toBeNull()\n\n cleanup()\n })\n\n it('should emit start event on drag', () => {\n const { signal, cleanup } = createDragStream(element, { threshold: 0 })\n\n signal.subscribe((event: DragEvent | null) => {\n if (event) events.push(event)\n })\n\n // Simulate drag\n const pointerDown = new PointerEvent('pointerdown', { clientX: 10, clientY: 10, button: 0 })\n element.dispatchEvent(pointerDown)\n\n const pointerMove = new PointerEvent('pointermove', { clientX: 20, clientY: 20 })\n document.dispatchEvent(pointerMove)\n\n expect(events.length).toBeGreaterThan(0)\n expect(events[0]?.type).toBe('start')\n\n cleanup()\n })\n\n it('should emit move events with deltas', () => {\n const { signal, cleanup } = createDragStream(element, { threshold: 0 })\n\n signal.subscribe((event: DragEvent | null) => {\n if (event) events.push(event)\n })\n\n // Simulate drag\n const pointerDown = new PointerEvent('pointerdown', { clientX: 10, clientY: 10, button: 0 })\n element.dispatchEvent(pointerDown)\n\n const pointerMove = new PointerEvent('pointermove', { clientX: 20, clientY: 30 })\n document.dispatchEvent(pointerMove)\n\n const moveEvent = events.find((e) => e.type === 'move')\n expect(moveEvent).toBeDefined()\n expect(moveEvent?.deltaX).toBe(10)\n expect(moveEvent?.deltaY).toBe(20)\n\n cleanup()\n })\n\n it('should emit end event on pointer up', () => {\n const { signal, cleanup } = createDragStream(element, { threshold: 0 })\n\n signal.subscribe((event: DragEvent | null) => {\n if (event) events.push(event)\n })\n\n // Simulate drag\n const pointerDown = new PointerEvent('pointerdown', { clientX: 10, clientY: 10, button: 0 })\n element.dispatchEvent(pointerDown)\n\n const pointerMove = new PointerEvent('pointermove', { clientX: 20, clientY: 20 })\n document.dispatchEvent(pointerMove)\n\n const pointerUp = new PointerEvent('pointerup', { clientX: 20, clientY: 20 })\n document.dispatchEvent(pointerUp)\n\n expect(events.some((e) => e.type === 'end')).toBe(true)\n\n cleanup()\n })\n\n it('should respect threshold', () => {\n const { signal, cleanup } = createDragStream(element, { threshold: 10 })\n\n signal.subscribe((event: DragEvent | null) => {\n if (event) events.push(event)\n })\n\n // Simulate small drag (below threshold)\n const pointerDown = new PointerEvent('pointerdown', { clientX: 10, clientY: 10, button: 0 })\n element.dispatchEvent(pointerDown)\n\n const pointerMove = new PointerEvent('pointermove', { clientX: 15, clientY: 15 })\n document.dispatchEvent(pointerMove)\n\n // Should not emit events yet\n expect(events.length).toBe(0)\n\n // Simulate larger drag (above threshold)\n const pointerMove2 = new PointerEvent('pointermove', { clientX: 25, clientY: 25 })\n document.dispatchEvent(pointerMove2)\n\n // Should now emit events\n expect(events.length).toBeGreaterThan(0)\n\n cleanup()\n })\n\n it('should cleanup event listeners', () => {\n const { cleanup } = createDragStream(element)\n\n const addEventListenerSpy = jest.spyOn(document, 'addEventListener')\n const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener')\n\n // Trigger drag to attach document listeners\n const pointerDown = new PointerEvent('pointerdown', { clientX: 10, clientY: 10, button: 0 })\n element.dispatchEvent(pointerDown)\n\n expect(addEventListenerSpy).toHaveBeenCalled()\n\n cleanup()\n\n expect(removeEventListenerSpy).toHaveBeenCalled()\n\n addEventListenerSpy.mockRestore()\n removeEventListenerSpy.mockRestore()\n })\n\n it('should ignore non-primary mouse buttons', () => {\n const { signal, cleanup } = createDragStream(element)\n\n signal.subscribe((event: DragEvent | null) => {\n if (event) events.push(event)\n })\n\n // Simulate right-click drag\n const pointerDown = new PointerEvent('pointerdown', { clientX: 10, clientY: 10, button: 2 })\n element.dispatchEvent(pointerDown)\n\n const pointerMove = new PointerEvent('pointermove', { clientX: 20, clientY: 20 })\n document.dispatchEvent(pointerMove)\n\n // Should not emit any events\n expect(events.length).toBe(0)\n\n cleanup()\n })\n\n it('should stop propagation during drag', () => {\n const { signal, cleanup } = createDragStream(element, { threshold: 0 })\n\n signal.subscribe((event: DragEvent | null) => {\n if (event) events.push(event)\n })\n\n // Start drag\n const pointerDown = new PointerEvent('pointerdown', { clientX: 10, clientY: 10, button: 0 })\n element.dispatchEvent(pointerDown)\n\n // Move - should prevent click\n const pointerMove = new PointerEvent('pointermove', { clientX: 20, clientY: 20 })\n document.dispatchEvent(pointerMove)\n\n // End drag\n const pointerUp = new PointerEvent('pointerup', { clientX: 20, clientY: 20 })\n document.dispatchEvent(pointerUp)\n\n // Simulate click after drag\n const clickHandler = jest.fn()\n document.addEventListener('click', clickHandler, { capture: true })\n\n const click = new MouseEvent('click', { bubbles: true })\n Object.defineProperty(click, 'stopPropagation', { value: jest.fn() })\n Object.defineProperty(click, 'preventDefault', { value: jest.fn() })\n document.dispatchEvent(click)\n\n document.removeEventListener('click', clickHandler, { capture: true })\n cleanup()\n })\n\n it('should handle pointer leave events', () => {\n const { signal, cleanup } = createDragStream(element, { threshold: 0 })\n\n signal.subscribe((event: DragEvent | null) => {\n if (event) events.push(event)\n })\n\n // Start drag\n const pointerDown = new PointerEvent('pointerdown', { clientX: 10, clientY: 10, button: 0, pointerId: 1 })\n element.dispatchEvent(pointerDown)\n\n // Move to start dragging\n const pointerMove = new PointerEvent('pointermove', { clientX: 20, clientY: 20, pointerId: 1 })\n document.dispatchEvent(pointerMove)\n\n // Pointer leaves document\n const pointerOut = new PointerEvent('pointerout', {\n clientX: 20,\n clientY: 20,\n pointerId: 1,\n relatedTarget: document.documentElement,\n })\n document.dispatchEvent(pointerOut)\n\n // Should emit end event\n expect(events.some((e) => e.type === 'end')).toBe(true)\n\n cleanup()\n })\n})\n" }, { "path": "src/reactive/__tests__/event-stream-emitter.test.ts", "content": "import { toStream, toStreams, mergeStreams, mapStream, filterStream } from '../event-stream-emitter'\nimport EventEmitter from '../../event-emitter'\n\ntype TestEvents = {\n play: []\n pause: []\n timeupdate: [time: number]\n error: [error: Error]\n customEvent: [data: string, count: number]\n}\n\n// Test class that exposes emit for testing\nclass TestEmitter extends EventEmitter {\n public emit(event: E, ...args: TestEvents[E]): void {\n super.emit(event, ...args)\n }\n}\n\ndescribe('event-stream-emitter', () => {\n let emitter: TestEmitter\n\n beforeEach(() => {\n emitter = new TestEmitter()\n })\n\n describe('toStream', () => {\n it('should create a stream from event', () => {\n const { stream, cleanup } = toStream(emitter, 'play')\n\n expect(stream.value).toBeNull()\n\n const values: any[] = []\n stream.subscribe((value) => values.push(value))\n\n emitter.emit('play')\n expect(stream.value).toEqual([])\n // Values includes initial null and then the event\n expect(values.length).toBeGreaterThanOrEqual(1)\n expect(values[values.length - 1]).toEqual([])\n\n cleanup()\n })\n\n it('should update stream with event arguments', () => {\n const { stream, cleanup } = toStream(emitter, 'timeupdate')\n\n emitter.emit('timeupdate', 42)\n expect(stream.value).toEqual([42])\n\n emitter.emit('timeupdate', 100)\n expect(stream.value).toEqual([100])\n\n cleanup()\n })\n\n it('should handle multiple arguments', () => {\n const { stream, cleanup } = toStream(emitter, 'customEvent')\n\n emitter.emit('customEvent', 'hello', 5)\n expect(stream.value).toEqual(['hello', 5])\n\n cleanup()\n })\n\n it('should cleanup event listener', () => {\n const { stream, cleanup } = toStream(emitter, 'play')\n\n emitter.emit('play')\n expect(stream.value).toEqual([])\n\n cleanup()\n\n // After cleanup, event should not update stream\n const oldValue = stream.value\n emitter.emit('play')\n expect(stream.value).toBe(oldValue) // Value should not change after cleanup\n })\n\n it('should allow multiple subscriptions to stream', () => {\n const { stream, cleanup } = toStream(emitter, 'timeupdate')\n\n const values1: any[] = []\n const values2: any[] = []\n\n stream.subscribe((value) => values1.push(value))\n stream.subscribe((value) => values2.push(value))\n\n emitter.emit('timeupdate', 10)\n emitter.emit('timeupdate', 20)\n\n expect(values1).toContainEqual([10])\n expect(values1).toContainEqual([20])\n expect(values2).toContainEqual([10])\n expect(values2).toContainEqual([20])\n\n cleanup()\n })\n })\n\n describe('toStreams', () => {\n it('should create multiple streams', () => {\n const streams = toStreams(emitter, ['play', 'pause', 'timeupdate'])\n\n expect(streams.play).toBeDefined()\n expect(streams.pause).toBeDefined()\n expect(streams.timeupdate).toBeDefined()\n\n emitter.emit('play')\n expect(streams.play.value).toEqual([])\n\n emitter.emit('pause')\n expect(streams.pause.value).toEqual([])\n\n emitter.emit('timeupdate', 50)\n expect(streams.timeupdate.value).toEqual([50])\n\n streams.cleanup()\n })\n\n it('should cleanup all streams', () => {\n const streams = toStreams(emitter, ['play', 'pause'])\n\n streams.cleanup()\n\n emitter.emit('play')\n emitter.emit('pause')\n\n // Streams should not update after cleanup\n expect(streams.play.value).toBeNull()\n expect(streams.pause.value).toBeNull()\n })\n\n it('should handle empty event list', () => {\n const streams = toStreams(emitter, [])\n\n expect(streams.cleanup).toBeDefined()\n expect(typeof streams.cleanup).toBe('function')\n\n streams.cleanup() // Should not throw\n })\n })\n\n describe('mergeStreams', () => {\n it('should merge multiple events into one stream', () => {\n const { stream, cleanup } = mergeStreams(emitter, ['play', 'pause'])\n\n expect(stream.value).toBeNull()\n\n const values: any[] = []\n stream.subscribe((value) => values.push(value))\n\n emitter.emit('play')\n expect(stream.value).toEqual({ event: 'play', args: [] })\n\n emitter.emit('pause')\n expect(stream.value).toEqual({ event: 'pause', args: [] })\n\n expect(values).toContainEqual({ event: 'play', args: [] })\n expect(values).toContainEqual({ event: 'pause', args: [] })\n\n cleanup()\n })\n\n it('should include event arguments in merged stream', () => {\n const { stream, cleanup } = mergeStreams(emitter, ['timeupdate', 'error'])\n\n emitter.emit('timeupdate', 42)\n expect(stream.value).toEqual({ event: 'timeupdate', args: [42] })\n\n const error = new Error('Test error')\n emitter.emit('error', error)\n expect(stream.value).toEqual({ event: 'error', args: [error] })\n\n cleanup()\n })\n\n it('should cleanup all merged event listeners', () => {\n const { stream, cleanup } = mergeStreams(emitter, ['play', 'pause'])\n\n cleanup()\n\n emitter.emit('play')\n emitter.emit('pause')\n\n // Stream should not update after cleanup\n expect(stream.value).toBeNull()\n })\n\n it('should handle single event', () => {\n const { stream, cleanup } = mergeStreams(emitter, ['play'])\n\n emitter.emit('play')\n expect(stream.value).toEqual({ event: 'play', args: [] })\n\n cleanup()\n })\n })\n\n describe('mapStream', () => {\n it('should transform stream values', () => {\n const { stream: timeStream, cleanup } = toStream(emitter, 'timeupdate')\n const seconds = mapStream(timeStream, (value) => (value ? Math.floor(value[0]) : 0))\n\n expect(seconds.value).toBe(0)\n\n emitter.emit('timeupdate', 42.7)\n expect(seconds.value).toBe(42)\n\n emitter.emit('timeupdate', 99.9)\n expect(seconds.value).toBe(99)\n\n cleanup()\n })\n\n it('should work with multiple subscriptions', () => {\n const { stream: timeStream, cleanup } = toStream(emitter, 'timeupdate')\n const doubled = mapStream(timeStream, (value) => (value ? value[0] * 2 : 0))\n\n const values: number[] = []\n doubled.subscribe((value) => values.push(value))\n\n emitter.emit('timeupdate', 5)\n emitter.emit('timeupdate', 10)\n\n expect(values).toContain(10)\n expect(values).toContain(20)\n\n cleanup()\n })\n\n it('should handle null values', () => {\n const { stream, cleanup } = toStream(emitter, 'play')\n const mapped = mapStream(stream, (value) => (value ? 'playing' : 'not playing'))\n\n expect(mapped.value).toBe('not playing')\n\n emitter.emit('play')\n expect(mapped.value).toBe('playing')\n\n cleanup()\n })\n })\n\n describe('filterStream', () => {\n it('should filter stream values', () => {\n const { stream: timeStream, cleanup } = toStream(emitter, 'timeupdate')\n const afterTen = filterStream(timeStream, (value) => (value ? value[0] > 10 : false))\n\n expect(afterTen.value).toBeNull()\n\n emitter.emit('timeupdate', 5)\n expect(afterTen.value).toBeNull()\n\n emitter.emit('timeupdate', 15)\n expect(afterTen.value).toEqual([15])\n\n emitter.emit('timeupdate', 7)\n expect(afterTen.value).toBeNull()\n\n cleanup()\n })\n\n it('should work with subscriptions', () => {\n const { stream: timeStream, cleanup } = toStream(emitter, 'timeupdate')\n const evenSeconds = filterStream(timeStream, (value) => value !== null && Math.floor(value[0]) % 2 === 0)\n\n const values: any[] = []\n evenSeconds.subscribe((value) => values.push(value))\n\n emitter.emit('timeupdate', 1)\n emitter.emit('timeupdate', 2)\n emitter.emit('timeupdate', 3)\n emitter.emit('timeupdate', 4)\n\n expect(values.filter((v) => v !== null)).toEqual([[2], [4]])\n\n cleanup()\n })\n\n it('should pass through values that match predicate', () => {\n const { stream, cleanup } = toStream(emitter, 'customEvent')\n const onlyHello = filterStream(stream, (value) => value !== null && value[0] === 'hello')\n\n emitter.emit('customEvent', 'hello', 1)\n expect(onlyHello.value).toEqual(['hello', 1])\n\n emitter.emit('customEvent', 'world', 2)\n expect(onlyHello.value).toBeNull()\n\n cleanup()\n })\n })\n\n describe('integration', () => {\n it('should allow chaining stream operations', () => {\n const { stream: timeStream, cleanup } = toStream(emitter, 'timeupdate')\n\n // Filter for times > 10, then map to seconds\n const filtered = filterStream(timeStream, (value) => (value ? value[0] > 10 : false))\n const seconds = mapStream(filtered, (value) => (value ? Math.floor(value[0]) : 0))\n\n const values: number[] = []\n seconds.subscribe((value) => values.push(value))\n\n emitter.emit('timeupdate', 5)\n emitter.emit('timeupdate', 15.7)\n emitter.emit('timeupdate', 20.3)\n\n expect(values).toContain(15)\n expect(values).toContain(20)\n expect(values).not.toContain(5)\n\n cleanup()\n })\n\n it('should work with merged streams', () => {\n const { stream: mergedStream, cleanup } = mergeStreams(emitter, ['play', 'pause'])\n\n const eventNames = mapStream(mergedStream, (value) => (value ? value.event : null))\n\n const names: any[] = []\n eventNames.subscribe((name) => names.push(name))\n\n emitter.emit('play')\n emitter.emit('pause')\n emitter.emit('play')\n\n expect(names).toContain('play')\n expect(names).toContain('pause')\n expect(names.filter((n) => n === 'play')).toHaveLength(2)\n\n cleanup()\n })\n })\n})\n" }, { "path": "src/reactive/__tests__/event-streams.test.ts", "content": "import { signal } from '../store'\nimport { fromEvent, map, filter, debounce, throttle, cleanup } from '../event-streams'\n\ndescribe('fromEvent', () => {\n let button: HTMLButtonElement\n\n beforeEach(() => {\n button = document.createElement('button')\n })\n\n it('should convert DOM events to signal', () => {\n const clicks = fromEvent(button, 'click')\n const callback = jest.fn()\n\n clicks.subscribe(callback)\n button.click()\n\n expect(callback).toHaveBeenCalledWith(expect.objectContaining({ type: 'click' }))\n })\n\n it('should start with null value', () => {\n const clicks = fromEvent(button, 'click')\n expect(clicks.value).toBeNull()\n })\n\n it('should update signal on each event', () => {\n const clicks = fromEvent(button, 'click')\n const values: any[] = []\n\n clicks.subscribe((event) => values.push(event))\n\n button.click()\n button.click()\n\n expect(values).toHaveLength(2)\n expect(values[0]).toMatchObject({ type: 'click' })\n expect(values[1]).toMatchObject({ type: 'click' })\n })\n\n it('should cleanup event listener on cleanup()', () => {\n const clicks = fromEvent(button, 'click')\n const callback = jest.fn()\n\n clicks.subscribe(callback)\n button.click()\n expect(callback).toHaveBeenCalledTimes(1)\n\n cleanup(clicks)\n button.click()\n expect(callback).toHaveBeenCalledTimes(1) // Should not increase\n })\n\n it('should work with different event types', () => {\n const input = document.createElement('input')\n const changes = fromEvent(input, 'change')\n const callback = jest.fn()\n\n changes.subscribe(callback)\n input.dispatchEvent(new Event('change'))\n\n expect(callback).toHaveBeenCalledWith(expect.objectContaining({ type: 'change' }))\n })\n})\n\ndescribe('map', () => {\n it('should transform stream values', () => {\n const numbers = signal(5)\n const doubled = map(numbers, (n) => n * 2)\n\n expect(doubled.value).toBe(10)\n\n numbers.set(10)\n expect(doubled.value).toBe(20)\n })\n\n it('should notify subscribers when mapped value changes', () => {\n const numbers = signal(5)\n const doubled = map(numbers, (n) => n * 2)\n const callback = jest.fn()\n\n doubled.subscribe(callback)\n numbers.set(10)\n\n expect(callback).toHaveBeenCalledWith(20)\n })\n\n it('should work with complex transformations', () => {\n const button = document.createElement('button')\n const clicks = fromEvent(button, 'click')\n const positions = map(clicks, (e) => (e ? e.clientX : 0))\n\n expect(positions.value).toBe(0)\n\n button.dispatchEvent(new MouseEvent('click', { clientX: 100 }))\n expect(positions.value).toBe(100)\n })\n\n it('should cleanup subscriptions on cleanup()', () => {\n const numbers = signal(5)\n const doubled = map(numbers, (n) => n * 2)\n const callback = jest.fn()\n\n doubled.subscribe(callback)\n cleanup(doubled)\n\n numbers.set(10)\n expect(callback).not.toHaveBeenCalled()\n })\n})\n\ndescribe('filter', () => {\n it('should filter stream values by predicate', () => {\n const numbers = signal(5)\n const evens = filter(numbers, (n) => n % 2 === 0)\n\n expect(evens.value).toBeNull() // 5 is odd\n\n numbers.set(6)\n expect(evens.value).toBe(6) // 6 is even\n\n numbers.set(7)\n expect(evens.value).toBeNull() // 7 is odd\n })\n\n it('should emit null for filtered values', () => {\n const numbers = signal(2)\n const evens = filter(numbers, (n) => n % 2 === 0)\n const values: any[] = []\n\n evens.subscribe((v) => values.push(v))\n\n numbers.set(3) // Odd - should emit null\n numbers.set(4) // Even - should emit 4\n numbers.set(5) // Odd - should emit null\n\n expect(values).toEqual([null, 4, null])\n })\n\n it('should start with correct initial value', () => {\n const evens1 = filter(signal(2), (n) => n % 2 === 0)\n expect(evens1.value).toBe(2)\n\n const evens2 = filter(signal(3), (n) => n % 2 === 0)\n expect(evens2.value).toBeNull()\n })\n\n it('should cleanup subscriptions on cleanup()', () => {\n const numbers = signal(2)\n const evens = filter(numbers, (n) => n % 2 === 0)\n const callback = jest.fn()\n\n evens.subscribe(callback)\n cleanup(evens)\n\n numbers.set(4)\n expect(callback).not.toHaveBeenCalled()\n })\n})\n\ndescribe('debounce', () => {\n beforeEach(() => {\n jest.useFakeTimers()\n })\n\n afterEach(() => {\n jest.useRealTimers()\n })\n\n it('should delay updates', () => {\n const numbers = signal(0)\n const debounced = debounce(numbers, 300)\n const callback = jest.fn()\n\n debounced.subscribe(callback)\n\n numbers.set(1)\n expect(callback).not.toHaveBeenCalled()\n\n jest.advanceTimersByTime(200)\n expect(callback).not.toHaveBeenCalled()\n\n jest.advanceTimersByTime(100)\n expect(callback).toHaveBeenCalledWith(1)\n })\n\n it('should reset timer on new update', () => {\n const numbers = signal(0)\n const debounced = debounce(numbers, 300)\n const callback = jest.fn()\n\n debounced.subscribe(callback)\n\n numbers.set(1)\n jest.advanceTimersByTime(200)\n\n numbers.set(2) // Reset timer\n jest.advanceTimersByTime(200)\n expect(callback).not.toHaveBeenCalled()\n\n jest.advanceTimersByTime(100)\n expect(callback).toHaveBeenCalledWith(2)\n expect(callback).toHaveBeenCalledTimes(1)\n })\n\n it('should emit latest value after delay', () => {\n const numbers = signal(0)\n const debounced = debounce(numbers, 100)\n const values: number[] = []\n\n debounced.subscribe((v) => values.push(v))\n\n numbers.set(1)\n numbers.set(2)\n numbers.set(3)\n\n jest.advanceTimersByTime(100)\n expect(values).toEqual([3]) // Only last value\n })\n\n it('should cleanup timeout on cleanup()', () => {\n const numbers = signal(0)\n const debounced = debounce(numbers, 300)\n const callback = jest.fn()\n\n debounced.subscribe(callback)\n numbers.set(1)\n\n cleanup(debounced)\n jest.advanceTimersByTime(300)\n\n expect(callback).not.toHaveBeenCalled()\n })\n\n it('should have initial value', () => {\n const numbers = signal(5)\n const debounced = debounce(numbers, 300)\n\n expect(debounced.value).toBe(5)\n })\n})\n\ndescribe('throttle', () => {\n beforeEach(() => {\n jest.useFakeTimers()\n })\n\n afterEach(() => {\n jest.useRealTimers()\n })\n\n it('should emit immediately on first update', () => {\n const numbers = signal(0)\n const throttled = throttle(numbers, 1000)\n const callback = jest.fn()\n\n throttled.subscribe(callback)\n\n numbers.set(1)\n expect(callback).toHaveBeenCalledWith(1)\n })\n\n it('should throttle subsequent updates', () => {\n const numbers = signal(0)\n const throttled = throttle(numbers, 1000)\n const values: number[] = []\n\n throttled.subscribe((v) => values.push(v))\n\n numbers.set(1) // Immediate\n numbers.set(2) // Too soon, scheduled\n numbers.set(3) // Too soon, scheduled (replaces 2)\n\n jest.advanceTimersByTime(1000)\n expect(values).toEqual([1, 3]) // 1 immediate, 3 after throttle\n })\n\n it('should allow emission after throttle period', () => {\n const numbers = signal(0)\n const throttled = throttle(numbers, 100)\n const values: number[] = []\n\n throttled.subscribe((v) => values.push(v))\n\n numbers.set(1) // Immediate\n jest.advanceTimersByTime(100)\n\n numbers.set(2) // Enough time passed, immediate\n expect(values).toEqual([1, 2])\n })\n\n it('should cleanup timeout on cleanup()', () => {\n const numbers = signal(0)\n const throttled = throttle(numbers, 1000)\n const callback = jest.fn()\n\n throttled.subscribe(callback)\n numbers.set(1)\n numbers.set(2)\n\n cleanup(throttled)\n jest.advanceTimersByTime(1000)\n\n expect(callback).toHaveBeenCalledTimes(1) // Only immediate call\n })\n\n it('should have initial value', () => {\n const numbers = signal(5)\n const throttled = throttle(numbers, 1000)\n\n expect(throttled.value).toBe(5)\n })\n})\n\ndescribe('stream composition', () => {\n beforeEach(() => {\n jest.useFakeTimers()\n })\n\n afterEach(() => {\n jest.useRealTimers()\n })\n\n it('should compose map + filter', () => {\n const numbers = signal(1)\n const doubled = map(numbers, (n) => n * 2)\n const evens = filter(doubled, (n) => n > 5)\n\n expect(evens.value).toBeNull() // 2 is not > 5\n\n numbers.set(3)\n expect(evens.value).toBe(6) // 6 is > 5\n\n numbers.set(2)\n expect(evens.value).toBeNull() // 4 is not > 5\n })\n\n it('should compose map + debounce', () => {\n const numbers = signal(0)\n const doubled = map(numbers, (n) => n * 2)\n const debounced = debounce(doubled, 100)\n const values: number[] = []\n\n debounced.subscribe((v) => values.push(v))\n\n numbers.set(1)\n numbers.set(2)\n numbers.set(3)\n\n jest.advanceTimersByTime(100)\n expect(values).toEqual([6]) // 3 * 2 = 6\n })\n\n it('should compose fromEvent + map + filter + debounce', () => {\n const button = document.createElement('button')\n const clicks = fromEvent(button, 'click')\n const positions = map(clicks, (e) => (e ? e.clientX : 0))\n const filtered = filter(positions, (x) => x > 50)\n const debounced = debounce(filtered, 200)\n const values: any[] = []\n\n debounced.subscribe((v) => values.push(v))\n\n button.dispatchEvent(new MouseEvent('click', { clientX: 100 }))\n button.dispatchEvent(new MouseEvent('click', { clientX: 30 })) // Filtered\n button.dispatchEvent(new MouseEvent('click', { clientX: 75 }))\n\n jest.advanceTimersByTime(200)\n expect(values).toEqual([75])\n\n cleanup(clicks)\n cleanup(positions)\n cleanup(filtered)\n cleanup(debounced)\n })\n})\n" }, { "path": "src/reactive/__tests__/media-event-bridge.test.ts", "content": "import { bridgeMediaEvents, bridgeMediaEventsWithHandler } from '../media-event-bridge'\nimport { createWaveSurferState } from '../../state/wavesurfer-state'\n\ndescribe('media-event-bridge', () => {\n let media: HTMLMediaElement\n let actions: ReturnType['actions']\n let state: ReturnType['state']\n\n beforeEach(() => {\n media = document.createElement('audio')\n const stateAndActions = createWaveSurferState()\n actions = stateAndActions.actions\n state = stateAndActions.state\n })\n\n describe('bridgeMediaEvents', () => {\n it('should create a bridge and return cleanup function', () => {\n const cleanup = bridgeMediaEvents(media, actions)\n expect(typeof cleanup).toBe('function')\n cleanup()\n })\n\n it('should update playing state on play event', () => {\n const cleanup = bridgeMediaEvents(media, actions)\n\n expect(state.isPlaying.value).toBe(false)\n\n media.dispatchEvent(new Event('play'))\n expect(state.isPlaying.value).toBe(true)\n\n cleanup()\n })\n\n it('should update playing state on pause event', () => {\n const cleanup = bridgeMediaEvents(media, actions)\n\n actions.setPlaying(true)\n expect(state.isPlaying.value).toBe(true)\n\n media.dispatchEvent(new Event('pause'))\n expect(state.isPlaying.value).toBe(false)\n\n cleanup()\n })\n\n it('should update playing state and time on ended event', () => {\n const cleanup = bridgeMediaEvents(media, actions)\n\n // Mock duration\n Object.defineProperty(media, 'duration', {\n value: 100,\n writable: true,\n configurable: true,\n })\n\n actions.setPlaying(true)\n actions.setDuration(100)\n\n media.dispatchEvent(new Event('ended'))\n\n expect(state.isPlaying.value).toBe(false)\n expect(state.currentTime.value).toBe(100)\n\n cleanup()\n })\n\n it('should update current time on timeupdate event', () => {\n const cleanup = bridgeMediaEvents(media, actions)\n\n Object.defineProperty(media, 'currentTime', {\n value: 42,\n writable: true,\n configurable: true,\n })\n\n media.dispatchEvent(new Event('timeupdate'))\n expect(state.currentTime.value).toBe(42)\n\n cleanup()\n })\n\n it('should update duration on durationchange event', () => {\n const cleanup = bridgeMediaEvents(media, actions)\n\n Object.defineProperty(media, 'duration', {\n value: 120,\n writable: true,\n configurable: true,\n })\n\n media.dispatchEvent(new Event('durationchange'))\n expect(state.duration.value).toBe(120)\n\n cleanup()\n })\n\n it('should update duration on loadedmetadata event', () => {\n const cleanup = bridgeMediaEvents(media, actions)\n\n Object.defineProperty(media, 'duration', {\n value: 150,\n writable: true,\n configurable: true,\n })\n\n media.dispatchEvent(new Event('loadedmetadata'))\n expect(state.duration.value).toBe(150)\n\n cleanup()\n })\n\n it('should not update duration if not finite', () => {\n const cleanup = bridgeMediaEvents(media, actions)\n\n Object.defineProperty(media, 'duration', {\n value: Infinity,\n writable: true,\n configurable: true,\n })\n\n media.dispatchEvent(new Event('durationchange'))\n expect(state.duration.value).toBe(0) // Should remain initial value\n\n cleanup()\n })\n\n it('should update seeking state on seeking event', () => {\n const cleanup = bridgeMediaEvents(media, actions)\n\n expect(state.isSeeking.value).toBe(false)\n\n media.dispatchEvent(new Event('seeking'))\n expect(state.isSeeking.value).toBe(true)\n\n cleanup()\n })\n\n it('should update seeking state on seeked event', () => {\n const cleanup = bridgeMediaEvents(media, actions)\n\n actions.setSeeking(true)\n expect(state.isSeeking.value).toBe(true)\n\n media.dispatchEvent(new Event('seeked'))\n expect(state.isSeeking.value).toBe(false)\n\n cleanup()\n })\n\n it('should update volume on volumechange event', () => {\n const cleanup = bridgeMediaEvents(media, actions)\n\n Object.defineProperty(media, 'volume', {\n value: 0.5,\n writable: true,\n configurable: true,\n })\n\n media.dispatchEvent(new Event('volumechange'))\n expect(state.volume.value).toBe(0.5)\n\n cleanup()\n })\n\n it('should update playback rate on ratechange event', () => {\n const cleanup = bridgeMediaEvents(media, actions)\n\n Object.defineProperty(media, 'playbackRate', {\n value: 1.5,\n writable: true,\n configurable: true,\n })\n\n media.dispatchEvent(new Event('ratechange'))\n expect(state.playbackRate.value).toBe(1.5)\n\n cleanup()\n })\n\n it('should cleanup all event listeners', () => {\n const addSpy = jest.spyOn(media, 'addEventListener')\n const removeSpy = jest.spyOn(media, 'removeEventListener')\n\n const cleanup = bridgeMediaEvents(media, actions)\n\n const addCallCount = addSpy.mock.calls.length\n expect(addCallCount).toBeGreaterThan(0)\n\n cleanup()\n\n expect(removeSpy).toHaveBeenCalledTimes(addCallCount)\n\n addSpy.mockRestore()\n removeSpy.mockRestore()\n })\n\n it('should handle multiple events in sequence', () => {\n const cleanup = bridgeMediaEvents(media, actions)\n\n // Mock properties\n Object.defineProperty(media, 'duration', {\n value: 100,\n writable: true,\n configurable: true,\n })\n Object.defineProperty(media, 'currentTime', {\n value: 0,\n writable: true,\n configurable: true,\n })\n\n // Simulate playback sequence\n media.dispatchEvent(new Event('loadedmetadata'))\n expect(state.duration.value).toBe(100)\n\n media.dispatchEvent(new Event('play'))\n expect(state.isPlaying.value).toBe(true)\n\n Object.defineProperty(media, 'currentTime', { value: 50 })\n media.dispatchEvent(new Event('timeupdate'))\n expect(state.currentTime.value).toBe(50)\n\n media.dispatchEvent(new Event('pause'))\n expect(state.isPlaying.value).toBe(false)\n\n cleanup()\n })\n })\n\n describe('bridgeMediaEventsWithHandler', () => {\n it('should call handler for media events', () => {\n const handler = jest.fn()\n const cleanup = bridgeMediaEventsWithHandler(media, handler)\n\n media.dispatchEvent(new Event('play'))\n expect(handler).toHaveBeenCalledWith('play', expect.any(Event))\n\n media.dispatchEvent(new Event('pause'))\n expect(handler).toHaveBeenCalledWith('pause', expect.any(Event))\n\n cleanup()\n })\n\n it('should handle multiple events', () => {\n const events: string[] = []\n const handler = (event: string) => {\n events.push(event)\n }\n\n const cleanup = bridgeMediaEventsWithHandler(media, handler)\n\n media.dispatchEvent(new Event('loadstart'))\n media.dispatchEvent(new Event('loadedmetadata'))\n media.dispatchEvent(new Event('canplay'))\n media.dispatchEvent(new Event('play'))\n\n expect(events).toContain('loadstart')\n expect(events).toContain('loadedmetadata')\n expect(events).toContain('canplay')\n expect(events).toContain('play')\n\n cleanup()\n })\n\n it('should cleanup all listeners', () => {\n const handler = jest.fn()\n const removeSpy = jest.spyOn(media, 'removeEventListener')\n\n const cleanup = bridgeMediaEventsWithHandler(media, handler)\n cleanup()\n\n expect(removeSpy.mock.calls.length).toBeGreaterThan(0)\n\n removeSpy.mockRestore()\n })\n })\n})\n" }, { "path": "src/reactive/__tests__/render-scheduler.test.ts", "content": "import { RenderScheduler } from '../render-scheduler'\n\ndescribe('RenderScheduler', () => {\n let scheduler: RenderScheduler\n let renderFn: jest.Mock\n\n beforeEach(() => {\n scheduler = new RenderScheduler()\n renderFn = jest.fn()\n jest.useFakeTimers()\n })\n\n afterEach(() => {\n scheduler.cancelRender()\n jest.restoreAllMocks()\n jest.useRealTimers()\n })\n\n describe('scheduleRender', () => {\n it('should schedule a render on next frame', () => {\n scheduler.scheduleRender(renderFn)\n expect(renderFn).not.toHaveBeenCalled()\n\n // Advance to next frame\n jest.advanceTimersByTime(16)\n expect(renderFn).toHaveBeenCalledTimes(1)\n })\n\n it('should batch multiple render requests into one', () => {\n scheduler.scheduleRender(renderFn)\n scheduler.scheduleRender(renderFn)\n scheduler.scheduleRender(renderFn)\n\n expect(renderFn).not.toHaveBeenCalled()\n\n jest.advanceTimersByTime(16)\n expect(renderFn).toHaveBeenCalledTimes(1)\n })\n\n it('should allow new render after previous completes', () => {\n scheduler.scheduleRender(renderFn)\n jest.advanceTimersByTime(16)\n expect(renderFn).toHaveBeenCalledTimes(1)\n\n scheduler.scheduleRender(renderFn)\n jest.advanceTimersByTime(16)\n expect(renderFn).toHaveBeenCalledTimes(2)\n })\n\n it('should execute high priority renders immediately', () => {\n scheduler.scheduleRender(renderFn, 'high')\n expect(renderFn).toHaveBeenCalledTimes(1)\n\n // No additional call on next frame\n jest.advanceTimersByTime(16)\n expect(renderFn).toHaveBeenCalledTimes(1)\n })\n\n it('should cancel batched render when high priority render is called', () => {\n const batchedRender = jest.fn()\n const highPriorityRender = jest.fn()\n\n scheduler.scheduleRender(batchedRender, 'normal')\n expect(batchedRender).not.toHaveBeenCalled()\n\n scheduler.scheduleRender(highPriorityRender, 'high')\n expect(highPriorityRender).toHaveBeenCalledTimes(1)\n\n // Batched render should still execute\n jest.advanceTimersByTime(16)\n expect(batchedRender).not.toHaveBeenCalled()\n })\n\n it('should handle low priority same as normal', () => {\n scheduler.scheduleRender(renderFn, 'low')\n expect(renderFn).not.toHaveBeenCalled()\n\n jest.advanceTimersByTime(16)\n expect(renderFn).toHaveBeenCalledTimes(1)\n })\n })\n\n describe('cancelRender', () => {\n it('should cancel pending render', () => {\n scheduler.scheduleRender(renderFn)\n scheduler.cancelRender()\n\n jest.advanceTimersByTime(16)\n expect(renderFn).not.toHaveBeenCalled()\n })\n\n it('should allow scheduling after cancel', () => {\n scheduler.scheduleRender(renderFn)\n scheduler.cancelRender()\n scheduler.scheduleRender(renderFn)\n\n jest.advanceTimersByTime(16)\n expect(renderFn).toHaveBeenCalledTimes(1)\n })\n\n it('should be safe to call multiple times', () => {\n scheduler.scheduleRender(renderFn)\n scheduler.cancelRender()\n scheduler.cancelRender()\n scheduler.cancelRender()\n\n jest.advanceTimersByTime(16)\n expect(renderFn).not.toHaveBeenCalled()\n })\n\n it('should be safe to call when no render is pending', () => {\n expect(() => scheduler.cancelRender()).not.toThrow()\n })\n })\n\n describe('flushRender', () => {\n it('should execute render immediately', () => {\n scheduler.flushRender(renderFn)\n expect(renderFn).toHaveBeenCalledTimes(1)\n })\n\n it('should cancel pending batched render', () => {\n const batchedRender = jest.fn()\n const flushRender = jest.fn()\n\n scheduler.scheduleRender(batchedRender)\n scheduler.flushRender(flushRender)\n\n expect(flushRender).toHaveBeenCalledTimes(1)\n expect(batchedRender).not.toHaveBeenCalled()\n\n jest.advanceTimersByTime(16)\n expect(batchedRender).not.toHaveBeenCalled()\n })\n\n it('should work for testing scenarios', () => {\n let renderCount = 0\n const testRender = () => renderCount++\n\n // Simulate multiple state changes\n scheduler.scheduleRender(testRender)\n scheduler.scheduleRender(testRender)\n scheduler.scheduleRender(testRender)\n\n // Force immediate render for assertion\n scheduler.flushRender(testRender)\n expect(renderCount).toBe(1)\n\n // No additional render on next frame\n jest.advanceTimersByTime(16)\n expect(renderCount).toBe(1)\n })\n })\n\n describe('isPending', () => {\n it('should return false initially', () => {\n expect(scheduler.isPending()).toBe(false)\n })\n\n it('should return true when render is scheduled', () => {\n scheduler.scheduleRender(renderFn)\n expect(scheduler.isPending()).toBe(true)\n })\n\n it('should return false after render executes', () => {\n scheduler.scheduleRender(renderFn)\n jest.advanceTimersByTime(16)\n expect(scheduler.isPending()).toBe(false)\n })\n\n it('should return false after cancel', () => {\n scheduler.scheduleRender(renderFn)\n scheduler.cancelRender()\n expect(scheduler.isPending()).toBe(false)\n })\n\n it('should return false after flush', () => {\n scheduler.scheduleRender(renderFn)\n scheduler.flushRender(renderFn)\n expect(scheduler.isPending()).toBe(false)\n })\n\n it('should return false for high priority renders', () => {\n scheduler.scheduleRender(renderFn, 'high')\n expect(scheduler.isPending()).toBe(false)\n })\n })\n\n describe('real-world scenarios', () => {\n it('should batch rapid state changes', () => {\n let renderCount = 0\n const render = () => renderCount++\n\n // Simulate rapid state changes (e.g., during animation)\n for (let i = 0; i < 100; i++) {\n scheduler.scheduleRender(render)\n }\n\n expect(renderCount).toBe(0)\n\n jest.advanceTimersByTime(16)\n expect(renderCount).toBe(1)\n })\n\n it('should handle mixed priority renders', () => {\n const normalRenders: number[] = []\n const highRenders: number[] = []\n\n scheduler.scheduleRender(() => normalRenders.push(1), 'normal')\n scheduler.scheduleRender(() => highRenders.push(1), 'high')\n scheduler.scheduleRender(() => normalRenders.push(2), 'normal')\n scheduler.scheduleRender(() => highRenders.push(2), 'high')\n\n expect(highRenders).toEqual([1, 2])\n expect(normalRenders).toEqual([])\n\n jest.advanceTimersByTime(16)\n expect(normalRenders).toEqual([])\n })\n\n it('should handle errors in render function', () => {\n const errorRender = () => {\n throw new Error('Render error')\n }\n const successRender = jest.fn()\n\n scheduler.scheduleRender(errorRender)\n\n expect(() => {\n jest.advanceTimersByTime(16)\n }).toThrow('Render error')\n\n // After error, scheduler is no longer pending\n expect(scheduler.isPending()).toBe(false)\n\n // Should be able to schedule after error\n scheduler.scheduleRender(successRender)\n expect(scheduler.isPending()).toBe(true)\n\n jest.advanceTimersByTime(16)\n expect(successRender).toHaveBeenCalledTimes(1)\n })\n\n it('should support cleanup on unmount', () => {\n scheduler.scheduleRender(renderFn)\n expect(scheduler.isPending()).toBe(true)\n\n // Simulate component unmount\n scheduler.cancelRender()\n expect(scheduler.isPending()).toBe(false)\n\n jest.advanceTimersByTime(100)\n expect(renderFn).not.toHaveBeenCalled()\n })\n })\n\n describe('performance', () => {\n it('should handle thousands of schedule calls efficiently', () => {\n const start = performance.now()\n\n for (let i = 0; i < 10000; i++) {\n scheduler.scheduleRender(renderFn)\n }\n\n const duration = performance.now() - start\n expect(duration).toBeLessThan(10) // Should be near-instant\n })\n\n it('should not leak memory with repeated scheduling', () => {\n for (let i = 0; i < 1000; i++) {\n scheduler.scheduleRender(renderFn)\n scheduler.cancelRender()\n }\n\n expect(scheduler.isPending()).toBe(false)\n })\n })\n})\n" }, { "path": "src/reactive/__tests__/scroll-stream.test.ts", "content": "import {\n createScrollStream,\n createScrollStreamWithAction,\n calculateScrollPercentages,\n calculateScrollBounds,\n type ScrollData,\n} from '../scroll-stream'\n\ndescribe('scroll-stream', () => {\n describe('calculateScrollPercentages', () => {\n it('should calculate percentages for basic scroll', () => {\n const data: ScrollData = {\n scrollLeft: 100,\n scrollWidth: 1000,\n clientWidth: 200,\n }\n\n const result = calculateScrollPercentages(data)\n expect(result.startX).toBe(0.1)\n expect(result.endX).toBe(0.3)\n })\n\n it('should handle zero scroll width', () => {\n const data: ScrollData = {\n scrollLeft: 0,\n scrollWidth: 0,\n clientWidth: 200,\n }\n\n const result = calculateScrollPercentages(data)\n expect(result.startX).toBe(0)\n expect(result.endX).toBe(1)\n })\n\n it('should handle scroll at start', () => {\n const data: ScrollData = {\n scrollLeft: 0,\n scrollWidth: 1000,\n clientWidth: 200,\n }\n\n const result = calculateScrollPercentages(data)\n expect(result.startX).toBe(0)\n expect(result.endX).toBe(0.2)\n })\n\n it('should handle scroll at end', () => {\n const data: ScrollData = {\n scrollLeft: 800,\n scrollWidth: 1000,\n clientWidth: 200,\n }\n\n const result = calculateScrollPercentages(data)\n expect(result.startX).toBe(0.8)\n expect(result.endX).toBe(1)\n })\n\n it('should clamp values to 0-1 range', () => {\n const data: ScrollData = {\n scrollLeft: -10,\n scrollWidth: 1000,\n clientWidth: 200,\n }\n\n const result = calculateScrollPercentages(data)\n expect(result.startX).toBeGreaterThanOrEqual(0)\n expect(result.endX).toBeLessThanOrEqual(1)\n })\n })\n\n describe('calculateScrollBounds', () => {\n it('should calculate scroll bounds', () => {\n const data: ScrollData = {\n scrollLeft: 100,\n scrollWidth: 1000,\n clientWidth: 200,\n }\n\n const result = calculateScrollBounds(data)\n expect(result.left).toBe(100)\n expect(result.right).toBe(300)\n })\n\n it('should handle zero scroll', () => {\n const data: ScrollData = {\n scrollLeft: 0,\n scrollWidth: 1000,\n clientWidth: 200,\n }\n\n const result = calculateScrollBounds(data)\n expect(result.left).toBe(0)\n expect(result.right).toBe(200)\n })\n })\n\n describe('createScrollStream', () => {\n let element: HTMLElement\n\n beforeEach(() => {\n element = document.createElement('div')\n document.body.appendChild(element)\n\n // Mock scroll properties\n Object.defineProperties(element, {\n scrollLeft: { value: 100, writable: true, configurable: true },\n scrollWidth: { value: 1000, writable: true, configurable: true },\n clientWidth: { value: 200, writable: true, configurable: true },\n })\n })\n\n afterEach(() => {\n document.body.removeChild(element)\n })\n\n it('should create a scroll stream', () => {\n const stream = createScrollStream(element)\n\n expect(stream.scrollData).toBeDefined()\n expect(stream.percentages).toBeDefined()\n expect(stream.bounds).toBeDefined()\n expect(stream.cleanup).toBeDefined()\n\n stream.cleanup()\n })\n\n it('should initialize with current scroll values', () => {\n const stream = createScrollStream(element)\n\n expect(stream.scrollData.value).toEqual({\n scrollLeft: 100,\n scrollWidth: 1000,\n clientWidth: 200,\n })\n\n stream.cleanup()\n })\n\n it('should compute percentages', () => {\n const stream = createScrollStream(element)\n\n expect(stream.percentages.value.startX).toBe(0.1)\n expect(stream.percentages.value.endX).toBe(0.3)\n\n stream.cleanup()\n })\n\n it('should compute bounds', () => {\n const stream = createScrollStream(element)\n\n expect(stream.bounds.value.left).toBe(100)\n expect(stream.bounds.value.right).toBe(300)\n\n stream.cleanup()\n })\n\n it('should update on scroll event', () => {\n const stream = createScrollStream(element)\n\n // Update scroll position\n Object.defineProperty(element, 'scrollLeft', {\n value: 200,\n writable: true,\n configurable: true,\n })\n\n // Dispatch scroll event\n element.dispatchEvent(new Event('scroll'))\n\n expect(stream.scrollData.value.scrollLeft).toBe(200)\n expect(stream.percentages.value.startX).toBe(0.2)\n expect(stream.percentages.value.endX).toBe(0.4)\n\n stream.cleanup()\n })\n\n it('should cleanup event listeners', () => {\n const stream = createScrollStream(element)\n const addSpy = jest.spyOn(element, 'addEventListener')\n const removeSpy = jest.spyOn(element, 'removeEventListener')\n\n stream.cleanup()\n\n expect(removeSpy).toHaveBeenCalledWith('scroll', expect.any(Function))\n\n addSpy.mockRestore()\n removeSpy.mockRestore()\n })\n })\n\n describe('createScrollStreamWithAction', () => {\n let element: HTMLElement\n\n beforeEach(() => {\n element = document.createElement('div')\n document.body.appendChild(element)\n\n Object.defineProperties(element, {\n scrollLeft: { value: 100, writable: true, configurable: true },\n scrollWidth: { value: 1000, writable: true, configurable: true },\n clientWidth: { value: 200, writable: true, configurable: true },\n })\n })\n\n afterEach(() => {\n document.body.removeChild(element)\n })\n\n it('should call action on scroll', () => {\n const onScrollChange = jest.fn()\n const stream = createScrollStreamWithAction(element, onScrollChange)\n\n // Initial call from effect\n expect(onScrollChange).toHaveBeenCalledWith(100)\n\n // Update scroll\n Object.defineProperty(element, 'scrollLeft', {\n value: 200,\n writable: true,\n configurable: true,\n })\n element.dispatchEvent(new Event('scroll'))\n\n expect(onScrollChange).toHaveBeenCalledWith(200)\n\n stream.cleanup()\n })\n\n it('should cleanup action effect', () => {\n const onScrollChange = jest.fn()\n const stream = createScrollStreamWithAction(element, onScrollChange)\n\n const callCount = onScrollChange.mock.calls.length\n\n stream.cleanup()\n\n // Update scroll after cleanup\n Object.defineProperty(element, 'scrollLeft', {\n value: 300,\n writable: true,\n configurable: true,\n })\n element.dispatchEvent(new Event('scroll'))\n\n // Should not be called again\n expect(onScrollChange).toHaveBeenCalledTimes(callCount)\n })\n })\n})\n" }, { "path": "src/reactive/__tests__/state-event-emitter.test.ts", "content": "import {\n setupStateEventEmission,\n setupSignalEventEmission,\n setupDebouncedEventEmission,\n setupConditionalEventEmission,\n} from '../state-event-emitter'\nimport { createWaveSurferState } from '../../state/wavesurfer-state'\nimport { signal } from '../store'\n\ndescribe('state-event-emitter', () => {\n let emitter: { emit: jest.Mock }\n\n beforeEach(() => {\n emitter = { emit: jest.fn() }\n jest.useFakeTimers()\n })\n\n afterEach(() => {\n jest.useRealTimers()\n })\n\n describe('setupStateEventEmission', () => {\n it('should emit play event when isPlaying becomes true', () => {\n const { state, actions } = createWaveSurferState()\n const cleanup = setupStateEventEmission(state, emitter)\n\n // Initial state triggers pause (isPlaying starts false)\n expect(emitter.emit).toHaveBeenCalledWith('pause')\n\n emitter.emit.mockClear()\n\n actions.setPlaying(true)\n expect(emitter.emit).toHaveBeenCalledWith('play')\n\n cleanup()\n })\n\n it('should emit pause event when isPlaying becomes false', () => {\n const { state, actions } = createWaveSurferState()\n actions.setPlaying(true)\n\n emitter.emit.mockClear()\n\n const cleanup = setupStateEventEmission(state, emitter)\n\n actions.setPlaying(false)\n expect(emitter.emit).toHaveBeenCalledWith('pause')\n\n cleanup()\n })\n\n it('should emit timeupdate when currentTime changes', () => {\n const { state, actions } = createWaveSurferState()\n const cleanup = setupStateEventEmission(state, emitter)\n\n emitter.emit.mockClear()\n\n actions.setCurrentTime(42)\n expect(emitter.emit).toHaveBeenCalledWith('timeupdate', 42)\n\n cleanup()\n })\n\n it('should emit audioprocess when playing and time changes', () => {\n const { state, actions } = createWaveSurferState()\n actions.setPlaying(true)\n\n const cleanup = setupStateEventEmission(state, emitter)\n\n emitter.emit.mockClear()\n\n actions.setCurrentTime(10)\n\n expect(emitter.emit).toHaveBeenCalledWith('timeupdate', 10)\n expect(emitter.emit).toHaveBeenCalledWith('audioprocess', 10)\n\n cleanup()\n })\n\n it('should not emit audioprocess when paused', () => {\n const { state, actions } = createWaveSurferState()\n actions.setPlaying(false)\n\n const cleanup = setupStateEventEmission(state, emitter)\n\n emitter.emit.mockClear()\n\n actions.setCurrentTime(10)\n\n expect(emitter.emit).toHaveBeenCalledWith('timeupdate', 10)\n expect(emitter.emit).not.toHaveBeenCalledWith('audioprocess', expect.anything())\n\n cleanup()\n })\n\n it('should emit seeking event when isSeeking becomes true', () => {\n const { state, actions } = createWaveSurferState()\n actions.setCurrentTime(50)\n\n const cleanup = setupStateEventEmission(state, emitter)\n\n emitter.emit.mockClear()\n\n actions.setSeeking(true)\n expect(emitter.emit).toHaveBeenCalledWith('seeking', 50)\n\n cleanup()\n })\n\n it('should emit ready event when state becomes ready', () => {\n const { state, actions } = createWaveSurferState()\n const cleanup = setupStateEventEmission(state, emitter)\n\n emitter.emit.mockClear()\n\n // Set duration and audio buffer to make state ready\n actions.setDuration(100)\n // Create a mock AudioBuffer since jsdom doesn't support it\n const mockAudioBuffer = {\n duration: 100,\n length: 44100,\n sampleRate: 44100,\n numberOfChannels: 2,\n } as AudioBuffer\n actions.setAudioBuffer(mockAudioBuffer)\n\n expect(emitter.emit).toHaveBeenCalledWith('ready', 100)\n\n cleanup()\n })\n\n it('should only emit ready event once', () => {\n const { state, actions } = createWaveSurferState()\n const cleanup = setupStateEventEmission(state, emitter)\n\n // Make ready\n actions.setDuration(100)\n const mockAudioBuffer = {\n duration: 100,\n length: 44100,\n sampleRate: 44100,\n numberOfChannels: 2,\n } as AudioBuffer\n actions.setAudioBuffer(mockAudioBuffer)\n\n const readyCallCount = emitter.emit.mock.calls.filter((call) => call[0] === 'ready').length\n\n emitter.emit.mockClear()\n\n // Change duration again\n actions.setDuration(150)\n\n // Should not emit ready again\n expect(emitter.emit).not.toHaveBeenCalledWith('ready', expect.anything())\n\n expect(readyCallCount).toBe(1)\n\n cleanup()\n })\n\n it('should emit zoom event when zoom changes', () => {\n const { state, actions } = createWaveSurferState()\n const cleanup = setupStateEventEmission(state, emitter)\n\n emitter.emit.mockClear()\n\n actions.setZoom(2)\n expect(emitter.emit).toHaveBeenCalledWith('zoom', 2)\n\n cleanup()\n })\n\n it('should not emit zoom event for zoom=0', () => {\n const { state, actions } = createWaveSurferState()\n const cleanup = setupStateEventEmission(state, emitter)\n\n emitter.emit.mockClear()\n\n actions.setZoom(0)\n expect(emitter.emit).not.toHaveBeenCalledWith('zoom', 0)\n\n cleanup()\n })\n\n it('should cleanup all subscriptions', () => {\n const { state, actions } = createWaveSurferState()\n const cleanup = setupStateEventEmission(state, emitter)\n\n cleanup()\n\n emitter.emit.mockClear()\n\n // These should not trigger events after cleanup\n actions.setPlaying(true)\n actions.setCurrentTime(42)\n actions.setZoom(2)\n\n expect(emitter.emit).not.toHaveBeenCalled()\n })\n })\n\n describe('setupSignalEventEmission', () => {\n it('should emit custom events from signal changes', () => {\n const volumeSignal = signal(1)\n\n const cleanup = setupSignalEventEmission(volumeSignal, emitter, (vol) => ['volume', vol])\n\n // Initial emission\n expect(emitter.emit).toHaveBeenCalledWith('volume', 1)\n\n emitter.emit.mockClear()\n\n volumeSignal.set(0.5)\n expect(emitter.emit).toHaveBeenCalledWith('volume', 0.5)\n\n cleanup()\n })\n\n it('should cleanup subscription', () => {\n const testSignal = signal(0)\n const cleanup = setupSignalEventEmission(testSignal, emitter, (val) => ['test', val])\n\n cleanup()\n\n emitter.emit.mockClear()\n\n testSignal.set(1)\n expect(emitter.emit).not.toHaveBeenCalled()\n })\n })\n\n describe('setupDebouncedEventEmission', () => {\n it('should debounce event emission', () => {\n const scrollSignal = signal(0)\n\n const cleanup = setupDebouncedEventEmission(scrollSignal, emitter, (pos) => ['scroll', pos], 100)\n\n // Initial emission should be debounced\n emitter.emit.mockClear()\n\n scrollSignal.set(10)\n expect(emitter.emit).not.toHaveBeenCalled()\n\n scrollSignal.set(20)\n expect(emitter.emit).not.toHaveBeenCalled()\n\n scrollSignal.set(30)\n expect(emitter.emit).not.toHaveBeenCalled()\n\n // Fast forward time\n jest.advanceTimersByTime(100)\n\n // Should emit only the last value\n expect(emitter.emit).toHaveBeenCalledTimes(1)\n expect(emitter.emit).toHaveBeenCalledWith('scroll', 30)\n\n cleanup()\n })\n\n it('should restart debounce timer on each change', () => {\n const testSignal = signal(0)\n\n const cleanup = setupDebouncedEventEmission(testSignal, emitter, (val) => ['test', val], 100)\n\n emitter.emit.mockClear()\n\n testSignal.set(1)\n jest.advanceTimersByTime(50)\n\n testSignal.set(2)\n jest.advanceTimersByTime(50)\n\n // Should not have emitted yet (timer restarted)\n expect(emitter.emit).not.toHaveBeenCalled()\n\n jest.advanceTimersByTime(50)\n\n // Now should emit\n expect(emitter.emit).toHaveBeenCalledWith('test', 2)\n\n cleanup()\n })\n\n it('should cleanup pending timeout', () => {\n const testSignal = signal(0)\n\n const cleanup = setupDebouncedEventEmission(testSignal, emitter, (val) => ['test', val], 100)\n\n emitter.emit.mockClear()\n\n testSignal.set(1)\n\n cleanup()\n\n jest.advanceTimersByTime(100)\n\n // Should not emit after cleanup\n expect(emitter.emit).not.toHaveBeenCalled()\n })\n })\n\n describe('setupConditionalEventEmission', () => {\n it('should only emit when condition is true', () => {\n const stateSignal = signal(0)\n\n const cleanup = setupConditionalEventEmission(\n stateSignal,\n emitter,\n (val) => val > 5,\n (val) => ['threshold', val],\n )\n\n emitter.emit.mockClear()\n\n stateSignal.set(3)\n expect(emitter.emit).not.toHaveBeenCalled()\n\n stateSignal.set(7)\n expect(emitter.emit).toHaveBeenCalledWith('threshold', 7)\n\n cleanup()\n })\n\n it('should re-evaluate condition on each change', () => {\n const testSignal = signal(false)\n\n const cleanup = setupConditionalEventEmission(\n testSignal,\n emitter,\n (val) => val === true,\n () => ['activated'],\n )\n\n emitter.emit.mockClear()\n\n testSignal.set(false)\n expect(emitter.emit).not.toHaveBeenCalled()\n\n testSignal.set(true)\n expect(emitter.emit).toHaveBeenCalledWith('activated')\n\n emitter.emit.mockClear()\n\n testSignal.set(false)\n expect(emitter.emit).not.toHaveBeenCalled()\n\n cleanup()\n })\n\n it('should cleanup subscription', () => {\n const testSignal = signal(0)\n\n const cleanup = setupConditionalEventEmission(\n testSignal,\n emitter,\n (val: number) => val > 0,\n (val) => ['test', val],\n )\n\n cleanup()\n\n emitter.emit.mockClear()\n\n testSignal.set(10)\n expect(emitter.emit).not.toHaveBeenCalled()\n })\n })\n})\n" }, { "path": "src/reactive/__tests__/store.test.ts", "content": "import { signal, computed, effect } from '../store'\n\ndescribe('signal', () => {\n it('should create a signal with initial value', () => {\n const count = signal(0)\n expect(count.value).toBe(0)\n })\n\n it('should update value with set()', () => {\n const count = signal(0)\n count.set(5)\n expect(count.value).toBe(5)\n })\n\n it('should update value with update()', () => {\n const count = signal(0)\n count.update((n) => n + 1)\n expect(count.value).toBe(1)\n })\n\n it('should notify subscribers when value changes', () => {\n const count = signal(0)\n const callback = jest.fn()\n\n count.subscribe(callback)\n count.set(5)\n\n expect(callback).toHaveBeenCalledWith(5)\n expect(callback).toHaveBeenCalledTimes(1)\n })\n\n it('should not notify if value does not change', () => {\n const count = signal(0)\n const callback = jest.fn()\n\n count.subscribe(callback)\n count.set(0) // Same value\n\n expect(callback).not.toHaveBeenCalled()\n })\n\n it('should support multiple subscribers', () => {\n const count = signal(0)\n const callback1 = jest.fn()\n const callback2 = jest.fn()\n\n count.subscribe(callback1)\n count.subscribe(callback2)\n count.set(5)\n\n expect(callback1).toHaveBeenCalledWith(5)\n expect(callback2).toHaveBeenCalledWith(5)\n })\n\n it('should unsubscribe correctly', () => {\n const count = signal(0)\n const callback = jest.fn()\n\n const unsubscribe = count.subscribe(callback)\n count.set(1)\n expect(callback).toHaveBeenCalledTimes(1)\n\n unsubscribe()\n count.set(2)\n expect(callback).toHaveBeenCalledTimes(1) // Should not be called again\n })\n\n it('should work with object values', () => {\n const state = signal({ count: 0 })\n const callback = jest.fn()\n\n state.subscribe(callback)\n state.set({ count: 1 })\n\n expect(callback).toHaveBeenCalledWith({ count: 1 })\n })\n\n it('should detect reference equality for objects', () => {\n const obj = { count: 0 }\n const state = signal(obj)\n const callback = jest.fn()\n\n state.subscribe(callback)\n state.set(obj) // Same reference\n\n expect(callback).not.toHaveBeenCalled()\n })\n})\n\ndescribe('computed', () => {\n it('should compute initial value', () => {\n const count = signal(5)\n const doubled = computed(() => count.value * 2, [count])\n\n expect(doubled.value).toBe(10)\n })\n\n it('should recompute when dependency changes', () => {\n const count = signal(5)\n const doubled = computed(() => count.value * 2, [count])\n\n count.set(10)\n expect(doubled.value).toBe(20)\n })\n\n it('should work with multiple dependencies', () => {\n const a = signal(2)\n const b = signal(3)\n const sum = computed(() => a.value + b.value, [a, b])\n\n expect(sum.value).toBe(5)\n\n a.set(5)\n expect(sum.value).toBe(8)\n\n b.set(7)\n expect(sum.value).toBe(12)\n })\n\n it('should notify subscribers when computed value changes', () => {\n const count = signal(5)\n const doubled = computed(() => count.value * 2, [count])\n const callback = jest.fn()\n\n doubled.subscribe(callback)\n count.set(10)\n\n expect(callback).toHaveBeenCalledWith(20)\n })\n\n it('should not notify if computed value does not change', () => {\n const count = signal(5)\n const isPositive = computed(() => count.value > 0, [count])\n const callback = jest.fn()\n\n isPositive.subscribe(callback)\n count.set(10) // Still positive\n\n expect(callback).not.toHaveBeenCalled()\n })\n\n it('should support nested computed values', () => {\n const count = signal(5)\n const doubled = computed(() => count.value * 2, [count])\n const quadrupled = computed(() => doubled.value * 2, [doubled])\n\n expect(quadrupled.value).toBe(20)\n\n count.set(10)\n expect(quadrupled.value).toBe(40)\n })\n\n it('should cleanup subscriptions when computed is unsubscribed', () => {\n const count = signal(5)\n const doubled = computed(() => count.value * 2, [count])\n const callback = jest.fn()\n\n const unsubscribe = doubled.subscribe(callback)\n count.set(10)\n expect(callback).toHaveBeenCalledTimes(1)\n\n unsubscribe()\n count.set(15)\n expect(callback).toHaveBeenCalledTimes(1)\n })\n\n it('should be read-only (no set method)', () => {\n const count = signal(5)\n const doubled = computed(() => count.value * 2, [count])\n\n expect((doubled as any).set).toBeUndefined()\n expect((doubled as any).update).toBeUndefined()\n })\n})\n\ndescribe('effect', () => {\n it('should run immediately', () => {\n const fn = jest.fn()\n const count = signal(0)\n\n effect(fn, [count])\n\n expect(fn).toHaveBeenCalledTimes(1)\n })\n\n it('should run when dependency changes', () => {\n const fn = jest.fn()\n const count = signal(0)\n\n effect(fn, [count])\n expect(fn).toHaveBeenCalledTimes(1)\n\n count.set(1)\n expect(fn).toHaveBeenCalledTimes(2)\n\n count.set(2)\n expect(fn).toHaveBeenCalledTimes(3)\n })\n\n it('should run with multiple dependencies', () => {\n const fn = jest.fn()\n const a = signal(0)\n const b = signal(0)\n\n effect(fn, [a, b])\n expect(fn).toHaveBeenCalledTimes(1)\n\n a.set(1)\n expect(fn).toHaveBeenCalledTimes(2)\n\n b.set(1)\n expect(fn).toHaveBeenCalledTimes(3)\n })\n\n it('should run cleanup before re-running effect', () => {\n const cleanup = jest.fn()\n const fn = jest.fn(() => cleanup)\n const count = signal(0)\n\n effect(fn, [count])\n expect(fn).toHaveBeenCalledTimes(1)\n expect(cleanup).not.toHaveBeenCalled()\n\n count.set(1)\n expect(cleanup).toHaveBeenCalledTimes(1) // Cleanup from first run\n expect(fn).toHaveBeenCalledTimes(2)\n\n count.set(2)\n expect(cleanup).toHaveBeenCalledTimes(2) // Cleanup from second run\n expect(fn).toHaveBeenCalledTimes(3)\n })\n\n it('should run cleanup on unsubscribe', () => {\n const cleanup = jest.fn()\n const fn = jest.fn(() => cleanup)\n const count = signal(0)\n\n const unsubscribe = effect(fn, [count])\n expect(fn).toHaveBeenCalledTimes(1)\n expect(cleanup).not.toHaveBeenCalled()\n\n unsubscribe()\n expect(cleanup).toHaveBeenCalledTimes(1)\n })\n\n it('should stop running after unsubscribe', () => {\n const fn = jest.fn()\n const count = signal(0)\n\n const unsubscribe = effect(fn, [count])\n expect(fn).toHaveBeenCalledTimes(1)\n\n count.set(1)\n expect(fn).toHaveBeenCalledTimes(2)\n\n unsubscribe()\n count.set(2)\n expect(fn).toHaveBeenCalledTimes(2) // Should not increase\n })\n\n it('should work with computed dependencies', () => {\n const fn = jest.fn()\n const count = signal(0)\n const doubled = computed(() => count.value * 2, [count])\n\n effect(fn, [doubled])\n expect(fn).toHaveBeenCalledTimes(1)\n\n count.set(1)\n expect(fn).toHaveBeenCalledTimes(2)\n })\n\n it('should handle effects without cleanup', () => {\n const fn = jest.fn()\n const count = signal(0)\n\n const unsubscribe = effect(fn, [count])\n count.set(1)\n\n expect(() => unsubscribe()).not.toThrow()\n expect(fn).toHaveBeenCalledTimes(2)\n })\n\n it('should handle accessing signal values in effect', () => {\n const values: number[] = []\n const count = signal(0)\n\n effect(() => {\n values.push(count.value)\n }, [count])\n\n count.set(1)\n count.set(2)\n\n expect(values).toEqual([0, 1, 2])\n })\n})\n\ndescribe('integration tests', () => {\n it('should work with signal -> computed -> effect chain', () => {\n const values: number[] = []\n const count = signal(0)\n const doubled = computed(() => count.value * 2, [count])\n\n effect(() => {\n values.push(doubled.value)\n }, [doubled])\n\n count.set(5)\n count.set(10)\n\n expect(values).toEqual([0, 10, 20])\n })\n\n it('should handle complex dependency graphs', () => {\n const a = signal(1)\n const b = signal(2)\n const sum = computed(() => a.value + b.value, [a, b])\n const product = computed(() => a.value * b.value, [a, b])\n const combined = computed(() => sum.value + product.value, [sum, product])\n\n expect(combined.value).toBe(5) // (1+2) + (1*2) = 3 + 2 = 5\n\n a.set(3)\n expect(combined.value).toBe(11) // (3+2) + (3*2) = 5 + 6 = 11\n\n b.set(4)\n expect(combined.value).toBe(19) // (3+4) + (3*4) = 7 + 12 = 19\n })\n\n it('should not create memory leaks with many subscriptions', () => {\n const count = signal(0)\n const unsubscribes: (() => void)[] = []\n\n // Create 1000 subscriptions\n for (let i = 0; i < 1000; i++) {\n unsubscribes.push(count.subscribe(() => {}))\n }\n\n // Unsubscribe all\n unsubscribes.forEach((unsub) => unsub())\n\n // Signal should still work\n count.set(5)\n expect(count.value).toBe(5)\n })\n\n it('should handle rapid updates correctly', () => {\n const count = signal(0)\n const callback = jest.fn()\n\n count.subscribe(callback)\n\n // Rapid updates\n for (let i = 1; i <= 100; i++) {\n count.set(i)\n }\n\n expect(callback).toHaveBeenCalledTimes(100)\n expect(count.value).toBe(100)\n })\n})\n" }, { "path": "src/reactive/drag-stream.ts", "content": "/**\n * Reactive drag stream utilities\n *\n * Provides declarative drag handling using reactive streams.\n * Automatically handles mouseup cleanup and supports constraints.\n */\n\nimport { signal, type Signal } from './store.js'\nimport { cleanup } from './event-streams.js'\n\nexport interface DragEvent {\n type: 'start' | 'move' | 'end'\n x: number\n y: number\n deltaX?: number\n deltaY?: number\n}\n\nexport interface DragStreamOptions {\n /** Minimum distance to move before dragging starts (default: 3) */\n threshold?: number\n /** Mouse button to listen for (default: 0 = left button) */\n mouseButton?: number\n /** Delay before touch drag starts in ms (default: 100) */\n touchDelay?: number\n}\n\n/**\n * Create a reactive drag stream from an element\n *\n * Emits drag events (start, move, end) as the user drags the element.\n * Automatically handles pointer capture, multi-touch prevention, and cleanup.\n *\n * @example\n * ```typescript\n * const dragSignal = createDragStream(element)\n *\n * effect(() => {\n * const drag = dragSignal.value\n * if (drag?.type === 'move') {\n * console.log('Dragging:', drag.deltaX, drag.deltaY)\n * }\n * }, [dragSignal])\n * ```\n *\n * @param element - Element to make draggable\n * @param options - Drag configuration options\n * @returns Signal emitting drag events and cleanup function\n */\nexport function createDragStream(\n element: HTMLElement,\n options: DragStreamOptions = {},\n): { signal: Signal; cleanup: () => void } {\n const { threshold = 3, mouseButton = 0, touchDelay = 100 } = options\n\n const dragSignal = signal(null)\n const activePointers = new Map()\n const isTouchDevice = matchMedia('(pointer: coarse)').matches\n\n let unsubscribeDocument = () => void 0\n\n const onPointerDown = (event: PointerEvent) => {\n if (event.button !== mouseButton) return\n\n activePointers.set(event.pointerId, event)\n if (activePointers.size > 1) {\n return\n }\n\n let startX = event.clientX\n let startY = event.clientY\n let isDragging = false\n const touchStartTime = Date.now()\n\n const rect = element.getBoundingClientRect()\n const { left, top } = rect\n\n const onPointerMove = (event: PointerEvent) => {\n if (event.defaultPrevented || activePointers.size > 1) {\n return\n }\n\n if (isTouchDevice && Date.now() - touchStartTime < touchDelay) return\n\n const x = event.clientX\n const y = event.clientY\n const dx = x - startX\n const dy = y - startY\n\n if (isDragging || Math.abs(dx) > threshold || Math.abs(dy) > threshold) {\n event.preventDefault()\n event.stopPropagation()\n\n if (!isDragging) {\n // Emit start event\n dragSignal.set({\n type: 'start',\n x: startX - left,\n y: startY - top,\n })\n isDragging = true\n }\n\n // Emit move event\n dragSignal.set({\n type: 'move',\n x: x - left,\n y: y - top,\n deltaX: dx,\n deltaY: dy,\n })\n\n startX = x\n startY = y\n }\n }\n\n const onPointerUp = (event: PointerEvent) => {\n activePointers.delete(event.pointerId)\n if (isDragging) {\n const x = event.clientX\n const y = event.clientY\n\n // Emit end event\n dragSignal.set({\n type: 'end',\n x: x - left,\n y: y - top,\n })\n }\n unsubscribeDocument()\n }\n\n const onPointerLeave = (e: PointerEvent) => {\n activePointers.delete(e.pointerId)\n if (!e.relatedTarget || e.relatedTarget === document.documentElement) {\n onPointerUp(e)\n }\n }\n\n const onClick = (event: MouseEvent) => {\n if (isDragging) {\n event.stopPropagation()\n event.preventDefault()\n }\n }\n\n const onTouchMove = (event: TouchEvent) => {\n if (event.defaultPrevented || activePointers.size > 1) {\n return\n }\n if (isDragging) {\n event.preventDefault()\n }\n }\n\n document.addEventListener('pointermove', onPointerMove)\n document.addEventListener('pointerup', onPointerUp)\n document.addEventListener('pointerout', onPointerLeave)\n document.addEventListener('pointercancel', onPointerLeave)\n document.addEventListener('touchmove', onTouchMove, { passive: false })\n document.addEventListener('click', onClick, { capture: true })\n\n unsubscribeDocument = () => {\n document.removeEventListener('pointermove', onPointerMove)\n document.removeEventListener('pointerup', onPointerUp)\n document.removeEventListener('pointerout', onPointerLeave)\n document.removeEventListener('pointercancel', onPointerLeave)\n document.removeEventListener('touchmove', onTouchMove)\n setTimeout(() => {\n document.removeEventListener('click', onClick, { capture: true })\n }, 10)\n }\n }\n\n element.addEventListener('pointerdown', onPointerDown)\n\n const cleanupFn = () => {\n unsubscribeDocument()\n element.removeEventListener('pointerdown', onPointerDown)\n activePointers.clear()\n cleanup(dragSignal)\n }\n\n return {\n signal: dragSignal,\n cleanup: cleanupFn,\n }\n}\n" }, { "path": "src/reactive/event-stream-emitter.ts", "content": "/**\n * Event stream emitter - bridges EventEmitter to reactive streams\n *\n * Provides reactive stream API on top of traditional EventEmitter.\n * This allows users to choose between callback-based and stream-based APIs.\n */\n\nimport { signal, type Signal, type WritableSignal } from './store.js'\nimport type EventEmitter from '../event-emitter.js'\n\n/**\n * Convert an EventEmitter event to a reactive signal/stream\n *\n * Creates a signal that updates whenever the event is emitted.\n * Returns both the signal (for reading values) and cleanup function.\n *\n * @example\n * ```typescript\n * const { stream, cleanup } = toStream(wavesurfer, 'play')\n *\n * // Subscribe to play events\n * stream.subscribe(() => console.log('Playing!'))\n *\n * // Cleanup when done\n * cleanup()\n * ```\n *\n * @param emitter - EventEmitter instance\n * @param eventName - Name of the event to stream\n * @returns Object with stream signal and cleanup function\n */\nexport function toStream, K extends keyof T>(\n emitter: EventEmitter,\n eventName: K,\n): {\n stream: Signal\n cleanup: () => void\n} {\n const stream = signal(null) as WritableSignal\n\n // Listen to event and update signal\n const handler = (...args: T[K]) => {\n stream.set(args)\n }\n\n // @ts-expect-error - EventEmitter on() signature\n const unsubscribe = emitter.on(eventName as string, handler)\n\n return {\n stream,\n cleanup: unsubscribe,\n }\n}\n\n/**\n * Create multiple event streams from an emitter\n *\n * Helper to create streams for multiple events at once.\n *\n * @example\n * ```typescript\n * const streams = toStreams(wavesurfer, ['play', 'pause', 'timeupdate'])\n *\n * streams.play.subscribe(() => console.log('Play'))\n * streams.pause.subscribe(() => console.log('Pause'))\n * streams.timeupdate.subscribe(([time]) => console.log('Time:', time))\n *\n * // Cleanup all\n * streams.cleanup()\n * ```\n *\n * @param emitter - EventEmitter instance\n * @param eventNames - Array of event names to stream\n * @returns Object with streams for each event and cleanup function\n */\nexport function toStreams, K extends keyof T>(\n emitter: EventEmitter,\n eventNames: K[],\n): {\n [P in K]: Signal\n} & {\n cleanup: () => void\n} {\n const cleanups: Array<() => void> = []\n const result: any = {}\n\n for (const eventName of eventNames) {\n const { stream, cleanup } = toStream(emitter, eventName)\n result[eventName] = stream\n cleanups.push(cleanup)\n }\n\n // Add cleanup that removes all event listeners\n result.cleanup = () => {\n cleanups.forEach((cleanup) => cleanup())\n }\n\n return result\n}\n\n/**\n * Create a stream that combines multiple events into one\n *\n * Useful when you want to react to any of several events.\n *\n * @example\n * ```typescript\n * const { stream, cleanup } = mergeStreams(wavesurfer, ['play', 'pause'])\n *\n * stream.subscribe(({ event, args }) => {\n * console.log(`Event ${event} fired with`, args)\n * })\n * ```\n *\n * @param emitter - EventEmitter instance\n * @param eventNames - Array of event names to merge\n * @returns Object with merged stream and cleanup function\n */\nexport function mergeStreams, K extends keyof T>(\n emitter: EventEmitter,\n eventNames: K[],\n): {\n stream: Signal<{ event: K; args: T[K] } | null>\n cleanup: () => void\n} {\n const stream = signal<{ event: K; args: T[K] } | null>(null) as WritableSignal<{\n event: K\n args: T[K]\n } | null>\n const cleanups: Array<() => void> = []\n\n for (const eventName of eventNames) {\n // @ts-expect-error - EventEmitter on() signature\n const unsubscribe = emitter.on(eventName as string, (...args: T[K]) => {\n stream.set({ event: eventName, args })\n })\n cleanups.push(unsubscribe)\n }\n\n return {\n stream,\n cleanup: () => {\n cleanups.forEach((cleanup) => cleanup())\n },\n }\n}\n\n/**\n * Helper to map event stream values\n *\n * @example\n * ```typescript\n * const { stream: timeStream } = toStream(wavesurfer, 'timeupdate')\n * const seconds = mapStream(timeStream, ([time]) => Math.floor(time))\n * ```\n */\nexport function mapStream(source: Signal, mapper: (value: T) => U): Signal {\n const result = signal(mapper(source.value)) as WritableSignal\n\n const unsubscribe = source.subscribe((value) => {\n result.set(mapper(value))\n })\n\n // Store cleanup\n ;(result as any)._cleanup = unsubscribe\n\n return result\n}\n\n/**\n * Helper to filter event stream values\n *\n * @example\n * ```typescript\n * const { stream: timeStream } = toStream(wavesurfer, 'timeupdate')\n * const afterTenSeconds = filterStream(timeStream, ([time]) => time > 10)\n * ```\n */\nexport function filterStream(source: Signal, predicate: (value: T) => boolean): Signal {\n const initialValue = predicate(source.value) ? source.value : null\n const result = signal(initialValue) as WritableSignal\n\n const unsubscribe = source.subscribe((value) => {\n if (predicate(value)) {\n result.set(value)\n } else {\n result.set(null)\n }\n })\n\n // Store cleanup\n ;(result as any)._cleanup = unsubscribe\n\n return result\n}\n" }, { "path": "src/reactive/event-streams.ts", "content": "/**\n * Event stream utilities for converting DOM events to reactive signals\n *\n * These utilities allow composing event handling using reactive primitives.\n */\n\nimport { signal, type Signal, type WritableSignal } from './store.js'\n\n/**\n * Convert DOM events to a reactive signal\n *\n * @example\n * ```typescript\n * const clicks = fromEvent(button, 'click')\n * clicks.subscribe(event => console.log('Clicked!', event))\n * ```\n */\nexport function fromEvent(\n element: HTMLElement,\n eventName: K,\n): WritableSignal {\n const stream = signal(null)\n\n const handler = (event: HTMLElementEventMap[K]) => {\n stream.set(event)\n }\n\n element.addEventListener(eventName, handler)\n\n // Store cleanup function on the signal\n ;(stream as any)._cleanup = () => {\n element.removeEventListener(eventName, handler)\n }\n\n return stream\n}\n\n/**\n * Transform stream values using a mapping function\n *\n * @example\n * ```typescript\n * const clicks = fromEvent(button, 'click')\n * const positions = map(clicks, e => e ? e.clientX : 0)\n * ```\n */\nexport function map(source: Signal, mapper: (value: T) => U): Signal {\n const result = signal(mapper(source.value))\n\n const unsubscribe = source.subscribe((value) => {\n ;(result as WritableSignal).set(mapper(value))\n })\n\n // Store cleanup\n ;(result as any)._cleanup = unsubscribe\n\n return result\n}\n\n/**\n * Filter stream values based on a predicate\n *\n * @example\n * ```typescript\n * const numbers = signal(5)\n * const evenOnly = filter(numbers, n => n % 2 === 0)\n * ```\n */\nexport function filter(source: Signal, predicate: (value: T) => boolean): Signal {\n const initialValue = predicate(source.value) ? source.value : null\n const result = signal(initialValue)\n\n const unsubscribe = source.subscribe((value) => {\n if (predicate(value)) {\n ;(result as WritableSignal).set(value)\n } else {\n ;(result as WritableSignal).set(null)\n }\n })\n\n // Store cleanup\n ;(result as any)._cleanup = unsubscribe\n\n return result\n}\n\n/**\n * Debounce stream updates - wait for quiet period before emitting\n *\n * @example\n * ```typescript\n * const input = fromEvent(textField, 'input')\n * const debounced = debounce(input, 300) // Wait 300ms after last input\n * ```\n */\nexport function debounce(source: Signal, delay: number): Signal {\n const result = signal(source.value)\n let timeout: ReturnType | undefined\n\n const unsubscribe = source.subscribe((value) => {\n clearTimeout(timeout)\n timeout = setTimeout(() => {\n ;(result as WritableSignal).set(value)\n }, delay)\n })\n\n // Store cleanup that clears timeout and unsubscribes\n ;(result as any)._cleanup = () => {\n clearTimeout(timeout)\n unsubscribe()\n }\n\n return result\n}\n\n/**\n * Throttle stream updates - limit update frequency\n *\n * Emits immediately, then waits before allowing next emission.\n * Different from debounce which waits for quiet period.\n *\n * @example\n * ```typescript\n * const scroll = fromEvent(window, 'scroll')\n * const throttled = throttle(scroll, 100) // Max once per 100ms\n * ```\n */\nexport function throttle(source: Signal, delay: number): Signal {\n const result = signal(source.value)\n let lastEmit = 0\n let timeout: ReturnType | undefined\n\n const unsubscribe = source.subscribe((value) => {\n const now = Date.now()\n const timeSinceLastEmit = now - lastEmit\n\n if (timeSinceLastEmit >= delay) {\n // Enough time has passed, emit immediately\n ;(result as WritableSignal).set(value)\n lastEmit = now\n } else {\n // Too soon, schedule for later\n clearTimeout(timeout)\n timeout = setTimeout(() => {\n ;(result as WritableSignal).set(value)\n lastEmit = Date.now()\n }, delay - timeSinceLastEmit)\n }\n })\n\n // Store cleanup\n ;(result as any)._cleanup = () => {\n clearTimeout(timeout)\n unsubscribe()\n }\n\n return result\n}\n\n/**\n * Cleanup a stream created with event stream utilities\n *\n * This removes event listeners and unsubscribes from sources.\n */\nexport function cleanup(stream: Signal): void {\n const cleanupFn = (stream as any)._cleanup\n if (typeof cleanupFn === 'function') {\n cleanupFn()\n }\n}\n" }, { "path": "src/reactive/media-event-bridge.ts", "content": "/**\n * Media event bridge utilities\n *\n * Bridges HTMLMediaElement events to reactive state updates.\n * Provides a clean separation between imperative media API and reactive state.\n */\n\nimport type { WaveSurferActions } from '../state/wavesurfer-state.js'\n\n/**\n * Bridge HTMLMediaElement events to WaveSurfer state actions\n *\n * This function sets up event listeners on a media element that automatically\n * update the reactive state through actions. It handles all standard media events\n * (play, pause, timeupdate, etc.) and keeps state in sync with media.\n *\n * @example\n * ```typescript\n * const { state, actions } = createWaveSurferState()\n * const media = document.createElement('audio')\n *\n * const cleanup = bridgeMediaEvents(media, actions)\n *\n * // Now media events automatically update state\n * media.play() // → actions.setPlaying(true)\n * ```\n *\n * @param media - HTMLMediaElement to listen to\n * @param actions - State actions to call on events\n * @returns Cleanup function that removes all listeners\n */\nexport function bridgeMediaEvents(media: HTMLMediaElement, actions: WaveSurferActions): () => void {\n const listeners: Array<() => void> = []\n\n // Helper to add event listener and track cleanup\n const addListener = (\n event: K,\n handler: (e: HTMLMediaElementEventMap[K]) => void,\n options?: AddEventListenerOptions,\n ) => {\n media.addEventListener(event, handler, options)\n listeners.push(() => media.removeEventListener(event, handler))\n }\n\n // ============================================================================\n // Playback State Events\n // ============================================================================\n\n addListener('play', () => {\n actions.setPlaying(true)\n })\n\n addListener('pause', () => {\n actions.setPlaying(false)\n })\n\n addListener('ended', () => {\n actions.setPlaying(false)\n // Set current time to duration on end\n if (media.duration) {\n actions.setCurrentTime(media.duration)\n }\n })\n\n // ============================================================================\n // Time and Duration Events\n // ============================================================================\n\n addListener('timeupdate', () => {\n actions.setCurrentTime(media.currentTime)\n })\n\n addListener('durationchange', () => {\n if (isFinite(media.duration)) {\n actions.setDuration(media.duration)\n }\n })\n\n addListener('loadedmetadata', () => {\n if (isFinite(media.duration)) {\n actions.setDuration(media.duration)\n }\n })\n\n // ============================================================================\n // Seeking Events\n // ============================================================================\n\n addListener('seeking', () => {\n actions.setSeeking(true)\n })\n\n addListener('seeked', () => {\n actions.setSeeking(false)\n })\n\n // ============================================================================\n // Volume Events\n // ============================================================================\n\n addListener('volumechange', () => {\n actions.setVolume(media.volume)\n })\n\n // ============================================================================\n // Playback Rate Events\n // ============================================================================\n\n addListener('ratechange', () => {\n actions.setPlaybackRate(media.playbackRate)\n })\n\n // Return cleanup function that removes all listeners\n return () => {\n listeners.forEach((cleanup) => cleanup())\n }\n}\n\n/**\n * Bridge HTMLMediaElement events with custom handler\n *\n * Similar to bridgeMediaEvents but allows custom state update logic.\n * Useful when you need more control over how events map to state.\n *\n * @example\n * ```typescript\n * const cleanup = bridgeMediaEventsWithHandler(media, (event, data) => {\n * if (event === 'play') {\n * actions.setPlaying(true)\n * console.log('Started playing')\n * }\n * })\n * ```\n *\n * @param media - HTMLMediaElement to listen to\n * @param handler - Custom handler function\n * @returns Cleanup function that removes all listeners\n */\nexport function bridgeMediaEventsWithHandler(\n media: HTMLMediaElement,\n handler: (event: string, data?: any) => void,\n): () => void {\n const listeners: Array<() => void> = []\n\n const addListener = (event: K) => {\n const listener = (e: HTMLMediaElementEventMap[K]) => {\n handler(event, e)\n }\n media.addEventListener(event, listener)\n listeners.push(() => media.removeEventListener(event, listener))\n }\n\n // Add all standard media events\n const events: Array = [\n 'play',\n 'pause',\n 'ended',\n 'timeupdate',\n 'durationchange',\n 'loadedmetadata',\n 'seeking',\n 'seeked',\n 'volumechange',\n 'ratechange',\n 'waiting',\n 'canplay',\n 'canplaythrough',\n 'loadstart',\n 'progress',\n 'suspend',\n 'abort',\n 'error',\n 'emptied',\n 'stalled',\n 'loadeddata',\n 'playing',\n ]\n\n events.forEach((event) => addListener(event))\n\n return () => {\n listeners.forEach((cleanup) => cleanup())\n }\n}\n" }, { "path": "src/reactive/render-scheduler.ts", "content": "/**\n * RenderScheduler batches multiple render requests into a single frame using requestAnimationFrame.\n * This prevents multiple state changes from triggering redundant renders.\n */\n\nexport type RenderPriority = 'high' | 'normal' | 'low'\n\nexport class RenderScheduler {\n private pendingRender = false\n private rafId: number | null = null\n\n /**\n * Schedule a render to occur on the next animation frame.\n * If a render is already scheduled, this is a no-op.\n *\n * @param renderFn - The function to call to perform the render\n * @param priority - Render priority (high = immediate, normal/low = batched)\n *\n * @example\n * ```typescript\n * const scheduler = new RenderScheduler()\n *\n * // Multiple calls in same frame = single render\n * scheduler.scheduleRender(() => draw())\n * scheduler.scheduleRender(() => draw()) // no-op\n * scheduler.scheduleRender(() => draw()) // no-op\n * ```\n */\n scheduleRender(renderFn: () => void, priority: RenderPriority = 'normal'): void {\n // High priority renders happen immediately\n if (priority === 'high') {\n this.flushRender(renderFn)\n return\n }\n\n // If already scheduled, don't schedule again\n if (this.pendingRender) return\n\n this.pendingRender = true\n this.rafId = requestAnimationFrame(() => {\n try {\n renderFn()\n } finally {\n // Always clean up, even if render throws\n this.pendingRender = false\n this.rafId = null\n }\n })\n }\n\n /**\n * Cancel any pending render request.\n * Useful when unmounting or destroying components.\n */\n cancelRender(): void {\n if (this.rafId !== null) {\n cancelAnimationFrame(this.rafId)\n this.rafId = null\n this.pendingRender = false\n }\n }\n\n /**\n * Force an immediate synchronous render, canceling any pending batched render.\n * Use for high-priority updates like cursor during playback, or for testing.\n *\n * @param renderFn - The function to call to perform the render\n */\n flushRender(renderFn: () => void): void {\n this.cancelRender()\n renderFn()\n }\n\n /**\n * Check if a render is currently scheduled.\n */\n isPending(): boolean {\n return this.pendingRender\n }\n}\n" }, { "path": "src/reactive/scroll-stream.ts", "content": "/**\n * Reactive scroll stream utilities\n *\n * Provides declarative scroll handling using reactive streams.\n * Automatically handles scroll event optimization and cleanup.\n */\n\nimport { signal, computed, effect, type Signal } from './store.js'\nimport { cleanup } from './event-streams.js'\n\nexport interface ScrollData {\n /** Current scroll position in pixels */\n scrollLeft: number\n /** Total scrollable width in pixels */\n scrollWidth: number\n /** Visible viewport width in pixels */\n clientWidth: number\n}\n\nexport interface ScrollPercentages {\n /** Start position as percentage (0-1) */\n startX: number\n /** End position as percentage (0-1) */\n endX: number\n}\n\n// ============================================================================\n// Pure Scroll Calculation Functions\n// ============================================================================\n\n/**\n * Calculate visible percentages from scroll data\n * Pure function - no side effects\n *\n * @param scrollData - Current scroll dimensions\n * @returns Start and end positions as percentages (0-1)\n */\nexport function calculateScrollPercentages(scrollData: ScrollData): ScrollPercentages {\n const { scrollLeft, scrollWidth, clientWidth } = scrollData\n\n if (scrollWidth === 0) {\n return { startX: 0, endX: 1 }\n }\n\n const startX = scrollLeft / scrollWidth\n const endX = (scrollLeft + clientWidth) / scrollWidth\n\n return {\n startX: Math.max(0, Math.min(1, startX)),\n endX: Math.max(0, Math.min(1, endX)),\n }\n}\n\n/**\n * Calculate scroll bounds in pixels\n * Pure function - no side effects\n *\n * @param scrollData - Current scroll dimensions\n * @returns Left and right scroll bounds in pixels\n */\nexport function calculateScrollBounds(scrollData: ScrollData): { left: number; right: number } {\n return {\n left: scrollData.scrollLeft,\n right: scrollData.scrollLeft + scrollData.clientWidth,\n }\n}\n\n// ============================================================================\n// Reactive Scroll Stream\n// ============================================================================\n\nexport interface ScrollStream {\n /** Signal containing current scroll data */\n scrollData: Signal\n /** Computed signal with visible percentages */\n percentages: Signal\n /** Computed signal with scroll bounds */\n bounds: Signal<{ left: number; right: number }>\n /** Cleanup function to remove listeners */\n cleanup: () => void\n}\n\n/**\n * Create a reactive scroll stream from an element\n *\n * Emits scroll data as the user scrolls the element.\n * Automatically computes derived values (percentages, bounds).\n *\n * @example\n * ```typescript\n * const scrollStream = createScrollStream(container)\n *\n * effect(() => {\n * const { startX, endX } = scrollStream.percentages.value\n * console.log('Visible:', startX, 'to', endX)\n * }, [scrollStream.percentages])\n *\n * scrollStream.cleanup()\n * ```\n *\n * @param element - Scrollable element\n * @returns Scroll stream with signals and cleanup\n */\nexport function createScrollStream(element: HTMLElement): ScrollStream {\n // Create signals\n const scrollData = signal({\n scrollLeft: element.scrollLeft,\n scrollWidth: element.scrollWidth,\n clientWidth: element.clientWidth,\n })\n\n // Computed derived values\n const percentages = computed(() => {\n return calculateScrollPercentages(scrollData.value)\n }, [scrollData])\n\n const bounds = computed(() => {\n return calculateScrollBounds(scrollData.value)\n }, [scrollData])\n\n // Update scroll data on scroll event\n const onScroll = () => {\n scrollData.set({\n scrollLeft: element.scrollLeft,\n scrollWidth: element.scrollWidth,\n clientWidth: element.clientWidth,\n })\n }\n\n // Attach scroll listener\n element.addEventListener('scroll', onScroll, { passive: true })\n\n // Cleanup function\n const cleanupFn = () => {\n element.removeEventListener('scroll', onScroll)\n cleanup(scrollData)\n }\n\n return {\n scrollData,\n percentages,\n bounds,\n cleanup: cleanupFn,\n }\n}\n\n/**\n * Create a scroll stream that automatically updates external state\n *\n * This is a convenience wrapper that connects scroll events to a state action.\n *\n * @example\n * ```typescript\n * const scrollStream = createScrollStreamWithAction(\n * container,\n * (scrollLeft) => actions.setScrollPosition(scrollLeft)\n * )\n * ```\n *\n * @param element - Scrollable element\n * @param onScrollChange - Action to call when scroll changes\n * @returns Scroll stream with signals and cleanup\n */\nexport function createScrollStreamWithAction(\n element: HTMLElement,\n onScrollChange: (scrollLeft: number) => void,\n): ScrollStream {\n const stream = createScrollStream(element)\n\n // Effect to update external state\n const unsubscribe = effect(() => {\n onScrollChange(stream.scrollData.value.scrollLeft)\n }, [stream.scrollData])\n\n // Wrap cleanup to include effect cleanup\n const originalCleanup = stream.cleanup\n stream.cleanup = () => {\n unsubscribe()\n originalCleanup()\n }\n\n return stream\n}\n" }, { "path": "src/reactive/state-event-emitter.ts", "content": "/**\n * State-driven event emission utilities\n *\n * Automatically emit events when reactive state changes.\n * Ensures events are always in sync with state and removes manual emit() calls.\n */\n\nimport { effect, type Signal } from './store.js'\nimport type { WaveSurferState } from '../state/wavesurfer-state.js'\n\nexport type EventEmitter = {\n emit(event: string, ...args: any[]): void\n}\n\n/**\n * Setup automatic event emission from state changes\n *\n * This function subscribes to all relevant state signals and automatically\n * emits corresponding events when state changes. This ensures:\n * - Events are always in sync with state\n * - No manual emit() calls needed\n * - Can't forget to emit an event\n * - Clear event sources (state changes)\n *\n * @example\n * ```typescript\n * const { state } = createWaveSurferState()\n * const wavesurfer = new WaveSurfer()\n *\n * const cleanup = setupStateEventEmission(state, wavesurfer)\n *\n * // Now state changes automatically emit events\n * state.isPlaying.set(true) // → wavesurfer.emit('play')\n * ```\n *\n * @param state - Reactive state to observe\n * @param emitter - Event emitter to emit events on\n * @returns Cleanup function that removes all subscriptions\n */\nexport function setupStateEventEmission(state: WaveSurferState, emitter: EventEmitter): () => void {\n const cleanups: Array<() => void> = []\n\n // ============================================================================\n // Play/Pause Events\n // ============================================================================\n\n // Emit play/pause events when playing state changes\n cleanups.push(\n effect(() => {\n const isPlaying = state.isPlaying.value\n emitter.emit(isPlaying ? 'play' : 'pause')\n }, [state.isPlaying]),\n )\n\n // ============================================================================\n // Time Update Events\n // ============================================================================\n\n // Emit timeupdate when current time changes\n cleanups.push(\n effect(() => {\n const currentTime = state.currentTime.value\n emitter.emit('timeupdate', currentTime)\n\n // Also emit audioprocess when playing\n if (state.isPlaying.value) {\n emitter.emit('audioprocess', currentTime)\n }\n }, [state.currentTime, state.isPlaying]),\n )\n\n // ============================================================================\n // Seeking Events\n // ============================================================================\n\n // Emit seeking event when seeking state changes to true\n cleanups.push(\n effect(() => {\n const isSeeking = state.isSeeking.value\n if (isSeeking) {\n emitter.emit('seeking', state.currentTime.value)\n }\n }, [state.isSeeking, state.currentTime]),\n )\n\n // ============================================================================\n // Ready Event\n // ============================================================================\n\n // Emit ready when state becomes ready\n let wasReady = false\n cleanups.push(\n effect(() => {\n const isReady = state.isReady.value\n if (isReady && !wasReady) {\n wasReady = true\n emitter.emit('ready', state.duration.value)\n }\n }, [state.isReady, state.duration]),\n )\n\n // ============================================================================\n // Finish Event\n // ============================================================================\n\n // Emit finish when playback ends (reached duration and stopped)\n let wasPlayingAtEnd = false\n cleanups.push(\n effect(() => {\n const isPlaying = state.isPlaying.value\n const currentTime = state.currentTime.value\n const duration = state.duration.value\n\n // Check if we're at the end\n const isAtEnd = duration > 0 && currentTime >= duration\n\n // Emit finish when we were playing at end and now stopped\n if (wasPlayingAtEnd && !isPlaying && isAtEnd) {\n emitter.emit('finish')\n }\n\n // Track if we're playing at the end\n wasPlayingAtEnd = isPlaying && isAtEnd\n }, [state.isPlaying, state.currentTime, state.duration]),\n )\n\n // ============================================================================\n // Zoom Events\n // ============================================================================\n\n // Emit zoom when zoom level changes\n cleanups.push(\n effect(() => {\n const zoom = state.zoom.value\n if (zoom > 0) {\n emitter.emit('zoom', zoom)\n }\n }, [state.zoom]),\n )\n\n // Return cleanup function\n return () => {\n cleanups.forEach((cleanup) => cleanup())\n }\n}\n\n/**\n * Setup custom event emission from signal changes\n *\n * This is a lower-level utility for setting up custom event emission\n * from any signal. Useful when you need more control over event emission logic.\n *\n * @example\n * ```typescript\n * const volumeSignal = signal(1)\n *\n * const cleanup = setupSignalEventEmission(\n * volumeSignal,\n * emitter,\n * (volume) => ['volume', volume]\n * )\n * ```\n *\n * @param signal - Signal to observe\n * @param emitter - Event emitter\n * @param getEventData - Function that returns [eventName, ...args]\n * @returns Cleanup function\n */\nexport function setupSignalEventEmission(\n signal: Signal,\n emitter: EventEmitter,\n getEventData: (value: T) => [string, ...any[]],\n): () => void {\n return effect(() => {\n const value = signal.value\n const [eventName, ...args] = getEventData(value)\n emitter.emit(eventName, ...args)\n }, [signal])\n}\n\n/**\n * Setup event emission with debouncing\n *\n * Useful for high-frequency events like scroll or timeupdate.\n *\n * @example\n * ```typescript\n * const cleanup = setupDebouncedEventEmission(\n * state.scrollPosition,\n * emitter,\n * (pos) => ['scroll', pos],\n * 100 // debounce 100ms\n * )\n * ```\n *\n * @param signal - Signal to observe\n * @param emitter - Event emitter\n * @param getEventData - Function that returns [eventName, ...args]\n * @param debounceMs - Debounce delay in milliseconds\n * @returns Cleanup function\n */\nexport function setupDebouncedEventEmission(\n signal: Signal,\n emitter: EventEmitter,\n getEventData: (value: T) => [string, ...any[]],\n debounceMs: number,\n): () => void {\n let timeoutId: ReturnType | null = null\n\n const cleanup = effect(() => {\n const value = signal.value\n\n // Clear previous timeout\n if (timeoutId !== null) {\n clearTimeout(timeoutId)\n }\n\n // Set new timeout\n timeoutId = setTimeout(() => {\n const [eventName, ...args] = getEventData(value)\n emitter.emit(eventName, ...args)\n timeoutId = null\n }, debounceMs)\n }, [signal])\n\n // Return cleanup that also clears pending timeout\n return () => {\n if (timeoutId !== null) {\n clearTimeout(timeoutId)\n }\n cleanup()\n }\n}\n\n/**\n * Setup conditional event emission\n *\n * Only emit events when a condition is met.\n *\n * @example\n * ```typescript\n * // Only emit finish event when playing stops at end\n * const cleanup = setupConditionalEventEmission(\n * state.isPlaying,\n * emitter,\n * (isPlaying) => !isPlaying && state.currentTime.value >= state.duration.value,\n * () => ['finish']\n * )\n * ```\n *\n * @param signal - Signal to observe\n * @param emitter - Event emitter\n * @param condition - Function that returns true when event should emit\n * @param getEventData - Function that returns [eventName, ...args]\n * @returns Cleanup function\n */\nexport function setupConditionalEventEmission(\n signal: Signal,\n emitter: EventEmitter,\n condition: (value: T) => boolean,\n getEventData: (value: T) => [string, ...any[]],\n): () => void {\n return effect(() => {\n const value = signal.value\n if (condition(value)) {\n const [eventName, ...args] = getEventData(value)\n emitter.emit(eventName, ...args)\n }\n }, [signal])\n}\n" }, { "path": "src/reactive/store.ts", "content": "/**\n * Reactive primitives for managing state in WaveSurfer\n *\n * This module provides signal-based reactivity similar to SolidJS signals.\n * Signals are reactive values that notify subscribers when they change.\n */\n\n/**\n * A reactive value that can be read and subscribed to\n */\nexport interface Signal {\n /** Get the current value */\n get value(): T\n /** Subscribe to changes. Returns an unsubscribe function. */\n subscribe(callback: (value: T) => void): () => void\n}\n\n/**\n * A writable reactive value that can be updated\n */\nexport interface WritableSignal extends Signal {\n /** Set a new value. Only notifies if value changed. */\n set(value: T): void\n /** Update value using a function. */\n update(fn: (current: T) => T): void\n}\n\n/**\n * Create a reactive signal that notifies subscribers when its value changes\n *\n * @example\n * ```typescript\n * const count = signal(0)\n * count.subscribe(val => console.log('Count:', val))\n * count.set(5) // Logs: Count: 5\n * ```\n */\nexport function signal(initialValue: T): WritableSignal {\n let _value = initialValue\n const subscribers = new Set<(value: T) => void>()\n\n return {\n get value() {\n return _value\n },\n\n set(newValue: T) {\n // Only update and notify if value actually changed\n if (!Object.is(_value, newValue)) {\n _value = newValue\n subscribers.forEach((fn) => fn(_value))\n }\n },\n\n update(fn: (current: T) => T) {\n this.set(fn(_value))\n },\n\n subscribe(callback: (value: T) => void): () => void {\n subscribers.add(callback)\n return () => subscribers.delete(callback)\n },\n }\n}\n\n/**\n * Create a computed value that automatically updates when its dependencies change\n *\n * @example\n * ```typescript\n * const count = signal(0)\n * const doubled = computed(() => count.value * 2, [count])\n * console.log(doubled.value) // 0\n * count.set(5)\n * console.log(doubled.value) // 10\n * ```\n */\nexport function computed(fn: () => T, dependencies: Signal[]): Signal {\n const result = signal(fn())\n\n // Subscribe to all dependencies immediately\n // This ensures the computed value stays in sync even if no one is subscribed to it\n dependencies.forEach((dep) =>\n dep.subscribe(() => {\n const newValue = fn()\n // Update the result signal, which will notify our subscribers if value changed\n if (!Object.is(result.value, newValue)) {\n ;(result as WritableSignal).set(newValue)\n }\n }),\n )\n\n // Return a read-only signal that proxies the result\n return {\n get value() {\n return result.value\n },\n\n subscribe(callback: (value: T) => void): () => void {\n // Just subscribe to result changes\n return result.subscribe(callback)\n },\n }\n}\n\n/**\n * Run a side effect automatically when dependencies change\n *\n * @param fn - Effect function. Can return a cleanup function.\n * @param dependencies - Signals that trigger the effect when they change\n * @returns Unsubscribe function that stops the effect and runs cleanup\n *\n * @example\n * ```typescript\n * const count = signal(0)\n * effect(() => {\n * console.log('Count is:', count.value)\n * return () => console.log('Cleanup')\n * }, [count])\n * count.set(5) // Logs: Cleanup, Count is: 5\n * ```\n */\nexport function effect(fn: () => void | (() => void), dependencies: Signal[]): () => void {\n let cleanup: (() => void) | void\n\n const run = () => {\n // Run cleanup from previous execution\n if (cleanup) {\n cleanup()\n cleanup = undefined\n }\n // Run effect and capture new cleanup\n cleanup = fn()\n }\n\n // Subscribe to all dependencies\n const unsubscribes = dependencies.map((dep) => dep.subscribe(run))\n\n // Run effect immediately\n run()\n\n // Return function that unsubscribes and runs cleanup\n return () => {\n if (cleanup) {\n cleanup()\n cleanup = undefined\n }\n unsubscribes.forEach((unsub) => unsub())\n }\n}\n" }, { "path": "src/renderer-utils.ts", "content": "import type { WaveSurferOptions } from './wavesurfer.js'\n\nexport type ChannelData = Array\n\nexport type BarSegment = {\n x: number\n y: number\n width: number\n height: number\n}\n\nexport type LinePath = Array<{ x: number; y: number }>\n\nexport const DEFAULT_HEIGHT = 128\n\nexport const MAX_CANVAS_WIDTH = 8000\n\nexport const MAX_NODES = 10\n\nexport function clampToUnit(value: number): number {\n if (value < 0) return 0\n if (value > 1) return 1\n return value\n}\n\nexport function calculateBarRenderConfig({\n width,\n height,\n length,\n options,\n pixelRatio,\n}: {\n width: number\n height: number\n length: number\n options: WaveSurferOptions\n pixelRatio: number\n}) {\n const halfHeight = height / 2\n const barWidth = options.barWidth ? options.barWidth * pixelRatio : 1\n const barGap = options.barGap ? options.barGap * pixelRatio : options.barWidth ? barWidth / 2 : 0\n const barRadius = options.barRadius || 0\n const barMinHeight = options.barMinHeight ? options.barMinHeight * pixelRatio : 0\n const spacing = barWidth + barGap || 1\n const barIndexScale = length > 0 ? width / spacing / length : 0\n\n return {\n halfHeight,\n barWidth,\n barGap,\n barRadius,\n barMinHeight,\n barIndexScale,\n barSpacing: spacing,\n }\n}\n\nexport function calculateBarHeights({\n maxTop,\n maxBottom,\n halfHeight,\n vScale,\n barMinHeight = 0,\n barAlign,\n}: {\n maxTop: number\n maxBottom: number\n halfHeight: number\n vScale: number\n barMinHeight?: number\n barAlign?: WaveSurferOptions['barAlign']\n}): { topHeight: number; totalHeight: number } {\n let topHeight = Math.round(maxTop * halfHeight * vScale)\n const bottomHeight = Math.round(maxBottom * halfHeight * vScale)\n let totalHeight = topHeight + bottomHeight || 1\n\n if (totalHeight < barMinHeight) {\n totalHeight = barMinHeight\n if (!barAlign) {\n topHeight = totalHeight / 2\n }\n }\n\n return { topHeight, totalHeight }\n}\n\nexport function resolveBarYPosition({\n barAlign,\n halfHeight,\n topHeight,\n totalHeight,\n canvasHeight,\n}: {\n barAlign: WaveSurferOptions['barAlign']\n halfHeight: number\n topHeight: number\n totalHeight: number\n canvasHeight: number\n}): number {\n if (barAlign === 'top') return 0\n if (barAlign === 'bottom') return canvasHeight - totalHeight\n return halfHeight - topHeight\n}\n\nexport function calculateBarSegments({\n channelData,\n barIndexScale,\n barSpacing,\n barWidth,\n halfHeight,\n vScale,\n canvasHeight,\n barAlign,\n barMinHeight,\n}: {\n channelData: ChannelData\n barIndexScale: number\n barSpacing: number\n barWidth: number\n halfHeight: number\n vScale: number\n canvasHeight: number\n barAlign: WaveSurferOptions['barAlign']\n barMinHeight: number\n}): BarSegment[] {\n const topChannel = channelData[0] || []\n const bottomChannel = channelData[1] || topChannel\n const length = topChannel.length\n\n const segments: BarSegment[] = []\n\n let prevX = 0\n let maxTop = 0\n let maxBottom = 0\n\n for (let i = 0; i <= length; i++) {\n const x = Math.round(i * barIndexScale)\n\n if (x > prevX) {\n const { topHeight, totalHeight } = calculateBarHeights({\n maxTop,\n maxBottom,\n halfHeight,\n vScale,\n barMinHeight,\n barAlign,\n })\n\n const y = resolveBarYPosition({\n barAlign,\n halfHeight,\n topHeight,\n totalHeight,\n canvasHeight,\n })\n\n segments.push({\n x: prevX * barSpacing,\n y,\n width: barWidth,\n height: totalHeight,\n })\n\n prevX = x\n maxTop = 0\n maxBottom = 0\n }\n\n const magnitudeTop = Math.abs(topChannel[i] || 0)\n const magnitudeBottom = Math.abs(bottomChannel[i] || 0)\n if (magnitudeTop > maxTop) maxTop = magnitudeTop\n if (magnitudeBottom > maxBottom) maxBottom = magnitudeBottom\n }\n\n return segments\n}\n\nexport function getRelativePointerPosition(rect: DOMRect, clientX: number, clientY: number): [number, number] {\n const x = clientX - rect.left\n const y = clientY - rect.top\n const relativeX = x / rect.width\n const relativeY = y / rect.height\n return [relativeX, relativeY]\n}\n\nexport function resolveChannelHeight({\n optionsHeight,\n optionsSplitChannels,\n parentHeight,\n numberOfChannels,\n defaultHeight = DEFAULT_HEIGHT,\n}: {\n optionsHeight?: WaveSurferOptions['height']\n optionsSplitChannels?: WaveSurferOptions['splitChannels']\n parentHeight: number\n numberOfChannels: number\n defaultHeight?: number\n}): number {\n if (optionsHeight == null) return defaultHeight\n const numericHeight = Number(optionsHeight)\n if (!isNaN(numericHeight)) return numericHeight\n if (optionsHeight === 'auto') {\n const height = parentHeight || defaultHeight\n if (optionsSplitChannels?.every((channel) => !channel.overlay)) {\n return height / numberOfChannels\n }\n return height\n }\n return defaultHeight\n}\n\nexport function getPixelRatio(devicePixelRatio?: number): number {\n return Math.max(1, devicePixelRatio || 1)\n}\n\nexport function shouldRenderBars(options: WaveSurferOptions): boolean {\n return Boolean(options.barWidth || options.barGap || options.barAlign)\n}\n\nexport function resolveColorValue(\n color: WaveSurferOptions['waveColor'],\n devicePixelRatio: number,\n canvasHeight?: number,\n): string | CanvasGradient {\n if (!Array.isArray(color)) return color || ''\n if (color.length === 0) return '#999'\n if (color.length < 2) return color[0] || ''\n\n const canvasElement = document.createElement('canvas')\n const ctx = canvasElement.getContext('2d') as CanvasRenderingContext2D\n const gradientHeight = canvasHeight ?? canvasElement.height * devicePixelRatio\n const gradient = ctx.createLinearGradient(0, 0, 0, gradientHeight || devicePixelRatio)\n\n const colorStopPercentage = 1 / (color.length - 1)\n color.forEach((value, index) => {\n gradient.addColorStop(index * colorStopPercentage, value)\n })\n\n return gradient\n}\n\nexport function calculateWaveformLayout({\n duration,\n minPxPerSec = 0,\n parentWidth,\n fillParent,\n pixelRatio,\n}: {\n duration: number\n minPxPerSec?: number\n parentWidth: number\n fillParent?: boolean\n pixelRatio: number\n}) {\n const scrollWidth = Math.ceil(duration * minPxPerSec)\n const isScrollable = scrollWidth > parentWidth\n const useParentWidth = Boolean(fillParent && !isScrollable)\n const width = (useParentWidth ? parentWidth : scrollWidth) * pixelRatio\n\n return {\n scrollWidth,\n isScrollable,\n useParentWidth,\n width,\n }\n}\n\nexport function clampWidthToBarGrid(width: number, options: WaveSurferOptions): number {\n if (!shouldRenderBars(options)) return width\n const barWidth = options.barWidth || 0.5\n const barGap = options.barGap || barWidth / 2\n const totalBarWidth = barWidth + barGap\n if (totalBarWidth === 0) return width\n return Math.floor(width / totalBarWidth) * totalBarWidth\n}\n\nexport function calculateSingleCanvasWidth({\n clientWidth,\n totalWidth,\n options,\n}: {\n clientWidth: number\n totalWidth: number\n options: WaveSurferOptions\n}): number {\n const baseWidth = Math.min(MAX_CANVAS_WIDTH, clientWidth, totalWidth)\n return clampWidthToBarGrid(baseWidth, options)\n}\n\nexport function sliceChannelData({\n channelData,\n offset,\n clampedWidth,\n totalWidth,\n}: {\n channelData: ChannelData\n offset: number\n clampedWidth: number\n totalWidth: number\n}): ChannelData {\n return channelData.map((channel) => {\n const start = Math.floor((offset / totalWidth) * channel.length)\n const end = Math.floor(((offset + clampedWidth) / totalWidth) * channel.length)\n return channel.slice(start, end)\n })\n}\n\nexport function shouldClearCanvases(currentNodeCount: number): boolean {\n return currentNodeCount > MAX_NODES\n}\n\nexport function getLazyRenderRange({\n scrollLeft,\n totalWidth,\n numCanvases,\n}: {\n scrollLeft: number\n totalWidth: number\n numCanvases: number\n}): number[] {\n if (totalWidth === 0) return [0]\n const viewPosition = scrollLeft / totalWidth\n const startCanvas = Math.floor(viewPosition * numCanvases)\n return [startCanvas - 1, startCanvas, startCanvas + 1]\n}\n\nexport function calculateVerticalScale({\n channelData,\n barHeight,\n normalize,\n maxPeak,\n}: {\n channelData: ChannelData\n barHeight?: WaveSurferOptions['barHeight']\n normalize?: WaveSurferOptions['normalize']\n maxPeak?: WaveSurferOptions['maxPeak']\n}): number {\n const baseScale = barHeight || 1\n if (!normalize) return baseScale\n\n const firstChannel = channelData[0]\n if (!firstChannel || firstChannel.length === 0) return baseScale\n\n // Use fixed max peak if provided, otherwise calculate from data\n let max = maxPeak ?? 0\n if (!maxPeak) {\n for (let i = 0; i < firstChannel.length; i++) {\n const value = firstChannel[i] ?? 0\n const magnitude = Math.abs(value)\n if (magnitude > max) max = magnitude\n }\n }\n\n if (!max) return baseScale\n return baseScale / max\n}\n\nexport function calculateLinePaths({\n channelData,\n width,\n height,\n vScale,\n}: {\n channelData: ChannelData\n width: number\n height: number\n vScale: number\n}): LinePath[] {\n const halfHeight = height / 2\n const primaryChannel = channelData[0] || []\n const secondaryChannel = channelData[1] || primaryChannel\n const channels = [primaryChannel, secondaryChannel]\n\n return channels.map((channel, index) => {\n const length = channel.length\n const hScale = length ? width / length : 0\n const baseY = halfHeight\n const direction = index === 0 ? -1 : 1\n\n const path: LinePath = [{ x: 0, y: baseY }]\n let prevX = 0\n let max = 0\n\n for (let i = 0; i <= length; i++) {\n const x = Math.round(i * hScale)\n\n if (x > prevX) {\n const heightDelta = Math.round(max * halfHeight * vScale) || 1\n const y = baseY + heightDelta * direction\n path.push({ x: prevX, y })\n prevX = x\n max = 0\n }\n\n const value = Math.abs(channel[i] || 0)\n if (value > max) max = value\n }\n\n path.push({ x: prevX, y: baseY })\n\n return path\n })\n}\n\n/**\n * @deprecated Use calculateScrollPercentages from './reactive/scroll-stream.js' instead.\n * This function is maintained for backward compatibility but will be removed in a future version.\n */\nexport function calculateScrollPercentages({\n scrollLeft,\n clientWidth,\n scrollWidth,\n}: {\n scrollLeft: number\n clientWidth: number\n scrollWidth: number\n}): { startX: number; endX: number } {\n if (scrollWidth === 0) {\n return { startX: 0, endX: 1 }\n }\n\n const startX = scrollLeft / scrollWidth\n const endX = (scrollLeft + clientWidth) / scrollWidth\n\n return {\n startX: Math.max(0, Math.min(1, startX)),\n endX: Math.max(0, Math.min(1, endX)),\n }\n}\n\nexport function roundToHalfAwayFromZero(value: number): number {\n const scaled = value * 2\n const rounded = scaled < 0 ? Math.floor(scaled) : Math.ceil(scaled)\n return rounded / 2\n}\n" }, { "path": "src/renderer.ts", "content": "import EventEmitter from './event-emitter.js'\nimport * as utils from './renderer-utils.js'\nimport type { WaveSurferOptions } from './wavesurfer.js'\nimport { createDragStream } from './reactive/drag-stream.js'\nimport { createScrollStream } from './reactive/scroll-stream.js'\nimport { effect } from './reactive/store.js'\n\ntype ChannelData = utils.ChannelData\n\ntype RendererEvents = {\n click: [relativeX: number, relativeY: number]\n dblclick: [relativeX: number, relativeY: number]\n drag: [relativeX: number]\n dragstart: [relativeX: number]\n dragend: [relativeX: number]\n scroll: [relativeStart: number, relativeEnd: number, scrollLeft: number, scrollRight: number]\n render: []\n rendered: []\n resize: []\n}\n\nconst SMOOTH_SCROLL_FPS = 60\nconst SMOOTH_SCROLL_MAX_DELTA = 10\nconst LOW_ZOOM_PIXELS_PER_SECOND_THRESHOLD = SMOOTH_SCROLL_MAX_DELTA * SMOOTH_SCROLL_FPS\n\nclass Renderer extends EventEmitter {\n private options: WaveSurferOptions\n private parent: HTMLElement\n private container: HTMLElement\n private scrollContainer: HTMLElement\n private wrapper: HTMLElement\n private canvasWrapper: HTMLElement\n private progressWrapper: HTMLElement\n private cursor: HTMLElement\n private timeouts: Array<() => void> = []\n private isScrollable = false\n private audioData: AudioBuffer | null = null\n private resizeObserver: ResizeObserver | null = null\n private lastContainerWidth = 0\n private isDragging = false\n private subscriptions: (() => void)[] = []\n private unsubscribeOnScroll: (() => void)[] = []\n private dragStream: { signal: any; cleanup: () => void } | null = null\n private scrollStream: { scrollData: any; percentages: any; bounds: any; cleanup: () => void } | null = null\n\n constructor(options: WaveSurferOptions, audioElement?: HTMLElement) {\n super()\n\n this.subscriptions = []\n this.options = options\n\n const parent = this.parentFromOptionsContainer(options.container)\n this.parent = parent\n\n const [div, shadow] = this.initHtml()\n parent.appendChild(div)\n this.container = div\n this.scrollContainer = shadow.querySelector('.scroll') as HTMLElement\n this.wrapper = shadow.querySelector('.wrapper') as HTMLElement\n this.canvasWrapper = shadow.querySelector('.canvases') as HTMLElement\n this.progressWrapper = shadow.querySelector('.progress') as HTMLElement\n this.cursor = shadow.querySelector('.cursor') as HTMLElement\n\n if (audioElement) {\n shadow.appendChild(audioElement)\n }\n\n this.initEvents()\n }\n\n private parentFromOptionsContainer(container: WaveSurferOptions['container']) {\n let parent\n if (typeof container === 'string') {\n parent = document.querySelector(container) satisfies HTMLElement | null\n } else if (container instanceof HTMLElement) {\n parent = container\n }\n\n if (!parent) {\n throw new Error('Container not found')\n }\n\n return parent\n }\n\n private initEvents() {\n // Add a click listener\n this.wrapper.addEventListener('click', (e) => {\n const rect = this.wrapper.getBoundingClientRect()\n const [x, y] = utils.getRelativePointerPosition(rect, e.clientX, e.clientY)\n this.emit('click', x, y)\n })\n\n // Add a double click listener\n this.wrapper.addEventListener('dblclick', (e) => {\n const rect = this.wrapper.getBoundingClientRect()\n const [x, y] = utils.getRelativePointerPosition(rect, e.clientX, e.clientY)\n this.emit('dblclick', x, y)\n })\n\n // Drag\n if (this.options.dragToSeek === true || typeof this.options.dragToSeek === 'object') {\n this.initDrag()\n }\n\n // Add a scroll listener using reactive stream\n this.scrollStream = createScrollStream(this.scrollContainer)\n const unsubscribeScroll = effect(() => {\n const { startX, endX } = this.scrollStream!.percentages.value\n const { left, right } = this.scrollStream!.bounds.value\n this.emit('scroll', startX, endX, left, right)\n }, [this.scrollStream.percentages, this.scrollStream.bounds])\n this.subscriptions.push(unsubscribeScroll)\n\n // Re-render the waveform on container resize\n if (typeof ResizeObserver === 'function') {\n const delay = this.createDelay(100)\n this.resizeObserver = new ResizeObserver(() => {\n delay()\n .then(() => this.onContainerResize())\n .catch(() => undefined)\n })\n this.resizeObserver.observe(this.scrollContainer)\n }\n }\n\n private onContainerResize() {\n const width = this.parent.clientWidth\n if (width === this.lastContainerWidth && this.options.height !== 'auto') return\n this.lastContainerWidth = width\n this.reRender()\n this.emit('resize')\n }\n\n private initDrag() {\n // Don't initialize drag if it's already set up\n if (this.dragStream) return\n\n this.dragStream = createDragStream(this.wrapper)\n\n const unsubscribeDrag = effect(() => {\n const drag = this.dragStream!.signal.value\n if (!drag) return\n\n const width = this.wrapper.getBoundingClientRect().width\n const relX = utils.clampToUnit(drag.x / width)\n\n if (drag.type === 'start') {\n this.isDragging = true\n this.emit('dragstart', relX)\n } else if (drag.type === 'move') {\n this.emit('drag', relX)\n } else if (drag.type === 'end') {\n this.isDragging = false\n this.emit('dragend', relX)\n }\n }, [this.dragStream.signal])\n\n this.subscriptions.push(unsubscribeDrag)\n }\n\n private initHtml(): [HTMLElement, ShadowRoot] {\n const div = document.createElement('div')\n const shadow = div.attachShadow({ mode: 'open' })\n\n const cspNonce =\n this.options.cspNonce && typeof this.options.cspNonce === 'string' ? this.options.cspNonce.replace(/\"/g, '') : ''\n\n shadow.innerHTML = `\n \n :host {\n user-select: none;\n min-width: 1px;\n }\n :host audio {\n display: block;\n width: 100%;\n }\n :host .scroll {\n overflow-x: auto;\n overflow-y: hidden;\n width: 100%;\n position: relative;\n }\n :host .noScrollbar {\n scrollbar-color: transparent;\n scrollbar-width: none;\n }\n :host .noScrollbar::-webkit-scrollbar {\n display: none;\n -webkit-appearance: none;\n }\n :host .wrapper {\n position: relative;\n overflow: visible;\n z-index: 2;\n }\n :host .canvases {\n min-height: ${this.getHeight(this.options.height, this.options.splitChannels)}px;\n pointer-events: none;\n }\n :host .canvases > div {\n position: relative;\n }\n :host canvas {\n display: block;\n position: absolute;\n top: 0;\n image-rendering: pixelated;\n }\n :host .progress {\n pointer-events: none;\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n overflow: hidden;\n }\n :host .progress > div {\n position: relative;\n }\n :host .cursor {\n pointer-events: none;\n position: absolute;\n z-index: 5;\n top: 0;\n left: 0;\n height: 100%;\n border-radius: 2px;\n }\n \n\n
\n
\n
\n
\n
\n
\n
\n `\n\n return [div, shadow]\n }\n\n /** Wavesurfer itself calls this method. Do not call it manually. */\n setOptions(options: WaveSurferOptions) {\n if (this.options.container !== options.container) {\n const newParent = this.parentFromOptionsContainer(options.container)\n newParent.appendChild(this.container)\n\n this.parent = newParent\n }\n\n if (options.dragToSeek === true || typeof this.options.dragToSeek === 'object') {\n this.initDrag()\n } else {\n this.dragStream?.cleanup()\n this.dragStream = null\n }\n\n this.options = options\n\n // Re-render the waveform\n this.reRender()\n }\n\n getWrapper(): HTMLElement {\n return this.wrapper\n }\n\n getWidth(): number {\n return this.scrollContainer.clientWidth\n }\n\n getScroll(): number {\n return this.scrollContainer.scrollLeft\n }\n\n setScroll(pixels: number) {\n this.scrollContainer.scrollLeft = pixels\n }\n\n setScrollPercentage(percent: number) {\n const { scrollWidth } = this.scrollContainer\n const scrollStart = scrollWidth * percent\n this.setScroll(scrollStart)\n }\n\n destroy() {\n this.subscriptions.forEach((unsubscribe) => unsubscribe())\n this.container.remove()\n if (this.resizeObserver) {\n this.resizeObserver.disconnect()\n this.resizeObserver = null\n }\n this.unsubscribeOnScroll?.forEach((unsubscribe) => unsubscribe())\n this.unsubscribeOnScroll = []\n if (this.dragStream) {\n this.dragStream.cleanup()\n this.dragStream = null\n }\n if (this.scrollStream) {\n this.scrollStream.cleanup()\n this.scrollStream = null\n }\n }\n\n private createDelay(delayMs = 10): () => Promise {\n let timeout: ReturnType | undefined\n let rejectFn: (() => void) | undefined\n\n const onClear = () => {\n if (timeout) {\n clearTimeout(timeout)\n timeout = undefined\n }\n if (rejectFn) {\n rejectFn()\n rejectFn = undefined\n }\n }\n\n this.timeouts.push(onClear)\n\n return () => {\n return new Promise((resolve, reject) => {\n // Clear any pending delay\n onClear()\n // Store reject function for cleanup\n rejectFn = reject\n // Set new timeout\n timeout = setTimeout(() => {\n timeout = undefined\n rejectFn = undefined\n resolve()\n }, delayMs)\n })\n }\n }\n\n private getHeight(\n optionsHeight?: WaveSurferOptions['height'],\n optionsSplitChannel?: WaveSurferOptions['splitChannels'],\n ): number {\n const numberOfChannels = this.audioData?.numberOfChannels || 1\n return utils.resolveChannelHeight({\n optionsHeight,\n optionsSplitChannels: optionsSplitChannel,\n parentHeight: this.parent.clientHeight,\n numberOfChannels,\n defaultHeight: utils.DEFAULT_HEIGHT,\n })\n }\n\n private convertColorValues(\n color?: WaveSurferOptions['waveColor'],\n ctx?: CanvasRenderingContext2D,\n ): string | CanvasGradient {\n return utils.resolveColorValue(color, this.getPixelRatio(), ctx?.canvas.height)\n }\n\n private getPixelRatio(): number {\n return utils.getPixelRatio(window.devicePixelRatio)\n }\n\n private renderBarWaveform(\n channelData: ChannelData,\n options: WaveSurferOptions,\n ctx: CanvasRenderingContext2D,\n vScale: number,\n ) {\n const { width, height } = ctx.canvas\n const { halfHeight, barWidth, barRadius, barIndexScale, barSpacing, barMinHeight } = utils.calculateBarRenderConfig(\n {\n width,\n height,\n length: (channelData[0] || []).length,\n options,\n pixelRatio: this.getPixelRatio(),\n },\n )\n\n const segments = utils.calculateBarSegments({\n channelData,\n barIndexScale,\n barSpacing,\n barWidth,\n halfHeight,\n vScale,\n canvasHeight: height,\n barAlign: options.barAlign,\n barMinHeight,\n })\n\n ctx.beginPath()\n\n for (const segment of segments) {\n if (barRadius && 'roundRect' in ctx) {\n ;(\n ctx as CanvasRenderingContext2D & {\n roundRect: (\n x: number,\n y: number,\n width: number,\n height: number,\n radii?: number | DOMPointInit | DOMPointInit[],\n ) => void\n }\n ).roundRect(segment.x, segment.y, segment.width, segment.height, barRadius)\n } else {\n ctx.rect(segment.x, segment.y, segment.width, segment.height)\n }\n }\n\n ctx.fill()\n ctx.closePath()\n }\n\n private renderLineWaveform(\n channelData: ChannelData,\n _options: WaveSurferOptions,\n ctx: CanvasRenderingContext2D,\n vScale: number,\n ) {\n const { width, height } = ctx.canvas\n const paths = utils.calculateLinePaths({ channelData, width, height, vScale })\n\n ctx.beginPath()\n\n for (const path of paths) {\n if (!path.length) continue\n ctx.moveTo(path[0].x, path[0].y)\n for (let i = 1; i < path.length; i++) {\n const point = path[i]\n ctx.lineTo(point.x, point.y)\n }\n }\n\n ctx.fill()\n ctx.closePath()\n }\n\n private renderWaveform(channelData: ChannelData, options: WaveSurferOptions, ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = this.convertColorValues(options.waveColor, ctx)\n\n if (options.renderFunction) {\n options.renderFunction(channelData, ctx)\n return\n }\n\n const vScale = utils.calculateVerticalScale({\n channelData,\n barHeight: options.barHeight,\n normalize: options.normalize,\n maxPeak: options.maxPeak,\n })\n\n if (utils.shouldRenderBars(options)) {\n this.renderBarWaveform(channelData, options, ctx, vScale)\n return\n }\n\n this.renderLineWaveform(channelData, options, ctx, vScale)\n }\n\n private renderSingleCanvas(\n data: ChannelData,\n options: WaveSurferOptions,\n width: number,\n height: number,\n offset: number,\n canvasContainer: HTMLElement,\n progressContainer: HTMLElement,\n ) {\n const pixelRatio = this.getPixelRatio()\n const canvas = document.createElement('canvas')\n canvas.width = Math.round(width * pixelRatio)\n canvas.height = Math.round(height * pixelRatio)\n canvas.style.width = `${width}px`\n canvas.style.height = `${height}px`\n canvas.style.left = `${Math.round(offset)}px`\n canvasContainer.appendChild(canvas)\n\n const ctx = canvas.getContext('2d') as CanvasRenderingContext2D\n\n if (options.renderFunction) {\n ctx.fillStyle = this.convertColorValues(options.waveColor, ctx)\n options.renderFunction(data, ctx)\n } else {\n this.renderWaveform(data, options, ctx)\n }\n\n // Draw a progress canvas\n if (canvas.width > 0 && canvas.height > 0) {\n const progressCanvas = canvas.cloneNode() as HTMLCanvasElement\n const progressCtx = progressCanvas.getContext('2d') as CanvasRenderingContext2D\n progressCtx.drawImage(canvas, 0, 0)\n // Set the composition method to draw only where the waveform is drawn\n progressCtx.globalCompositeOperation = 'source-in'\n progressCtx.fillStyle = this.convertColorValues(\n options.progressColor as WaveSurferOptions['waveColor'],\n progressCtx,\n )\n // This rectangle acts as a mask thanks to the composition method\n progressCtx.fillRect(0, 0, canvas.width, canvas.height)\n progressContainer.appendChild(progressCanvas)\n }\n }\n\n private renderMultiCanvas(\n channelData: ChannelData,\n options: WaveSurferOptions,\n width: number,\n height: number,\n canvasContainer: HTMLElement,\n progressContainer: HTMLElement,\n ) {\n const pixelRatio = this.getPixelRatio()\n const { clientWidth } = this.scrollContainer\n const totalWidth = width / pixelRatio\n\n const singleCanvasWidth = utils.calculateSingleCanvasWidth({ clientWidth, totalWidth, options })\n let drawnIndexes: Record = {}\n\n // Nothing to render\n if (singleCanvasWidth === 0) return\n\n // Draw a single canvas\n const draw = (index: number) => {\n if (index < 0 || index >= numCanvases) return\n if (drawnIndexes[index]) return\n drawnIndexes[index] = true\n const offset = index * singleCanvasWidth\n let clampedWidth = Math.min(totalWidth - offset, singleCanvasWidth)\n\n // Clamp the width to the bar grid to avoid empty canvases at the end\n clampedWidth = utils.clampWidthToBarGrid(clampedWidth, options)\n\n if (clampedWidth <= 0) return\n const data = utils.sliceChannelData({ channelData, offset, clampedWidth, totalWidth })\n this.renderSingleCanvas(data, options, clampedWidth, height, offset, canvasContainer, progressContainer)\n }\n\n // Clear canvases to avoid too many DOM nodes\n const clearCanvases = () => {\n if (utils.shouldClearCanvases(Object.keys(drawnIndexes).length)) {\n canvasContainer.innerHTML = ''\n progressContainer.innerHTML = ''\n drawnIndexes = {}\n }\n }\n\n // Calculate how many canvases to render\n const numCanvases = Math.ceil(totalWidth / singleCanvasWidth)\n\n // Render all canvases if the waveform doesn't scroll\n if (!this.isScrollable) {\n for (let i = 0; i < numCanvases; i++) {\n draw(i)\n }\n return\n }\n\n // Lazy rendering\n const initialRange = utils.getLazyRenderRange({\n scrollLeft: this.scrollContainer.scrollLeft,\n totalWidth,\n numCanvases,\n })\n initialRange.forEach((index) => draw(index))\n\n // Subscribe to the scroll event to draw additional canvases\n if (numCanvases > 1) {\n const unsubscribe = this.on('scroll', () => {\n const { scrollLeft } = this.scrollContainer\n clearCanvases()\n utils.getLazyRenderRange({ scrollLeft, totalWidth, numCanvases }).forEach((index) => draw(index))\n })\n\n this.unsubscribeOnScroll.push(unsubscribe)\n }\n }\n\n private renderChannel(\n channelData: ChannelData,\n { overlay, ...options }: WaveSurferOptions & { overlay?: boolean },\n width: number,\n channelIndex: number,\n ) {\n // A container for canvases\n const canvasContainer = document.createElement('div')\n const height = this.getHeight(options.height, options.splitChannels)\n canvasContainer.style.height = `${height}px`\n if (overlay && channelIndex > 0) {\n canvasContainer.style.marginTop = `-${height}px`\n }\n this.canvasWrapper.style.minHeight = `${height}px`\n this.canvasWrapper.appendChild(canvasContainer)\n\n // A container for progress canvases\n const progressContainer = canvasContainer.cloneNode() as HTMLElement\n this.progressWrapper.appendChild(progressContainer)\n\n // Render the waveform\n this.renderMultiCanvas(channelData, options, width, height, canvasContainer, progressContainer)\n }\n\n async render(audioData: AudioBuffer) {\n // Clear previous timeouts\n this.timeouts.forEach((clear) => clear())\n this.timeouts = []\n\n // Clear the canvases\n this.canvasWrapper.innerHTML = ''\n this.progressWrapper.innerHTML = ''\n\n // Width\n if (this.options.width != null) {\n this.scrollContainer.style.width =\n typeof this.options.width === 'number' ? `${this.options.width}px` : this.options.width\n }\n\n // Determine the width of the waveform\n const pixelRatio = this.getPixelRatio()\n const parentWidth = this.scrollContainer.clientWidth\n const { scrollWidth, isScrollable, useParentWidth, width } = utils.calculateWaveformLayout({\n duration: audioData.duration,\n minPxPerSec: this.options.minPxPerSec || 0,\n parentWidth,\n fillParent: this.options.fillParent,\n pixelRatio,\n })\n\n // Whether the container should scroll\n this.isScrollable = isScrollable\n\n // Set the width of the wrapper\n this.wrapper.style.width = useParentWidth ? '100%' : `${scrollWidth}px`\n\n // Set additional styles\n this.scrollContainer.style.overflowX = this.isScrollable ? 'auto' : 'hidden'\n this.scrollContainer.classList.toggle('noScrollbar', !!this.options.hideScrollbar)\n this.cursor.style.backgroundColor = `${this.options.cursorColor || this.options.progressColor}`\n this.cursor.style.width = `${this.options.cursorWidth}px`\n\n this.audioData = audioData\n\n this.emit('render')\n\n // Render the waveform\n if (this.options.splitChannels) {\n // Render a waveform for each channel\n for (let i = 0; i < audioData.numberOfChannels; i++) {\n const options = { ...this.options, ...this.options.splitChannels?.[i] }\n this.renderChannel([audioData.getChannelData(i)], options, width, i)\n }\n } else {\n // Render a single waveform for the first two channels (left and right)\n const channels = [audioData.getChannelData(0)]\n if (audioData.numberOfChannels > 1) channels.push(audioData.getChannelData(1))\n this.renderChannel(channels, this.options, width, 0)\n }\n\n // Must be emitted asynchronously for backward compatibility\n Promise.resolve().then(() => this.emit('rendered'))\n }\n\n reRender() {\n this.unsubscribeOnScroll.forEach((unsubscribe) => unsubscribe())\n this.unsubscribeOnScroll = []\n\n // Return if the waveform has not been rendered yet\n if (!this.audioData) return\n\n // Remember the current cursor position\n const { scrollWidth } = this.scrollContainer\n const { right: before } = this.progressWrapper.getBoundingClientRect()\n\n // Re-render the waveform\n this.render(this.audioData)\n\n // Adjust the scroll position so that the cursor stays in the same place\n if (this.isScrollable && scrollWidth !== this.scrollContainer.scrollWidth) {\n const { right: after } = this.progressWrapper.getBoundingClientRect()\n const delta = utils.roundToHalfAwayFromZero(after - before)\n this.scrollContainer.scrollLeft += delta\n }\n }\n\n zoom(minPxPerSec: number) {\n this.options.minPxPerSec = minPxPerSec\n this.reRender()\n }\n\n private scrollIntoView(progress: number, isPlaying = false) {\n const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer\n const progressWidth = progress * scrollWidth\n const startEdge = scrollLeft\n const endEdge = scrollLeft + clientWidth\n const middle = clientWidth / 2\n\n if (this.isDragging) {\n // Scroll when dragging close to the edge of the viewport\n const minGap = 30\n if (progressWidth + minGap > endEdge) {\n this.scrollContainer.scrollLeft += minGap\n } else if (progressWidth - minGap < startEdge) {\n this.scrollContainer.scrollLeft -= minGap\n }\n } else {\n if (progressWidth < startEdge || progressWidth > endEdge) {\n this.scrollContainer.scrollLeft = progressWidth - (this.options.autoCenter ? middle : 0)\n }\n\n // Keep the cursor centered when playing\n const center = progressWidth - scrollLeft - middle\n if (isPlaying && this.options.autoCenter && center > 0) {\n const duration = this.audioData?.duration\n if (duration === undefined || duration <= 0) {\n this.scrollContainer.scrollLeft += center\n return\n }\n\n const pixelsPerSecond = scrollWidth / duration\n if (pixelsPerSecond <= LOW_ZOOM_PIXELS_PER_SECOND_THRESHOLD) {\n this.scrollContainer.scrollLeft += Math.min(center, SMOOTH_SCROLL_MAX_DELTA)\n } else {\n this.scrollContainer.scrollLeft += center\n }\n }\n }\n }\n\n renderProgress(progress: number, isPlaying?: boolean) {\n if (isNaN(progress)) return\n const percents = progress * 100\n this.canvasWrapper.style.clipPath = `polygon(${percents}% 0%, 100% 0%, 100% 100%, ${percents}% 100%)`\n this.progressWrapper.style.width = `${percents}%`\n this.cursor.style.left = `${percents}%`\n this.cursor.style.transform = this.options.cursorWidth\n ? `translateX(-${progress * this.options.cursorWidth}px)`\n : ''\n\n // Only scroll if we have valid audio data to prevent race conditions during loading\n if (this.isScrollable && this.options.autoScroll && this.audioData && this.audioData.duration > 0) {\n this.scrollIntoView(progress, isPlaying)\n }\n }\n\n async exportImage(format: string, quality: number, type: 'dataURL' | 'blob'): Promise {\n const canvases = this.canvasWrapper.querySelectorAll('canvas')\n if (!canvases.length) {\n throw new Error('No waveform data')\n }\n\n // Data URLs\n if (type === 'dataURL') {\n const images = Array.from(canvases).map((canvas) => canvas.toDataURL(format, quality))\n return Promise.resolve(images)\n }\n\n // Blobs\n return Promise.all(\n Array.from(canvases).map((canvas) => {\n return new Promise((resolve, reject) => {\n canvas.toBlob(\n (blob) => {\n if (blob) {\n resolve(blob)\n } else {\n reject(new Error('Could not export image'))\n }\n },\n format,\n quality,\n )\n })\n }),\n )\n }\n}\n\nexport default Renderer\n" }, { "path": "src/state/__tests__/wavesurfer-state.test.ts", "content": "import { createWaveSurferState } from '../wavesurfer-state'\n\ndescribe('WaveSurferState', () => {\n it('should create state with default values', () => {\n const { state } = createWaveSurferState()\n\n expect(state.currentTime.value).toBe(0)\n expect(state.duration.value).toBe(0)\n expect(state.isPlaying.value).toBe(false)\n expect(state.isPaused.value).toBe(true)\n expect(state.isSeeking.value).toBe(false)\n expect(state.volume.value).toBe(1)\n expect(state.playbackRate.value).toBe(1)\n expect(state.audioBuffer.value).toBeNull()\n expect(state.peaks.value).toBeNull()\n expect(state.url.value).toBe('')\n expect(state.zoom.value).toBe(0)\n expect(state.scrollPosition.value).toBe(0)\n })\n\n describe('actions', () => {\n it('should update currentTime', () => {\n const { state, actions } = createWaveSurferState()\n\n actions.setCurrentTime(10)\n expect(state.currentTime.value).toBe(10)\n })\n\n it('should clamp currentTime to duration', () => {\n const { state, actions } = createWaveSurferState()\n\n actions.setDuration(100)\n actions.setCurrentTime(150)\n\n expect(state.currentTime.value).toBe(100)\n })\n\n it('should not allow negative currentTime', () => {\n const { state, actions } = createWaveSurferState()\n\n actions.setCurrentTime(-10)\n expect(state.currentTime.value).toBe(0)\n })\n\n it('should update duration', () => {\n const { state, actions } = createWaveSurferState()\n\n actions.setDuration(120)\n expect(state.duration.value).toBe(120)\n })\n\n it('should not allow negative duration', () => {\n const { state, actions } = createWaveSurferState()\n\n actions.setDuration(-10)\n expect(state.duration.value).toBe(0)\n })\n\n it('should update isPlaying', () => {\n const { state, actions } = createWaveSurferState()\n\n actions.setPlaying(true)\n expect(state.isPlaying.value).toBe(true)\n\n actions.setPlaying(false)\n expect(state.isPlaying.value).toBe(false)\n })\n\n it('should update isSeeking', () => {\n const { state, actions } = createWaveSurferState()\n\n actions.setSeeking(true)\n expect(state.isSeeking.value).toBe(true)\n })\n\n it('should update volume', () => {\n const { state, actions } = createWaveSurferState()\n\n actions.setVolume(0.5)\n expect(state.volume.value).toBe(0.5)\n })\n\n it('should clamp volume between 0 and 1', () => {\n const { state, actions } = createWaveSurferState()\n\n actions.setVolume(-0.5)\n expect(state.volume.value).toBe(0)\n\n actions.setVolume(1.5)\n expect(state.volume.value).toBe(1)\n })\n\n it('should update playbackRate', () => {\n const { state, actions } = createWaveSurferState()\n\n actions.setPlaybackRate(2)\n expect(state.playbackRate.value).toBe(2)\n })\n\n it('should clamp playbackRate between 0.1 and 16', () => {\n const { state, actions } = createWaveSurferState()\n\n actions.setPlaybackRate(0.05)\n expect(state.playbackRate.value).toBe(0.1)\n\n actions.setPlaybackRate(20)\n expect(state.playbackRate.value).toBe(16)\n })\n\n it('should update audioBuffer', () => {\n const { state, actions } = createWaveSurferState()\n const buffer = { duration: 120 } as AudioBuffer\n\n actions.setAudioBuffer(buffer)\n expect(state.audioBuffer.value).toBe(buffer)\n })\n\n it('should update duration when audioBuffer is set', () => {\n const { state, actions } = createWaveSurferState()\n const buffer = { duration: 120 } as AudioBuffer\n\n actions.setAudioBuffer(buffer)\n expect(state.duration.value).toBe(120)\n })\n\n it('should update peaks', () => {\n const { state, actions } = createWaveSurferState()\n const peaks = [new Float32Array([1, 2, 3])]\n\n actions.setPeaks(peaks)\n expect(state.peaks.value).toBe(peaks)\n })\n\n it('should update url', () => {\n const { state, actions } = createWaveSurferState()\n\n actions.setUrl('/audio.mp3')\n expect(state.url.value).toBe('/audio.mp3')\n })\n\n it('should update zoom', () => {\n const { state, actions } = createWaveSurferState()\n\n actions.setZoom(100)\n expect(state.zoom.value).toBe(100)\n })\n\n it('should not allow negative zoom', () => {\n const { state, actions } = createWaveSurferState()\n\n actions.setZoom(-10)\n expect(state.zoom.value).toBe(0)\n })\n\n it('should update scrollPosition', () => {\n const { state, actions } = createWaveSurferState()\n\n actions.setScrollPosition(50)\n expect(state.scrollPosition.value).toBe(50)\n })\n\n it('should not allow negative scrollPosition', () => {\n const { state, actions } = createWaveSurferState()\n\n actions.setScrollPosition(-10)\n expect(state.scrollPosition.value).toBe(0)\n })\n })\n\n describe('computed values', () => {\n it('should compute isPaused from isPlaying', () => {\n const { state, actions } = createWaveSurferState()\n\n expect(state.isPaused.value).toBe(true)\n\n actions.setPlaying(true)\n expect(state.isPaused.value).toBe(false)\n\n actions.setPlaying(false)\n expect(state.isPaused.value).toBe(true)\n })\n\n it('should compute canPlay from audioBuffer', () => {\n const { state, actions } = createWaveSurferState()\n\n expect(state.canPlay.value).toBe(false)\n\n const buffer = { duration: 120 } as AudioBuffer\n actions.setAudioBuffer(buffer)\n expect(state.canPlay.value).toBe(true)\n\n actions.setAudioBuffer(null)\n expect(state.canPlay.value).toBe(false)\n })\n\n it('should compute isReady from canPlay and duration', () => {\n const { state, actions } = createWaveSurferState()\n\n expect(state.isReady.value).toBe(false)\n\n // Only buffer, no duration\n const buffer = { duration: 0 } as AudioBuffer\n actions.setAudioBuffer(buffer)\n expect(state.isReady.value).toBe(false)\n\n // Both buffer and duration\n actions.setDuration(120)\n expect(state.isReady.value).toBe(true)\n\n // Remove buffer\n actions.setAudioBuffer(null)\n expect(state.isReady.value).toBe(false)\n })\n\n it('should compute progress from currentTime', () => {\n const { state, actions } = createWaveSurferState()\n\n expect(state.progress.value).toBe(0)\n\n actions.setCurrentTime(50)\n expect(state.progress.value).toBe(50)\n })\n\n it('should compute progressPercent from currentTime and duration', () => {\n const { state, actions } = createWaveSurferState()\n\n expect(state.progressPercent.value).toBe(0)\n\n actions.setDuration(100)\n actions.setCurrentTime(25)\n expect(state.progressPercent.value).toBe(0.25)\n\n actions.setCurrentTime(50)\n expect(state.progressPercent.value).toBe(0.5)\n\n actions.setCurrentTime(100)\n expect(state.progressPercent.value).toBe(1)\n })\n\n it('should handle progressPercent with zero duration', () => {\n const { state, actions } = createWaveSurferState()\n\n actions.setDuration(0)\n actions.setCurrentTime(10)\n\n expect(state.progressPercent.value).toBe(0)\n })\n })\n\n describe('subscriptions', () => {\n it('should notify subscribers on state changes', () => {\n const { state, actions } = createWaveSurferState()\n const callback = jest.fn()\n\n state.isPlaying.subscribe(callback)\n actions.setPlaying(true)\n\n expect(callback).toHaveBeenCalledWith(true)\n })\n\n it('should notify computed value subscribers', () => {\n const { state, actions } = createWaveSurferState()\n const callback = jest.fn()\n\n state.progressPercent.subscribe(callback)\n\n actions.setDuration(100)\n actions.setCurrentTime(50)\n\n expect(callback).toHaveBeenCalledWith(0.5)\n })\n\n it('should work with multiple subscribers', () => {\n const { state, actions } = createWaveSurferState()\n const callback1 = jest.fn()\n const callback2 = jest.fn()\n\n state.isPlaying.subscribe(callback1)\n state.isPlaying.subscribe(callback2)\n\n actions.setPlaying(true)\n\n expect(callback1).toHaveBeenCalledWith(true)\n expect(callback2).toHaveBeenCalledWith(true)\n })\n })\n\n describe('state isolation', () => {\n it('should create independent state instances', () => {\n const instance1 = createWaveSurferState()\n const instance2 = createWaveSurferState()\n\n instance1.actions.setCurrentTime(10)\n instance2.actions.setCurrentTime(20)\n\n expect(instance1.state.currentTime.value).toBe(10)\n expect(instance2.state.currentTime.value).toBe(20)\n })\n\n it('should not share state between instances', () => {\n const instance1 = createWaveSurferState()\n const instance2 = createWaveSurferState()\n\n instance1.actions.setPlaying(true)\n\n expect(instance1.state.isPlaying.value).toBe(true)\n expect(instance2.state.isPlaying.value).toBe(false)\n })\n })\n\n describe('complex state updates', () => {\n it('should handle multiple rapid updates', () => {\n const { state, actions } = createWaveSurferState()\n const values: number[] = []\n\n state.currentTime.subscribe((time) => values.push(time))\n\n // Start from 1 since 0 is the initial value (no change from initial)\n for (let i = 1; i < 100; i++) {\n actions.setCurrentTime(i)\n }\n\n expect(values).toHaveLength(99)\n expect(state.currentTime.value).toBe(99)\n })\n\n it('should maintain consistency across dependent computed values', () => {\n const { state, actions } = createWaveSurferState()\n\n actions.setDuration(100)\n actions.setCurrentTime(50)\n const buffer = { duration: 100 } as AudioBuffer\n actions.setAudioBuffer(buffer)\n\n expect(state.progressPercent.value).toBe(0.5)\n expect(state.canPlay.value).toBe(true)\n expect(state.isReady.value).toBe(true)\n\n actions.setCurrentTime(75)\n\n expect(state.progressPercent.value).toBe(0.75)\n expect(state.progress.value).toBe(75)\n })\n\n it('should handle state reset correctly', () => {\n const { state, actions } = createWaveSurferState()\n\n // Set some state\n actions.setDuration(100)\n actions.setCurrentTime(50)\n actions.setPlaying(true)\n actions.setVolume(0.5)\n\n // Reset\n actions.setCurrentTime(0)\n actions.setDuration(0)\n actions.setPlaying(false)\n actions.setVolume(1)\n\n expect(state.currentTime.value).toBe(0)\n expect(state.duration.value).toBe(0)\n expect(state.isPlaying.value).toBe(false)\n expect(state.volume.value).toBe(1)\n })\n })\n})\n" }, { "path": "src/state/wavesurfer-state.ts", "content": "/**\n * Centralized reactive state for WaveSurfer\n *\n * This module provides a single source of truth for all WaveSurfer state.\n * State is managed using reactive signals that automatically notify subscribers.\n */\n\nimport { signal, computed, type Signal, type WritableSignal } from '../reactive/store.js'\n\n/**\n * Read-only reactive state for WaveSurfer\n */\nexport interface WaveSurferState {\n // Playback state\n readonly currentTime: Signal\n readonly duration: Signal\n readonly isPlaying: Signal\n readonly isPaused: Signal\n readonly isSeeking: Signal\n\n // Audio controls\n readonly volume: Signal\n readonly playbackRate: Signal\n\n // Audio data\n readonly audioBuffer: Signal\n readonly peaks: Signal | null>\n readonly url: Signal\n\n // UI state\n readonly zoom: Signal\n readonly scrollPosition: Signal\n\n // Computed state (derived from other state)\n readonly canPlay: Signal\n readonly isReady: Signal\n readonly progress: Signal\n readonly progressPercent: Signal\n}\n\n/**\n * Actions for updating WaveSurfer state\n */\nexport interface WaveSurferActions {\n setCurrentTime: (time: number) => void\n setDuration: (duration: number) => void\n setPlaying: (playing: boolean) => void\n setSeeking: (seeking: boolean) => void\n setVolume: (volume: number) => void\n setPlaybackRate: (rate: number) => void\n setAudioBuffer: (buffer: AudioBuffer | null) => void\n setPeaks: (peaks: Array | null) => void\n setUrl: (url: string) => void\n setZoom: (zoom: number) => void\n setScrollPosition: (position: number) => void\n}\n\n/**\n * Optional Player signals to compose into WaveSurferState\n * When provided, these signals from Player are used directly instead of creating new ones\n * Note: Signals must be WritableSignal to allow state actions to update them\n */\nexport interface PlayerSignals {\n isPlaying?: WritableSignal\n currentTime?: WritableSignal\n duration?: WritableSignal\n volume?: WritableSignal\n playbackRate?: WritableSignal\n isSeeking?: WritableSignal\n}\n\n/**\n * Create a new WaveSurfer state instance\n *\n * @param playerSignals - Optional signals from Player to compose with WaveSurfer state\n *\n * @example\n * ```typescript\n * // Without Player signals (standalone)\n * const { state, actions } = createWaveSurferState()\n *\n * // With Player signals (composed)\n * const { state, actions } = createWaveSurferState({\n * isPlaying: player.isPlayingSignal,\n * currentTime: player.currentTimeSignal,\n * // ...\n * })\n *\n * // Read state\n * console.log(state.isPlaying.value)\n *\n * // Update state\n * actions.setPlaying(true)\n *\n * // Subscribe to changes\n * state.isPlaying.subscribe(playing => {\n * console.log('Playing:', playing)\n * })\n * ```\n */\nexport function createWaveSurferState(playerSignals?: PlayerSignals): {\n state: WaveSurferState\n actions: WaveSurferActions\n} {\n // Use Player signals if provided, otherwise create new ones\n const currentTime = playerSignals?.currentTime ?? signal(0)\n const duration = playerSignals?.duration ?? signal(0)\n const isPlaying = playerSignals?.isPlaying ?? signal(false)\n const isSeeking = playerSignals?.isSeeking ?? signal(false)\n const volume = playerSignals?.volume ?? signal(1)\n const playbackRate = playerSignals?.playbackRate ?? signal(1)\n\n // WaveSurfer-specific signals (not in Player)\n const audioBuffer = signal(null)\n const peaks = signal | null>(null)\n const url = signal('')\n const zoom = signal(0)\n const scrollPosition = signal(0)\n\n // Computed values (derived state)\n const isPaused = computed(() => !isPlaying.value, [isPlaying])\n\n const canPlay = computed(() => audioBuffer.value !== null, [audioBuffer])\n\n const isReady = computed(() => {\n return canPlay.value && duration.value > 0\n }, [canPlay, duration])\n\n const progress = computed(() => currentTime.value, [currentTime])\n\n const progressPercent = computed(() => {\n return duration.value > 0 ? currentTime.value / duration.value : 0\n }, [currentTime, duration])\n\n // Public read-only state\n const state: WaveSurferState = {\n currentTime,\n duration,\n isPlaying,\n isPaused,\n isSeeking,\n volume,\n playbackRate,\n audioBuffer,\n peaks,\n url,\n zoom,\n scrollPosition,\n canPlay,\n isReady,\n progress,\n progressPercent,\n }\n\n // Actions that modify state\n const actions: WaveSurferActions = {\n setCurrentTime: (time: number) => {\n const clampedTime = Math.max(0, Math.min(duration.value || Infinity, time))\n currentTime.set(clampedTime)\n },\n\n setDuration: (d: number) => {\n duration.set(Math.max(0, d))\n },\n\n setPlaying: (playing: boolean) => {\n isPlaying.set(playing)\n },\n\n setSeeking: (seeking: boolean) => {\n isSeeking.set(seeking)\n },\n\n setVolume: (v: number) => {\n const clampedVolume = Math.max(0, Math.min(1, v))\n volume.set(clampedVolume)\n },\n\n setPlaybackRate: (rate: number) => {\n const clampedRate = Math.max(0.1, Math.min(16, rate))\n playbackRate.set(clampedRate)\n },\n\n setAudioBuffer: (buffer: AudioBuffer | null) => {\n audioBuffer.set(buffer)\n if (buffer) {\n duration.set(buffer.duration)\n }\n },\n\n setPeaks: (p: Array | null) => {\n peaks.set(p)\n },\n\n setUrl: (u: string) => {\n url.set(u)\n },\n\n setZoom: (z: number) => {\n zoom.set(Math.max(0, z))\n },\n\n setScrollPosition: (pos: number) => {\n scrollPosition.set(Math.max(0, pos))\n },\n }\n\n return { state, actions }\n}\n" }, { "path": "src/timer.ts", "content": "import EventEmitter from './event-emitter.js'\n\ntype TimerEvents = {\n tick: []\n}\n\nclass Timer extends EventEmitter {\n private animationFrameId: number | null = null\n private isRunning = false\n\n start() {\n // Prevent multiple simultaneous loops\n if (this.isRunning) return\n\n this.isRunning = true\n\n const tick = () => {\n // Only continue if timer is still running\n if (!this.isRunning) return\n\n this.emit('tick')\n\n // Schedule next frame\n this.animationFrameId = requestAnimationFrame(tick)\n }\n\n // Start the loop\n tick()\n }\n\n stop() {\n this.isRunning = false\n\n // Cancel any pending animation frame\n if (this.animationFrameId !== null) {\n cancelAnimationFrame(this.animationFrameId)\n this.animationFrameId = null\n }\n }\n\n destroy() {\n this.stop()\n }\n}\n\nexport default Timer\n" }, { "path": "src/wavesurfer.ts", "content": "import BasePlugin, { type GenericPlugin } from './base-plugin.js'\nimport Decoder from './decoder.js'\nimport * as dom from './dom.js'\nimport Fetcher from './fetcher.js'\nimport Player from './player.js'\nimport Renderer from './renderer.js'\nimport Timer from './timer.js'\nimport WebAudioPlayer from './webaudio.js'\nimport { createWaveSurferState, type WaveSurferState, type WaveSurferActions } from './state/wavesurfer-state.js'\nimport { setupStateEventEmission } from './reactive/state-event-emitter.js'\n\nexport type WaveSurferOptions = {\n /** Required: an HTML element or selector where the waveform will be rendered */\n container: HTMLElement | string\n /** The height of the waveform in pixels, or \"auto\" to fill the container height */\n height?: number | 'auto'\n /** The width of the waveform in pixels or any CSS value; defaults to 100% */\n width?: number | string\n /** The color of the waveform */\n waveColor?: string | string[] | CanvasGradient\n /** The color of the progress mask */\n progressColor?: string | string[] | CanvasGradient\n /** The color of the playback cursor */\n cursorColor?: string\n /** The cursor width */\n cursorWidth?: number\n /** If set, the waveform will be rendered with bars like this: ▁ ▂ ▇ ▃ ▅ ▂ */\n barWidth?: number\n /** Spacing between bars in pixels */\n barGap?: number\n /** Rounded borders for bars */\n barRadius?: number\n /** A vertical scaling factor for the waveform */\n barHeight?: number\n /** Vertical bar alignment */\n barAlign?: 'top' | 'bottom'\n /** Minimum height of bars in pixels */\n barMinHeight?: number\n /** Minimum pixels per second of audio (i.e. the zoom level) */\n minPxPerSec?: number\n /** Stretch the waveform to fill the container, true by default */\n fillParent?: boolean\n /** Audio URL */\n url?: string\n /** Pre-computed audio data, arrays of floats for each channel */\n peaks?: Array\n /** Pre-computed audio duration in seconds */\n duration?: number\n /** Use an existing media element instead of creating one */\n media?: HTMLMediaElement\n /** Whether to show default audio element controls */\n mediaControls?: boolean\n /** Play the audio on load */\n autoplay?: boolean\n /** Pass false to disable clicks on the waveform */\n interact?: boolean\n /** Allow to drag the cursor to seek to a new position. If an object with `debounceTime` is provided instead\n * then `dragToSeek` will also be true. If `true` the default is 200ms\n */\n dragToSeek?: boolean | { debounceTime: number }\n /** Hide the scrollbar */\n hideScrollbar?: boolean\n /** Audio rate, i.e. the playback speed */\n audioRate?: number\n /** Automatically scroll the container to keep the current position in viewport */\n autoScroll?: boolean\n /** If autoScroll is enabled, keep the cursor in the center of the waveform during playback */\n autoCenter?: boolean\n /** Decoding sample rate. Doesn't affect the playback. Defaults to 8000 */\n sampleRate?: number\n /** Render each audio channel as a separate waveform */\n splitChannels?: Array & { overlay?: boolean }>\n /** Stretch the waveform to the full height */\n normalize?: boolean\n /** Use a fixed max peak value for normalization instead of calculating from the current data */\n maxPeak?: number\n /** The list of plugins to initialize on start */\n plugins?: GenericPlugin[]\n /** Custom render function */\n renderFunction?: (peaks: Array, ctx: CanvasRenderingContext2D) => void\n /** Options to pass to the fetch method */\n fetchParams?: RequestInit\n /** Playback \"backend\" to use, defaults to MediaElement */\n backend?: 'WebAudio' | 'MediaElement'\n /** Nonce for CSP if necessary */\n cspNonce?: string\n /** Override the Blob MIME type */\n blobMimeType?: string\n}\n\nconst defaultOptions = {\n waveColor: '#999',\n progressColor: '#555',\n cursorWidth: 1,\n minPxPerSec: 0,\n fillParent: true,\n interact: true,\n dragToSeek: false,\n autoScroll: true,\n autoCenter: true,\n sampleRate: 8000,\n}\n\nexport type WaveSurferEvents = {\n /** After wavesurfer is created */\n init: []\n /** When audio starts loading */\n load: [url: string]\n /** During audio loading */\n loading: [percent: number]\n /** When the audio has been decoded */\n decode: [duration: number]\n /** When the audio is both decoded and can play */\n ready: [duration: number]\n /** When visible waveform is drawn */\n redraw: []\n /** When all audio channel chunks of the waveform have drawn */\n redrawcomplete: []\n /** When the audio starts playing */\n play: []\n /** When the audio pauses */\n pause: []\n /** When the audio finishes playing */\n finish: []\n /** On audio position change, fires continuously during playback */\n timeupdate: [currentTime: number]\n /** An alias of timeupdate but only when the audio is playing */\n audioprocess: [currentTime: number]\n /** When the user seeks to a new position */\n seeking: [currentTime: number]\n /** When the user interacts with the waveform (i.g. clicks or drags on it) */\n interaction: [newTime: number]\n /** When the user clicks on the waveform */\n click: [relativeX: number, relativeY: number]\n /** When the user double-clicks on the waveform */\n dblclick: [relativeX: number, relativeY: number]\n /** When the user drags the cursor */\n drag: [relativeX: number]\n /** When the user starts dragging the cursor */\n dragstart: [relativeX: number]\n /** When the user ends dragging the cursor */\n dragend: [relativeX: number]\n /** When the waveform is scrolled (panned) */\n scroll: [visibleStartTime: number, visibleEndTime: number, scrollLeft: number, scrollRight: number]\n /** When the zoom level changes */\n zoom: [minPxPerSec: number]\n /** Just before the waveform is destroyed so you can clean up your events */\n destroy: []\n /** When source file is unable to be fetched, decoded, or an error is thrown by media element */\n error: [error: Error]\n /** When audio container resizing */\n resize: []\n}\n\nclass WaveSurfer extends Player {\n public options: WaveSurferOptions & typeof defaultOptions\n private renderer: Renderer\n private timer: Timer\n private plugins: GenericPlugin[] = []\n private decodedData: AudioBuffer | null = null\n private stopAtPosition: number | null = null\n protected subscriptions: Array<() => void> = []\n protected mediaSubscriptions: Array<() => void> = []\n protected abortController: AbortController | null = null\n\n // Reactive state\n private wavesurferState: WaveSurferState\n private wavesurferActions: WaveSurferActions\n private reactiveCleanups: Array<() => void> = []\n\n public static readonly BasePlugin = BasePlugin\n public static readonly dom = dom\n\n /** Create a new WaveSurfer instance */\n public static create(options: WaveSurferOptions) {\n return new WaveSurfer(options)\n }\n\n /** Get the reactive state for advanced use cases */\n public getState(): WaveSurferState {\n return this.wavesurferState\n }\n\n /** Get the renderer instance for plugin access to reactive streams */\n public getRenderer(): Renderer {\n return this.renderer\n }\n\n /** Create a new WaveSurfer instance */\n constructor(options: WaveSurferOptions) {\n const media =\n options.media ||\n (options.backend === 'WebAudio' ? (new WebAudioPlayer() as unknown as HTMLAudioElement) : undefined)\n\n super({\n media,\n mediaControls: options.mediaControls,\n autoplay: options.autoplay,\n playbackRate: options.audioRate,\n })\n\n this.options = Object.assign({}, defaultOptions, options)\n\n // Initialize reactive state\n // Pass Player signals to compose them into WaveSurferState\n const { state, actions } = createWaveSurferState({\n isPlaying: this.isPlayingSignal,\n currentTime: this.currentTimeSignal,\n duration: this.durationSignal,\n volume: this.volumeSignal,\n playbackRate: this.playbackRateSignal,\n isSeeking: this.seekingSignal,\n })\n this.wavesurferState = state\n this.wavesurferActions = actions\n\n this.timer = new Timer()\n\n const audioElement = media ? undefined : this.getMediaElement()\n this.renderer = new Renderer(this.options, audioElement)\n\n this.initPlayerEvents()\n this.initRendererEvents()\n this.initTimerEvents()\n this.initReactiveState()\n this.initPlugins()\n\n // Read the initial URL before load has been called\n const initialUrl = this.options.url || this.getSrc() || ''\n\n // Init and load async to allow external events to be registered\n Promise.resolve().then(() => {\n this.emit('init')\n\n // Load audio if URL or an external media with an src is passed,\n // of render w/o audio if pre-decoded peaks and duration are provided\n const { peaks, duration } = this.options\n if (initialUrl || (peaks && duration)) {\n // Swallow async errors because they cannot be caught from a constructor call.\n // Subscribe to the wavesurfer's error event to handle them.\n this.load(initialUrl, peaks, duration).catch((err) => {\n // Emit error event for proper error handling\n this.emit('error', err instanceof Error ? err : new Error(String(err)))\n })\n }\n })\n }\n\n private updateProgress(currentTime = this.getCurrentTime()): number {\n this.renderer.renderProgress(currentTime / this.getDuration(), this.isPlaying())\n return currentTime\n }\n\n private initTimerEvents() {\n // The timer fires every 16ms for a smooth progress animation\n this.subscriptions.push(\n this.timer.on('tick', () => {\n if (!this.isSeeking()) {\n const currentTime = this.updateProgress()\n this.emit('timeupdate', currentTime)\n this.emit('audioprocess', currentTime)\n\n // Pause audio when it reaches the stopAtPosition\n if (this.stopAtPosition != null && this.isPlaying() && currentTime >= this.stopAtPosition) {\n this.pause()\n }\n }\n }),\n )\n }\n\n private initReactiveState() {\n // Bridge reactive state to EventEmitter for backwards compatibility\n this.reactiveCleanups.push(\n setupStateEventEmission(this.wavesurferState, {\n emit: this.emit.bind(this),\n }),\n )\n }\n\n private initPlayerEvents() {\n if (this.isPlaying()) {\n this.emit('play')\n this.timer.start()\n }\n\n this.mediaSubscriptions.push(\n this.onMediaEvent('timeupdate', () => {\n const currentTime = this.updateProgress()\n this.emit('timeupdate', currentTime)\n }),\n\n this.onMediaEvent('play', () => {\n this.emit('play')\n this.timer.start()\n }),\n\n this.onMediaEvent('pause', () => {\n this.emit('pause')\n this.timer.stop()\n this.stopAtPosition = null\n }),\n\n this.onMediaEvent('emptied', () => {\n this.timer.stop()\n this.stopAtPosition = null\n }),\n\n this.onMediaEvent('ended', () => {\n this.emit('timeupdate', this.getDuration())\n this.emit('finish')\n this.stopAtPosition = null\n }),\n\n this.onMediaEvent('seeking', () => {\n this.emit('seeking', this.getCurrentTime())\n }),\n\n this.onMediaEvent('error', () => {\n this.emit('error', (this.getMediaElement().error ?? new Error('Media error')) as Error)\n this.stopAtPosition = null\n }),\n )\n }\n\n private initRendererEvents() {\n this.subscriptions.push(\n // Seek on click\n this.renderer.on('click', (relativeX, relativeY) => {\n if (this.options.interact) {\n this.seekTo(relativeX)\n this.emit('interaction', relativeX * this.getDuration())\n this.emit('click', relativeX, relativeY)\n }\n }),\n\n // Double click\n this.renderer.on('dblclick', (relativeX, relativeY) => {\n this.emit('dblclick', relativeX, relativeY)\n }),\n\n // Scroll\n this.renderer.on('scroll', (startX, endX, scrollLeft, scrollRight) => {\n const duration = this.getDuration()\n this.emit('scroll', startX * duration, endX * duration, scrollLeft, scrollRight)\n }),\n\n // Redraw\n this.renderer.on('render', () => {\n this.emit('redraw')\n }),\n\n // RedrawComplete\n this.renderer.on('rendered', () => {\n this.emit('redrawcomplete')\n }),\n\n // DragStart\n this.renderer.on('dragstart', (relativeX) => {\n this.emit('dragstart', relativeX)\n }),\n\n // DragEnd\n this.renderer.on('dragend', (relativeX) => {\n this.emit('dragend', relativeX)\n }),\n\n // Resize\n this.renderer.on('resize', () => {\n this.emit('resize')\n }),\n )\n\n // Drag\n {\n let debounce: ReturnType | undefined\n const unsubscribeDrag = this.renderer.on('drag', (relativeX) => {\n if (!this.options.interact) return\n\n // Update the visual position\n this.renderer.renderProgress(relativeX)\n\n // Set the audio position with a debounce\n clearTimeout(debounce)\n let debounceTime = 0\n\n const dragToSeek = this.options.dragToSeek\n if (this.isPlaying()) {\n debounceTime = 0\n } else if (dragToSeek === true) {\n debounceTime = 200\n } else if (dragToSeek && typeof dragToSeek === 'object') {\n debounceTime = (dragToSeek as { debounceTime: number }).debounceTime ?? 200\n }\n\n debounce = setTimeout(() => {\n this.seekTo(relativeX)\n }, debounceTime)\n\n this.emit('interaction', relativeX * this.getDuration())\n this.emit('drag', relativeX)\n })\n\n // Clear debounce timeout on destroy\n this.subscriptions.push(() => {\n clearTimeout(debounce)\n unsubscribeDrag()\n })\n }\n }\n\n private initPlugins() {\n if (!this.options.plugins?.length) return\n\n this.options.plugins.forEach((plugin) => {\n this.registerPlugin(plugin)\n })\n }\n\n private unsubscribePlayerEvents() {\n this.mediaSubscriptions.forEach((unsubscribe) => unsubscribe())\n this.mediaSubscriptions = []\n }\n\n /** Set new wavesurfer options and re-render it */\n public setOptions(options: Partial) {\n this.options = Object.assign({}, this.options, options)\n if (options.duration && !options.peaks) {\n this.decodedData = Decoder.createBuffer(this.exportPeaks(), options.duration)\n }\n if (options.peaks && options.duration) {\n // Create new decoded data buffer from peaks and duration\n this.decodedData = Decoder.createBuffer(options.peaks, options.duration)\n }\n this.renderer.setOptions(this.options)\n\n if (options.audioRate) {\n this.setPlaybackRate(options.audioRate)\n }\n if (options.mediaControls != null) {\n this.getMediaElement().controls = options.mediaControls\n }\n }\n\n /** Register a wavesurfer.js plugin */\n public registerPlugin(plugin: T): T {\n // Check if the plugin is already registered\n if (this.plugins.includes(plugin)) {\n return plugin\n }\n\n plugin._init(this)\n this.plugins.push(plugin)\n\n // Unregister plugin on destroy\n const unsubscribe = plugin.once('destroy', () => {\n this.plugins = this.plugins.filter((p) => p !== plugin)\n this.subscriptions = this.subscriptions.filter((fn) => fn !== unsubscribe)\n })\n this.subscriptions.push(unsubscribe)\n\n return plugin\n }\n\n /** Unregister a wavesurfer.js plugin */\n public unregisterPlugin(plugin: GenericPlugin): void {\n this.plugins = this.plugins.filter((p) => p !== plugin)\n plugin.destroy()\n }\n\n /** For plugins only: get the waveform wrapper div */\n public getWrapper(): HTMLElement {\n return this.renderer.getWrapper()\n }\n\n /** For plugins only: get the scroll container client width */\n public getWidth(): number {\n return this.renderer.getWidth()\n }\n\n /** Get the current scroll position in pixels */\n public getScroll(): number {\n return this.renderer.getScroll()\n }\n\n /** Set the current scroll position in pixels */\n public setScroll(pixels: number) {\n return this.renderer.setScroll(pixels)\n }\n\n /** Move the start of the viewing window to a specific time in the audio (in seconds) */\n public setScrollTime(time: number) {\n const percentage = time / this.getDuration()\n this.renderer.setScrollPercentage(percentage)\n }\n\n /** Get all registered plugins */\n public getActivePlugins() {\n return this.plugins\n }\n\n private async loadAudio(url: string, blob?: Blob, channelData?: WaveSurferOptions['peaks'], duration?: number) {\n this.emit('load', url)\n\n if (!this.options.media && this.isPlaying()) this.pause()\n\n this.decodedData = null\n this.stopAtPosition = null\n\n // Abort any ongoing fetch before starting a new one\n this.abortController?.abort()\n this.abortController = null\n\n // Fetch the entire audio as a blob if pre-decoded data is not provided\n if (!blob && !channelData) {\n const fetchParams = this.options.fetchParams || {}\n if (window.AbortController && !fetchParams.signal) {\n this.abortController = new AbortController()\n fetchParams.signal = this.abortController.signal\n }\n const onProgress = (percentage: number) => this.emit('loading', percentage)\n blob = await Fetcher.fetchBlob(url, onProgress, fetchParams)\n const overridenMimeType = this.options.blobMimeType\n if (overridenMimeType) {\n blob = new Blob([blob], { type: overridenMimeType })\n }\n }\n\n // Set the mediaelement source\n this.setSrc(url, blob)\n\n // Wait for the audio duration\n const audioDuration = await new Promise((resolve) => {\n const staticDuration = duration || this.getDuration()\n if (staticDuration) {\n resolve(staticDuration)\n } else {\n this.mediaSubscriptions.push(\n this.onMediaEvent('loadedmetadata', () => resolve(this.getDuration()), { once: true }),\n )\n }\n })\n\n // Set the duration if the player is a WebAudioPlayer without a URL\n if (!url && !blob) {\n const media = this.getMediaElement()\n if (media instanceof WebAudioPlayer) {\n media.duration = audioDuration\n }\n }\n\n // Decode the audio data or use user-provided peaks\n if (channelData) {\n this.decodedData = Decoder.createBuffer(channelData, audioDuration || 0)\n } else if (blob) {\n const arrayBuffer = await blob.arrayBuffer()\n this.decodedData = await Decoder.decode(arrayBuffer, this.options.sampleRate)\n }\n\n if (this.decodedData) {\n this.emit('decode', this.getDuration())\n this.renderer.render(this.decodedData)\n }\n\n this.emit('ready', this.getDuration())\n }\n\n /** Load an audio file by URL, with optional pre-decoded audio data */\n public async load(url: string, channelData?: WaveSurferOptions['peaks'], duration?: number) {\n try {\n return await this.loadAudio(url, undefined, channelData, duration)\n } catch (err) {\n this.emit('error', err as Error)\n throw err\n }\n }\n\n /** Load an audio blob */\n public async loadBlob(blob: Blob, channelData?: WaveSurferOptions['peaks'], duration?: number) {\n try {\n return await this.loadAudio('', blob, channelData, duration)\n } catch (err) {\n this.emit('error', err as Error)\n throw err\n }\n }\n\n /** Zoom the waveform by a given pixels-per-second factor */\n public zoom(minPxPerSec: number) {\n if (!this.decodedData) {\n throw new Error('No audio loaded')\n }\n this.renderer.zoom(minPxPerSec)\n this.emit('zoom', minPxPerSec)\n }\n\n /** Get the decoded audio data */\n public getDecodedData(): AudioBuffer | null {\n return this.decodedData\n }\n\n /** Get decoded peaks */\n public exportPeaks({ channels = 2, maxLength = 8000, precision = 10_000 } = {}): Array {\n if (!this.decodedData) {\n throw new Error('The audio has not been decoded yet')\n }\n const maxChannels = Math.min(channels, this.decodedData.numberOfChannels)\n const peaks = []\n for (let i = 0; i < maxChannels; i++) {\n const channel = this.decodedData.getChannelData(i)\n const data = []\n const sampleSize = channel.length / maxLength\n for (let j = 0; j < maxLength; j++) {\n const sample = channel.slice(Math.floor(j * sampleSize), Math.ceil((j + 1) * sampleSize))\n let max = 0\n for (let x = 0; x < sample.length; x++) {\n const n = sample[x]\n if (Math.abs(n) > Math.abs(max)) max = n\n }\n data.push(Math.round(max * precision) / precision)\n }\n peaks.push(data)\n }\n return peaks\n }\n\n /** Get the duration of the audio in seconds */\n public getDuration(): number {\n let duration = super.getDuration() || 0\n // Fall back to the decoded data duration if the media duration is incorrect\n if ((duration === 0 || duration === Infinity) && this.decodedData) {\n duration = this.decodedData.duration\n }\n return duration\n }\n\n /** Toggle if the waveform should react to clicks */\n public toggleInteraction(isInteractive: boolean) {\n this.options.interact = isInteractive\n }\n\n /** Jump to a specific time in the audio (in seconds) */\n public setTime(time: number) {\n this.stopAtPosition = null\n super.setTime(time)\n this.updateProgress(time)\n this.emit('timeupdate', time)\n }\n\n /** Seek to a ratio of audio as [0..1] (0 = beginning, 1 = end) */\n public seekTo(progress: number) {\n const time = this.getDuration() * progress\n this.setTime(time)\n }\n\n /** Start playing the audio */\n public async play(start?: number, end?: number): Promise {\n if (start != null) {\n this.setTime(start)\n }\n\n const playResult = await super.play()\n if (end != null) {\n if (this.media instanceof WebAudioPlayer) {\n this.media.stopAt(end)\n } else {\n this.stopAtPosition = end\n }\n }\n\n return playResult\n }\n\n /** Play or pause the audio */\n public async playPause(): Promise {\n return this.isPlaying() ? this.pause() : this.play()\n }\n\n /** Stop the audio and go to the beginning */\n public stop() {\n this.pause()\n this.setTime(0)\n }\n\n /** Skip N or -N seconds from the current position */\n public skip(seconds: number) {\n this.setTime(this.getCurrentTime() + seconds)\n }\n\n /** Empty the waveform */\n public empty() {\n this.load('', [[0]], 0.001)\n }\n\n /** Set HTML media element */\n public setMediaElement(element: HTMLMediaElement) {\n this.unsubscribePlayerEvents()\n super.setMediaElement(element)\n this.initPlayerEvents()\n }\n\n /**\n * Export the waveform image as a data-URI or a blob.\n *\n * @param format The format of the exported image, can be `image/png`, `image/jpeg`, `image/webp` or any other format supported by the browser.\n * @param quality The quality of the exported image, for `image/jpeg` or `image/webp`. Must be between 0 and 1.\n * @param type The type of the exported image, can be `dataURL` (default) or `blob`.\n * @returns A promise that resolves with an array of data-URLs or blobs, one for each canvas element.\n */\n public async exportImage(format: string, quality: number, type: 'dataURL'): Promise\n public async exportImage(format: string, quality: number, type: 'blob'): Promise\n public async exportImage(\n format = 'image/png',\n quality = 1,\n type: 'dataURL' | 'blob' = 'dataURL',\n ): Promise {\n return this.renderer.exportImage(format, quality, type)\n }\n\n /** Unmount wavesurfer */\n public destroy() {\n this.emit('destroy')\n this.abortController?.abort()\n this.plugins.forEach((plugin) => plugin.destroy())\n this.subscriptions.forEach((unsubscribe) => unsubscribe())\n this.unsubscribePlayerEvents()\n this.reactiveCleanups.forEach((cleanup) => cleanup())\n this.reactiveCleanups = []\n this.timer.destroy()\n this.renderer.destroy()\n super.destroy()\n }\n}\n\n// Export reactive types for plugin authors\nexport type { Signal, WritableSignal } from './reactive/store.js'\nexport type { WaveSurferState, WaveSurferActions } from './state/wavesurfer-state.js'\n\nexport default WaveSurfer\n" }, { "path": "src/webaudio.ts", "content": "import EventEmitter from './event-emitter.js'\n\ntype WebAudioPlayerEvents = {\n loadedmetadata: []\n canplay: []\n play: []\n pause: []\n seeking: []\n timeupdate: []\n volumechange: []\n emptied: []\n ended: []\n}\n\n/**\n * A Web Audio buffer player emulating the behavior of an HTML5 Audio element.\n *\n * Note: This class does not manage blob: URLs. If you pass a blob: URL to setSrc(),\n * you are responsible for revoking it when done. The Player class (player.ts) handles\n * blob URL lifecycle management automatically.\n */\nclass WebAudioPlayer extends EventEmitter {\n private audioContext: AudioContext\n private gainNode: GainNode\n private bufferNode: AudioBufferSourceNode | null = null\n private playStartTime = 0\n private playbackPosition = 0\n private _muted = false\n private _playbackRate = 1\n private _duration: number | undefined = undefined\n private buffer: AudioBuffer | null = null\n public currentSrc = ''\n public paused = true\n public crossOrigin: string | null = null\n public seeking = false\n public autoplay = false\n\n constructor(audioContext = new AudioContext()) {\n super()\n this.audioContext = audioContext\n this.gainNode = this.audioContext.createGain()\n this.gainNode.connect(this.audioContext.destination)\n }\n\n /** Subscribe to an event. Returns an unsubscribe function. */\n addEventListener = this.on\n\n /** Unsubscribe from an event */\n removeEventListener = this.un\n\n async load() {\n return\n }\n\n get src() {\n return this.currentSrc\n }\n\n set src(value: string) {\n this.currentSrc = value\n this._duration = undefined\n\n if (!value) {\n this.buffer = null\n this.emit('emptied')\n return\n }\n\n fetch(value)\n .then((response) => {\n if (response.status >= 400) {\n throw new Error(`Failed to fetch ${value}: ${response.status} (${response.statusText})`)\n }\n return response.arrayBuffer()\n })\n .then((arrayBuffer) => {\n if (this.currentSrc !== value) return null\n return this.audioContext.decodeAudioData(arrayBuffer)\n })\n .then((audioBuffer) => {\n if (this.currentSrc !== value) return\n\n this.buffer = audioBuffer\n\n this.emit('loadedmetadata')\n this.emit('canplay')\n\n if (this.autoplay) this.play()\n })\n .catch((err) => {\n // Emit error for proper error handling\n console.error('WebAudioPlayer load error:', err)\n })\n }\n\n private _play() {\n if (!this.paused) return\n this.paused = false\n\n // Clean up old buffer node completely before creating new one\n if (this.bufferNode) {\n this.bufferNode.onended = null\n this.bufferNode.disconnect()\n }\n\n this.bufferNode = this.audioContext.createBufferSource()\n if (this.buffer) {\n this.bufferNode.buffer = this.buffer\n }\n this.bufferNode.playbackRate.value = this._playbackRate\n this.bufferNode.connect(this.gainNode)\n\n let currentPos = this.playbackPosition\n if (currentPos >= this.duration || currentPos < 0) {\n currentPos = 0\n this.playbackPosition = 0\n }\n\n this.bufferNode.start(this.audioContext.currentTime, currentPos)\n this.playStartTime = this.audioContext.currentTime\n\n this.bufferNode.onended = () => {\n if (this.currentTime >= this.duration) {\n this.pause()\n this.emit('ended')\n }\n }\n }\n\n private _pause() {\n this.paused = true\n this.bufferNode?.stop()\n this.playbackPosition += (this.audioContext.currentTime - this.playStartTime) * this._playbackRate\n }\n\n async play() {\n if (!this.paused) return\n this._play()\n this.emit('play')\n }\n\n pause() {\n if (this.paused) return\n this._pause()\n this.emit('pause')\n }\n\n stopAt(timeSeconds: number) {\n const delay = timeSeconds - this.currentTime\n const currentBufferNode = this.bufferNode\n currentBufferNode?.stop(this.audioContext.currentTime + delay)\n\n currentBufferNode?.addEventListener(\n 'ended',\n () => {\n if (currentBufferNode === this.bufferNode) {\n this.bufferNode = null\n this.pause()\n }\n },\n { once: true },\n )\n }\n\n async setSinkId(deviceId: string) {\n const ac = this.audioContext as AudioContext & { setSinkId: (id: string) => Promise }\n return ac.setSinkId(deviceId)\n }\n\n get playbackRate() {\n return this._playbackRate\n }\n set playbackRate(value) {\n const wasPlaying = !this.paused\n if (wasPlaying) this._pause()\n this._playbackRate = value\n if (wasPlaying) this._play()\n\n if (this.bufferNode) {\n this.bufferNode.playbackRate.value = value\n }\n }\n\n get currentTime() {\n return this.paused\n ? this.playbackPosition\n : this.playbackPosition + (this.audioContext.currentTime - this.playStartTime) * this._playbackRate\n }\n set currentTime(value) {\n const wasPlaying = !this.paused\n\n if (wasPlaying) this._pause()\n this.playbackPosition = value\n if (wasPlaying) this._play()\n\n this.emit('seeking')\n this.emit('timeupdate')\n }\n\n get duration() {\n return this._duration ?? (this.buffer?.duration || 0)\n }\n set duration(value: number) {\n this._duration = value\n }\n\n get volume() {\n return this.gainNode.gain.value\n }\n set volume(value) {\n this.gainNode.gain.value = value\n this.emit('volumechange')\n }\n\n get muted() {\n return this._muted\n }\n set muted(value: boolean) {\n if (this._muted === value) return\n this._muted = value\n\n if (this._muted) {\n this.gainNode.disconnect()\n } else {\n this.gainNode.connect(this.audioContext.destination)\n }\n }\n\n public canPlayType(mimeType: string) {\n return /^(audio|video)\\//.test(mimeType)\n }\n\n /** Get the GainNode used to play the audio. Can be used to attach filters. */\n public getGainNode(): GainNode {\n return this.gainNode\n }\n\n /** Get decoded audio */\n public getChannelData(): Float32Array[] {\n const channels: Float32Array[] = []\n if (!this.buffer) return channels\n const numChannels = this.buffer.numberOfChannels\n for (let i = 0; i < numChannels; i++) {\n channels.push(this.buffer.getChannelData(i))\n }\n return channels\n }\n\n /**\n * Imitate `HTMLElement.removeAttribute` for compatibility with `Player`.\n */\n public removeAttribute(attrName: string) {\n switch (attrName) {\n case 'src':\n this.src = ''\n break\n case 'playbackRate':\n this.playbackRate = 0\n break\n case 'currentTime':\n this.currentTime = 0\n break\n case 'duration':\n this.duration = 0\n break\n case 'volume':\n this.volume = 0\n break\n case 'muted':\n this.muted = false\n break\n }\n }\n}\n\nexport default WebAudioPlayer\n" }, { "path": "tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"target\": \"ES6\",\n \"lib\": [\n \"ESNext\",\n \"DOM\"\n ],\n \"allowUmdGlobalAccess\": false,\n \"declaration\": true,\n \"outDir\": \"./dist\",\n \"esModuleInterop\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"strict\": true,\n \"skipLibCheck\": true\n },\n \"exclude\": [\n \"node_modules\",\n \"cypress\",\n \"dist\"\n ]\n}\n" }, { "path": "tsconfig.test.json", "content": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"types\": [\"jest\", \"node\"],\n \"module\": \"ESNext\"\n }\n}\n" } ]