diff --git a/.babelrc b/.babelrc new file mode 100644 index 000000000..1918abd3d --- /dev/null +++ b/.babelrc @@ -0,0 +1,22 @@ +{ + "presets": [ + ["@babel/preset-env", { + "targets": "last 3 version", + "debug": false, + "modules": "commonjs" + }] + ], + "plugins": ["@babel/plugin-proposal-class-properties", "add-module-exports"], + + "env": { + "test": { + "plugins": [ + ["istanbul", { + "exclude": [ + "spec/**/*.spec.js" + ] + }] + ] + } + } +} diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 000000000..48a18f15f --- /dev/null +++ b/.editorconfig @@ -0,0 +1,11 @@ +# http://editorconfig.org + +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 4 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true diff --git a/.esdoc.json b/.esdoc.json new file mode 100644 index 000000000..1b66744c8 --- /dev/null +++ b/.esdoc.json @@ -0,0 +1,51 @@ +{ + "source": "./src", + "destination": "./doc", + "plugins": [ + { + "name": "esdoc-standard-plugin" + }, + { + "name": "esdoc-brand-plugin" + }, + { + "name": "esdoc-accessor-plugin", + "option": { + "access": ["public", "protected"], + "autoPrivate": true + } + }, + { + "name": "esdoc-ecmascript-proposal-plugin", + "option": { + "classProperties": true, + "objectRestSpread": true, + "exportExtensions": true + } + }, + { + "name": "esdoc-coverage-plugin", + "option": { + "enable": true, + "kind": [ + "class", + "method", + "member", + "get", + "set", + "constructor", + "function", + "variable" + ] + } + }, + { + "name": "esdoc-integrate-test-plugin", + "option": { + "source": "./spec/", + "interfaces": ["describe", "it", "context", "suite", "test"], + "includes": ["(spec|Spec|test|Test)\\.js$"] + } + } + ] +} diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 000000000..0ea8beafa --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,59 @@ +/* eslint-disable */ +module.exports = { + extends: ['eslint:recommended'], // extending recommended config and config derived from eslint-config-prettier + parser: '@babel/eslint-parser', + globals: { + WaveSurfer: true, + Float32Array: true, + Uint32Array: true, + Promise: true, + Proxy: true, + Symbol: true, + Uint8Array: true, + ArrayBuffer: true, + __VERSION__: true + }, + env: { + browser: true, + commonjs: true + }, + rules: { + eqeqeq: 'off', + 'semi': 2, + 'curly': "error", + "indent": ["error", 4, { + "ignoredNodes": ["TemplateLiteral"], + "SwitchCase": 1 + }], + 'comma-dangle': ["error", "never"], + 'comma-spacing': ["error", { "before": false, "after": true }], + 'no-console': 1, + 'no-unused-vars': 'off', + 'no-var': 'error', + 'no-unreachable': 2, + 'no-extra-semi': "error", + 'no-multi-spaces': "error", + 'no-multiple-empty-lines': "error", + 'space-infix-ops': "error", + 'valid-jsdoc': [2, { + 'requireReturn': false, + 'requireReturnType': false + }], + 'no-trailing-spaces': "error", + 'no-dupe-keys': "error", + 'require-jsdoc': 2, + 'no-duplicate-imports': "error", + 'space-before-function-paren': ["error", "never"], + 'keyword-spacing': ["error", {"before": true}] + }, + 'overrides': [ + { + 'files': ['example/**/*.js', 'spec/**/*.js'], + 'rules': { + 'no-var': 'off', + 'no-console': 'off', + 'require-jsdoc': 0, + 'valid-jsdoc': 0 + } + }] +}; diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 000000000..1b228c556 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1 @@ +github: [wavesurfer-js] diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md new file mode 100644 index 000000000..9a984ed64 --- /dev/null +++ b/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,35 @@ +# Hey, thank you for using and contributing to wavesurfer.js! + +## Need help with wavesurfer.js in your app? + +Please start a Q&A dicussion in our forum: https://github.com/wavesurfer-js/wavesurfer.js/discussions/new?category=q-a + +## Have an idea for a feature? + +Consider sharing it in the forum: https://github.com/wavesurfer-js/wavesurfer.js/discussions/new?category=ideas + +## You think you found a bug? + +### Please make sure you can check all of these points below before opening an issue: + +(You don't have to post this section) + +- [ ] I have checked [the FAQ](https://wavesurfer-js.org/faq/) and it doesn't solve my problem. +- [ ] I have checked [the documentation](https://wavesurfer-js.org/docs/) and it doesn't solve my problem +- [ ] I have searched for [already open issues](https://github.com/wavesurfer-js/wavesurfer.js/issues) which desribe my problem. + +## Please make sure to provide the following information (if applicable): + +### wavesurfer.js version(s): + + +### Browser and operating system version(s): + + +### Code needed to reproduce the issue: + +(Please reduce your code as much as possible and only post the minimum code needed to reproduce the issue. [A Code pen](http://codepen.io/) is an excellent way to share such code) + + +### (Optional) Steps in the UI to reproduce the issue: + diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 000000000..f9002b067 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,21 @@ +# Hey, thank you for contributing to wavesurfer.js! + +To review/merge open PRs it is very helpful to know as much as possible about the changes which are being introduced. Reviewing PRs is very time consuming, please be patient, it can take some time to do properly. + +**Title:** Please make sure the name of your PR is as descriptive as possible (Describe the feature that is introduced or the bug that is being fixed). + +## Please make sure you provide the information below: + +### Short description of changes: + + +### Breaking in the external API: + + +### Breaking changes in the internal API: + + +### Todos/Notes: + + +### Related Issues and other PRs: diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 000000000..1af02fc0e --- /dev/null +++ b/.github/workflows/main.yml @@ -0,0 +1,50 @@ +name: Lint & tests + +on: + push: + branches: [ master ] + pull_request: + branches: [ master ] + +jobs: + build: + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [16] + + steps: + - uses: actions/checkout@v3 + - name: Update system + run: sudo apt-get update + - name: Install system dependencies + run: sudo apt-get install -y ubuntu-restricted-addons chromium-codecs-ffmpeg-extra gstreamer1.0-libav gstreamer1.0-plugins-ugly gstreamer1.0-vaapi + - name: Using Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v3 + with: + node-version: ${{ matrix.node-version }} + - name: Cache Node.js modules + uses: actions/cache@v3 + with: + # npm cache files are stored in `~/.npm` on Linux/macOS + path: ~/.npm + key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }} + restore-keys: | + ${{ runner.OS }}-node- + ${{ runner.OS }}- + - name: Install Node.js modules + run: npm install + - name: Lint + run: npm run lint + - name: Build + run: npm run build + - name: Test + run: npm run test + - name: Coveralls + uses: coverallsapp/github-action@master + with: + path-to-lcov: ./coverage/lcov/lcov.info + github-token: ${{ secrets.GITHUB_TOKEN }} + - name: Documentation + run: npm run doc diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml new file mode 100644 index 000000000..6553e0e3e --- /dev/null +++ b/.github/workflows/publish.yml @@ -0,0 +1,66 @@ +name: Release + +on: + push: + branches: + - master + +permissions: + contents: write + +jobs: + publish-npm: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v3 + with: + fetch-depth: 0 + + - name: Extract version + id: version + run: | + OLD_VERSION=$(npm show wavesurfer.js version) + NEW_VERSION=$(node -p 'require("./package.json").version') + if [ $NEW_VERSION != $OLD_VERSION ]; then + echo "New version $NEW_VERSION detected" + echo "version=$NEW_VERSION" >> $GITHUB_OUTPUT + git log "$OLD_VERSION"..HEAD --pretty=format:"* %s" > TEMP_CHANGELOG.md + else + echo "Version $OLD_VERSION hasn't changed, skipping the release" + fi + + - name: Create a git tag + if: ${{ steps.version.outputs.version }} + run: git tag $NEW_VERSION && git push --tags + env: + NEW_VERSION: ${{ steps.version.outputs.version }} + + - name: GitHub release + if: ${{ steps.version.outputs.version }} + uses: actions/create-release@v1 + id: create_release + with: + draft: false + prerelease: false + release_name: ${{ steps.version.outputs.version }} + tag_name: ${{ steps.version.outputs.version }} + body_path: TEMP_CHANGELOG.md + env: + GITHUB_TOKEN: ${{ github.token }} + + - uses: actions/setup-node@v3 + if: ${{ steps.version.outputs.version }} + with: + node-version: '16.x' + registry-url: 'https://registry.npmjs.org' + + - name: Install dependencies + if: ${{ steps.version.outputs.version }} + run: npm install + + - name: Publish to NPM + if: ${{ steps.version.outputs.version }} + env: + NODE_AUTH_TOKEN: ${{ secrets.npm_token }} + run: npm publish diff --git a/.gitignore b/.gitignore index 561f4da4f..01bc09791 100644 --- a/.gitignore +++ b/.gitignore @@ -1,11 +1,19 @@ -dist/wavesurfer.dev.js -dist/plugin/*.js -!/dist/plugin/*.min.js +/dist + /node_modules /bower_components /npm-debug.log -/.grunt /coverage /_SpecRunner.html +/doc +/_site + .DS_Store .idea +.project +.chrome +.build_cache +.pydevproject + +package-lock.json +.package.json.swp diff --git a/.htmlhintrc b/.htmlhintrc new file mode 100644 index 000000000..ef864113a --- /dev/null +++ b/.htmlhintrc @@ -0,0 +1,12 @@ +{ + "tagname-lowercase": true, + "attr-lowercase": true, + "attr-value-double-quotes": false, + "doctype-first": false, + "tag-pair": true, + "spec-char-escape": false, + "id-unique": true, + "src-not-empty": true, + "attr-no-duplication": true, + "title-require": true +} diff --git a/.jscsrc b/.jscsrc deleted file mode 100644 index 0ca4de394..000000000 --- a/.jscsrc +++ /dev/null @@ -1,7 +0,0 @@ -{ - "disallowTrailingWhitespace": true, - "disallowMixedSpacesAndTabs": true, - "requirePaddingNewLinesAfterUseStrict": true, - "requireSpaceAfterComma": true, - "requireSpaceBetweenArguments": true -} \ No newline at end of file diff --git a/.npmignore b/.npmignore index 8e8929995..ea8c75d02 100644 --- a/.npmignore +++ b/.npmignore @@ -1,3 +1,3 @@ -/dist/wavesurfer.min.js.map -/dist/wavesurfer.amd.js -/dist/wavesurfer.min.js +# Intentionally left blank, so that npm does not ignore anything by default, +# but relies on the package.json "files" array to explicitly define what ends +# up in the package. diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 93ef71058..000000000 --- a/.travis.yml +++ /dev/null @@ -1,10 +0,0 @@ -language: node_js -sudo: false -before_install: - - npm install -g grunt-cli - - export CHROME_BIN=chromium-browser - - export DISPLAY=:99.0 - - sh -e /etc/init.d/xvfb start -install: npm install -script: - - grunt diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 000000000..d118a10a5 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,18 @@ +{ + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}", + "breakOnLoad": true, + "sourceMaps": true, + "sourceMapPathOverrides": { + "webpack://WaveSurfer.[name]/./*": "${webRoot}/*", + "webpack://WaveSurfer/./*": "${webRoot}/*", + } + } + ] +} diff --git a/CHANGES.md b/CHANGES.md index aad51d344..cc40315b2 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -1,8 +1,519 @@ wavesurfer.js changelog ======================= +6.6.3 (04.04.2023) +------------------ +- Markers plugin: + - allow removing markers by passing a marker object (#2749) + - add getMarkers function (#2743) +- Docs: version the unpkg script in readme (#2746) +- Refactor: remove scriptNode (#2706) + +6.6.2 (24.03.2023) +------------------ +- Revert "Zoom optimisation for Waves and matching implementation for Spectrograms (#2646)" +- Fix: avoid exit 1 in CI script (#2734) + +6.6.1 (18.03.2023) +------------------ +- Fix: NPM publish in the CI job (#2727) + - Fix: avoid exit 1 in CI script (#2734) +- Docs: add a video tutorial link to the readme (#2724) + +6.6.0 (14.03.2023) +------------------ +- Zoom optimisation for Waves and matching implementation for Spectrograms (#2646) +- Fix: release workflow permissions (#2709) + +6.5.2 (12.03.2023) +------------------ +- Regions plugin: + - Fix undefined content element on remove (#2713) + +6.5.0 (11.03.2023) +------------------ +- Regions plugin: + - Improved delta calculation (resize end) (#2641) + - Editable text in regions (#2521): + - 2 new params: + - `{contentEditable: true}` allows to display/add/edit text in regions upon the waveform + - `{removeButton: true}` displays remove button in regions + - New example -- video annotation using `{contentEditable: true}` and `{removeButton: true}` +- Fix iphone silent switch webaudio mute (#2667) +- Respect mute state when changing volume during mute (#2502) +- Proxy HTMLMediaElement's 'waiting' event through MediaElement backend. (#2691) +- Chores: + - Docs: update the issue template and wavesurfer links (#2671) + - Add FUNDING.yml to enable GitHub Sponsors (#2668) + - Update development dependencies + +6.4.0 (05.11.2022) +------------------ +- Markers plugin: + - Check for event after every add/remove (#2560) + - Add tooltip (#2595) +- Cursor plugin: + - Fix crash when `destroy` is called before `ready` event fired (#2606) + +6.3.0 (03.10.2022) +------------------ +- Fix `barMinHeight` option not setting the minimum bar height properly (#2522) +- Regions plugin: + - Restore support for one drag selection for all channels (#2529) +- Markers plugin: + - Add support for a context menu event on a marker (#2546) +- Spectrogram plugin: Make labels have position: absolute instead of fixed (#2542) + +6.2.0 (16.05.2022) +------------------ +- Fix `clientWidth` error in responsive mode (#2498) +- Cursor plugin: + - Fix `TypeError` when `showTime: undefined` (#2501) +- Spectrogram plugin: + - Fix to have consistent CSS height regardless of device pixel ratio (#2507) + - Added `height` configuration option to control CSS height of the view, + which will scale to fill + - Frequency label display is `fixed` instead of `absolute` to enable + consistent size on hi-dpi displays + +6.1.0 (31.03.2022) +------------------ +- Fix many calls to `setSinkId` resulting in no sound (#2481) +- Optimize responsive resize to avoid unnecessarily firing redraw on unpainted waveforms (#2485) +- Minimap plugin: + - Remove waveform of previous audio when starting to load new audio (#2479) + - Changed regions function name to resolve ambiguities (#2482) + +6.0.4 (09.03.2022) +------------------ +- Spectrogram plugin: + - Add `frequencyMin`, `frequencyMax` option to scale frequency axis. + And set default 12kHz range to draw spectrogram like 5.x (#2455) +- Timeline plugin: + - Fix rendering issue for negative `offset` values (#2463) + +6.0.3 (01.03.2022) +------------------ +- Cursor plugin: + - Fix type documentation for `followCursorY` and `opacity` options (#2459) + - Fix destroying cursor and showTime dom nodes (#2460) + +6.0.2 (20.02.2022) +------------------ +- Fix regression and restore support for passing a `CanvasGradient` to + `setWaveColor()` (#2448) +- Regions plugin: + - Fixed the type annotation of `maxRegions` in the regions plugin (#2454) + +6.0.1 (13.02.2022) +------------------ +- Fixed a regression that broke bars rendering when using a certain format for + the peaks array (#2439) + +6.0.0 (07.02.2022) +------------------ +- Add additional type to `waveColor` and `progressColor` parameters to support linear + gradients (#2345) +- Add `hideCursor` option to hide the mouse cursor when hovering over the waveform (#2367) +- Add optional `channelIdx` parameter to `setWaveColor`, `getWaveColor`, `setProgressColor` + and `getProgressColor` methods (#2391) +- Improved drawing waveform with bars, now bars height is the maximum peak value in + range (#2428) +- Workaround for `seekTo` occasionally crashing on Firefox (#1228, #2431) +- Markers plugin: Add the ability to set markers as draggable using param `draggable=true`, + `marker-drag` and `marker-drop` events will be triggered (#2398) +- Regions plugin: + - Increase region z-index to fix stacking inconsistencies (#2353) + - Check `maxLength` before resizing region (#2374) + - Add support for drag selection to be separated for each channel (#2380) + - Allow `formatTimeCallback` from plugin params to be used (#2294) + - Use of default `edgeScrollWidth` value no longer dependent on regions being created via + plugin params (#2401) + - Disable `region-remove` event emission during plugin teardown (#2403) +- Spectrogram plugin: + - Remove inaccurate frequency doubling of spectrogram (#2232) + - Support for `splitChannels` option to draw spectrogram for each channel (#2424) + +5.2.0 (16.08.2021) +------------------ +- Add `ignoreSilenceMode` option to ignore iOS hardware silence switch when using the + `WebAudio` backend (#1864) +- Fixed unhandled `Failed to execute 'stop' on 'AudioScheduledSourceNode'` error (#1473) +- Fixed unhandled `Cannot read property 'decodeArrayBuffer' of null` error (#2279) +- Timeline plugin: fixed unhandled `null is not an object (evaluating context.canvas)` + error in Safari v14 (#2333) +- Regions plugin: add `direction` and `action` fields to the `region-updated` event + params (#2339) + +5.1.0 (20.06.2021) +------------------ +- Markers plugin: + - Add the ability to use custom HTML elements in place of the default marker icon by + passing the new `markerElement` parameter to the marker constructor (#2269) + - Custom HTML elements are now centered over the marker line (#2298) + - Trigger `marker-click` event on wavesurfer (#2287) +- Regions plugin: handle rollover cursor bug fix (#2293) +- Timeline plugin: prevent calling `Canvas` context methods on `null` values (#2299) +- Spectrogram plugin: prevent calling `Canvas` context methods on `null` values (#2299) + +5.0.1 (05.05.2021) +------------------ +- Fix removing DOM element on `destroy()` (#2258) + +5.0.0 (02.05.2021) +------------------ +- Add new `vertical` parameter enabling displaying waveforms vertically (#2195) +- Fixed `exportPCM()` to return a Promise containing valid JSON data with `noWindow` + (#1896, #1954) +- Nullify `onaudioprocess` on remove to not execute in background (#2218) +- Playhead plugin: add a new plugin that allows the setting of a independent + "play head", or song-start position. (#2209) +- Markers plugin: fix a bug where markers at the end of a track would cause + incorrect click-to-seek behavior (#2208) +- Regions plugin: + - Fix mouseup not firing if click & drag a region handle & release outside the + browser window (#2213) + - Added new `showTooltip` param allowing disabling region `title` tooltip (#2213) + +4.6.0 (04.03.2021) +------------------ +- Webaudio: fix `decodeAudioData` handling in Safari (#2201) +- Markers plugin: add new plugin that allows for timeline markers (#2196) + +4.5.0 (14.02.2021) +------------------ +- Split channels: `overlay` param now properly displays a single canvas (#2161) +- Fixed memory leak with `destroy()` in `WebAudio` backend (#1940) +- Fixed `WaveSurfer.load(url)` not working when passing a HTMLMediaElement as + the url parameter, with the WebAudio backend. +- Microphone plugin: remove deprecated `MediaStream.stop` call (#2168) +- Regions plugin: stop region dragging when mouse leaves canvas (#2158) + +4.4.0 (13.01.2021) +------------------ + +- Use Webpack 5 for build (#2093) +- Fix seeking issues for `WebAudio` backend (#2149) +- Use `splitChannelsOptions` to color wave bars (#2150) + +4.3.0 (12.12.2020) +------------------ + +- Add `relativeNormalization` option to maintain proportionality between + waveforms when `splitChannels` and `normalize` are `true` (#2108) +- WebAudio backend: set playback rate modifying directly the playback + property of the source node (#2118) +- Spectrogram plugin: Use `ImageData` to draw pixel-by-pixel (#2127) + +4.2.0 (20.10.2020) +------------------ + +- Fix performance issues with `seekTo` while audio is playing (#2045) +- Trigger `waveform-ready` event when provided peaks are drawn (#2031) + +4.1.1 (24.09.2020) +------------------ + +- Revert Code cleanup for Observer class (#2069) + +4.1.0 (16.09.2020) +------------------ + +- Don't call HTMLMediaElement#load when given peaks and preload == 'none'. + Prevents browsers from pre-fetching audio (#1969, #1990) +- `seekTo` bugfix inc. basic unit tests (#2047) +- Fix unhandled `AbortError` thrown during `cancelAjax` (#2063) +- Remove `util.extend`: deprecated since v3.3.0 (#1995) +- Remove `util.ajax`: deprecated since v3.0.0 (#2033) +- Regions plugin: + - Removed `col-resize` cursor when resize is disabled (#1985) + - Improved and unified loop playback logic (#1868) + - Check `minLength` before resizing region (#2001) + - Dragging and resizing will continue outside canvas (#2006) + - `regionsMinLength` parameter to assign a min length to those regions for which the `minLength` is not specified (#2009) + - Revert PR #1926 click propagation on regions. Use event parameter passed + in `region-click` if you need `stopPropagation`. (#2024) + - Edgescroll works for both edges (#2011) +- Microphone plugin: move to separate directory (#1997) +- Minimap plugin: move plugin to separate directory (#1999) +- Cursor plugin: move plugin to separate directory (#1998) +- Elan plugin: move plugin to separate directory (#2019) +- Spectrogram plugin: move to separate directory (#1996) +- Mediasession plugin: move to separate directory (#2020) +- Timeline plugin: move to separate directory (#2018) + +4.0.1 (23.06.2020) +------------------ + +- Fixes for event handling with certain plugins (regions, microphone). + The crash would have involved '_disabledEventEmissions' (#1975) + +4.0.0 (21.06.2020) +------------------ + +- Fixed mediaelement-webaudio playback under Safari (#1964) +- Fixed the `destroy` method of the `MediaElementWebAudio` backend. Instead of + destroying only the media element, the audio nodes are disconnected and the + audio context is closed. This was done by splitting the `destroy` method of the + `WebAudio` backend, so it calls the new `destroyWebAudio` method to cancel + everything related to WebAudio (#1927) +- Removed private methods of plugins and generalized plugins' access, so they can be extended creating custom + plugins (#1928) +- Added plugin inheritance example (#1921) +- Added compatibility for Gatsby and other static site generators (#1938) +- Minimap plugin: added the ability to use a customized regions plugin using a new parameter + `regionsPluginName` (#1943) +- Fixed waveform display to not always connect to the sample=0 point (#1942) +- Elan plugin: optional params.tiers (#1910) +- Regions plugin: + - Split `regions.js` into `region.js` (containing `Region` class) and `index.js`. + Both files moved into the `src/plugin/regions` directory. This makes it easier + to extend these classes and use them in custom plugins (#1934) + - Fixed channelCount assignment (#1858) + - Fixed click propagation issue (#1926) + - Fixed switch loop region (#1929) + - Added ability to specify time format for Regions tooltip using timeformatCallback (#1948) +- Add `splitChannelsOptions` param and `setFilteredChannels` method to configure how channels are drawn (#1947) +- Added checks in `minimap` plugin for `drawer` presence (#1953) +- Add `setDisabledEventEmissions` method to optionally disable calls to event handlers for specific events (#1960) +- Drawer: removed private methods to allow overriding them (#1962) +- Add optional `setMute` method to backends to fix muting behavior with the `MediaElement` backend (#1966) + +3.3.3 (16.04.2020) +------------------ + +- Change default `desynchronized` drawing context attribute to `false` (#1908) + +3.3.2 (07.04.2020) +------------------ + +- Use `requestAnimationFrame` for clearWave (#1884) +- Fix `Unable to get property 'toLowerCase' of undefined or null reference` + in IE11 (#1771) +- Spectrogram plugin: correct the hamming windfunc formula (#1850) + +3.3.1 (13.01.2020) +------------------ + +- Regions plugin: + - Improve handles style support (#1839) + - Add support for a context menu event on a region (#1844) + - Fix for handle position when using `channelIdx` param (#1845) + +3.3.0 (29.12.2019) +------------------ + +- `wavesurfer.exportPCM` now accepts an optional `end` argument and returns + a Promise (#1728) +- Add `wavesurfer.setPlayEnd(position)` to set a point in seconds for + playback to stop at (#1795) +- Add `drawingContextAttributes` option and enable canvas `desynchronized` + hint (#1642) +- Add `barMinHeight` option (#1693) +- Expose progress to the `dblclick` event (#1790) +- Deprecate `util.extend` and replace usage with `Object.assign` (#1825) +- Regions plugin: + - Add `start` argument to `play` and `playLoop` methods (#1794) + - Add `maxRegions` option to limit max numbers of created regions (#1793) + - Don't assign to module object (#1823) + - Allow setting the `handleColor` inside `addRegion` (#1798) + - Disable drag selection before enabling it (#1698) + - Add `channelIdx` option to select specific channel to draw on (#1829) + - Refactor for improved readability (#1826) +- Cursor plugin: fix time visibility (#1802) + +3.2.0 (24.10.2019) +------------------ + +- New `MediaElementWebAudio` backend (#1767): + - Allows you to use Web Audio API with big audio files, loading audio + like with MediaElement backend (HTML5 audio tag), so you can use the + same methods of MediaElement backend for loading and playback. This way, + the audio resource is not loaded entirely from server, but in ranges, + allowing you to use WebAudio features, like filters, on audio files with + a long duration. You can also supply peaks data, so the entire audio file + does not have to be decoded. + For example: + ``` + wavesurfer.load(url | HTMLMediaElement, peaks, preload, duration); + wavesurfer.play(); + wavesurfer.setFilter(customFilter); + ``` +- Add `barRadius` option to create waveforms with rounded bars (#953) +- Throw error when the url parameter supplied to `wavesurfer.load()` + is empty (#1773, #1775) +- Specify non-minified wavesurfer.js in `main` entry of `package.json` (#1759) +- Add `dblclick` event listener to wavesurfer wrapper (#1764) +- Fix `destroy()` in `MediaElement` backend (#1778) +- Cursor plugin: flip position of time text to left of the cursor where needed + to improve readability (#1776) +- Regions plugin: change region end handler position (#1762, #1781) + +3.1.0 (26.09.2019) +------------------ + +- Add `autoCenter` and `autoCenterRate` options (#1699) +- Make sure `isReady` is true before firing the `ready` event (#1749) +- Improve fetch error messages (#1748) +- Use `MediaElement` backend for browsers that don't support WebAudio (#1739) +- Regions plugin: + - Use `isResizing` and `isDragging` to filter events in + region-updated listener (#1716) + - Fix `playLoop` and `loop` option for clips with duration <15s (#1626) +- Spectrogram plugin: fix variable name in click handler (#1742) +- Minimap plugin: fix left/width calculations for regions on retina/4k + screens (#1743) +- New example: video-annotation (#1726) + +3.0.0 (11.07.2019) +------------------ + +- Add `wavesurfer.getActivePlugins()`: return map of plugins + that are currently initialised +- Replace usage of `util.ajax` with `util.fetchFile` (#1365) +- Update progress when seeking with HTML media controls (#1535) +- Make sure mute/volume is updated when using `MediaElement` backend (#1615) +- Refactor `MultiCanvas` and add `CanvasEntry` class (#1617) +- Fix `wavesurfer.isReady`: make it a public boolean, the + broken `isReady` method is removed (#1597) +- Add support for `Blob` output type in `wavesurfer.exportImage` (#1610) +- Fix fallback to Audio Element in browsers that don't support Web Audio (#1614) +- `util.getId()` now accepts a `prefix` argument (#1619) +- Improve documentation for `xhr` option (#1656) +- Fix: the `progressWave` should not be rendered when specifying the same + value for the `progressColor` and `waveColor` options (#1620) +- Cursor plugin: + - Add `formatTimeCallback` option + - Add `followCursorY` option (#1605) + - Remove deprecated `enableCursor` method (#1646) + - Hide the cursor elements before first mouseover if `hideOnBlur` is set (#1663) +- Spectrogram plugin: + - Fix `ready` listener when loading multiple audio files (#1572) + - Allow user to specify a colorMap (#1436) +- Regions plugin: + - Fix `ready` listener when loading multiple audio files (#1602) + - Add `snapToGridInterval` and `snapToGridOffset` options (#1632) + - Allow drawing regions over existing regions, if the underlying ones are not + draggable or resizable (#1633) + - Calculate the duration at event time to allow predefined regions to be + dragged and resized (#1673) + - Remove deprecated `initRegions` method (#1646) +- Timeline plugin: fix `ready` listener when loading multiple + audio files +- Minimap plugin: remove deprecated `initMinimap` method (#1646) + +Check `UPGRADE.md` for backward incompatible changes since v2.x. + +2.2.1 (18.03.2019) +------------------ + +- Add `backgroundColor` option (#1118) +- Spectrogram plugin: fix click handler (#1585) +- Cursor plugin: fix `displayTime` (#1589) + +2.2.0 (07.03.2019) +------------------ + +- Add `rtl` option (#1296) +- Fix peaks rendering issue on zooming and scrolling multicanvas (#1570) +- Add `duration` option to specify an explicit audio length (#1441) +- Spectrogram plugin: fix event listener removal (#1571) +- Regions plugin: display regions before file load using `duration` + option (#1441) +- Build: switch to terser-webpack-plugin for minifying + +2.1.3 (21.01.2019) +------------------ + +- Fix removeOnAudioProcess for Safari (#1215, #1367, #1398) + +2.1.2 (06.01.2019) +------------------ + +- Fix computing peaks when buffer is not set (#1530) +- Cursor plugin: fix displayed time (#1543) +- Cursor plugin: document new params (#1516) +- Add syntax highlighting in examples (#1522) + +2.1.1 (18.11.2018) +------------------ + +- Fix order of arguments for PluginClass.constructor (#1472) +- Microphone plugin: Safari support (#1377) +- Minimap plugin: fix styling issues and add support for zooming (#1464) +- Timeline plugin: add duration parameter handling (#1491) +- Cursor plugin: add showTime option (#1143) +- Fix: progress bar did not reach 100% when audio file is small (#1502) + +2.1.0 (29.09.2018) +------------------ + +- Add wavesurfer.js logo, created by @entonbiba (#1409) +- Library version number is now available as `WaveSurfer.VERSION` (#1430) +- Fix `setSinkId` that used deprecated API (#1428) +- Set `isReady` attribute to false when emptying wavesufer (#1396, #1403) +- Microphone plugin: make it work in MS Edge browser (#627) +- Timeline plugin: display more tick marks as the user zooms in closely (#1455) +- Cursor plugin: fix `destroy` (#1435) + +2.0.6 (14.06.2018) +------------------ + +- Build library using webpack 4 (#1376) +- Add `audioScriptProcessor` option to use custom script processor node (#1389) +- Added `mute` and `volume` events (#1345) + +2.0.5 (26.02.2018) +------------------ + +- Fix `util.ajax` on iterating `requestHeaders` (#1329) +- Add version information to distributed files (#1330) +- Regions plugin: prevent click when creating / updating region (#1295) +- Add `wavesurfer.isReady` method (#1333) + +2.0.4 (14.02.2018) +------------------ + +- Added `xhr` option to configure util.ajax for authorization (#1310, #1038, #1100) +- Fix `setCurrentTime` method (#1292) +- Fix `getScrollX` method: Check bounds when `scrollParent: true` (#1312) +- Minimap plugin: fix initial load, canvas click did not work (#1265) +- Regions plugin: fix dragging a region utside of scrollbar (#430) + +2.0.3 (22.01.2018) +------------------ + +- Added support for selecting different audio output devices using `setSinkId` (#1293) +- Replace deprecated playbackRate.value setter (#1302) +- Play method now properly returns a Promise (#1229) + +2.0.2 (10.01.2018) +------------------ + +- Added `barGap` parameter to set the space between bars (#1058) +- Replace deprecated gain.value setter (#1277) +- MediaElement backend: Update progress on pause events (#1267) +- Restore missing MediaSession plugin (#1286) + +2.0.1 (18.12.2017) +------------------ + +- Core library and the plugins were refactored to be modular so it can be used with a module bundler +- Code updated to ES6/ES7 syntax and is transpiled with babel and webpack +- New plugin API +- `MultiCanvas` renderer is now the default +- Added getters and setters for height and color options (#1145) +- Introduce an option to prevent removing media element on destroy (#1163) +- Added duration parameter for the load function (#1239) +- New soundtouch.js filter to preserve pitch when changing tempo (#149) +- Add `getPlaybackRate` method (#1022) +- Switched to BSD license (#1060) +- Added `setCurrentTime` method +- Added `util.debounce` (#993) + 1.2.4 (11.11.2016) ------------------ + - Fix a problem of Web Audio not playing in Safari on initial load (#749) 1.2.3 (09.11.2016) @@ -14,7 +525,7 @@ wavesurfer.js changelog 1.2.2 (31.10.2016) ------------------ -- Determistic way to mute and unmute a track (#841) +- Deterministic way to mute and unmute a track (#841) - Replace jasmine with karma / jasmine test suite (#849) - Regions plugin: fix a bug when clicking on scroll-bar in Firefox (#851) diff --git a/Gruntfile.js b/Gruntfile.js deleted file mode 100644 index e34ff2ecd..000000000 --- a/Gruntfile.js +++ /dev/null @@ -1,164 +0,0 @@ -/*global module:false*/ -module.exports = function (grunt) { - var path = require('path'); - - // Project configuration. - grunt.initConfig({ - // Metadata. - pkg: grunt.file.readJSON('package.json'), - banner: '/*! <%= pkg.title || pkg.name %> <%= pkg.version %> (<%= new Date().toGMTString() %>)\n' + - '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' + - '* @license <%= pkg.license %> */', - // Task configuration. - clean : { - build: [ 'dist' ] - }, - concat: { - options: { - stripBanners: true - }, - dist: { - src: [ - 'src/wavesurfer.js', - 'src/util.js', - 'src/webaudio.js', - 'src/mediaelement.js', - 'src/drawer.js', - 'src/drawer.*.js', - 'src/html-init.js' - ], - dest: 'dist/wavesurfer.js' - } - }, - connect: { - options: { - base: '.', - port: 9000, - // Change this to '0.0.0.0' to access the server from outside. - hostname: 'localhost', - keepalive: true - } - }, - /* The build has three steps: - - concatenation (wavesurfer.js) - - UMD wrapping (wavesurfer.js) - - uglification (wavesurfer.min.js) */ - umd: { - main: { - options: { - src: '<%= concat.dist.dest %>', - dest: 'dist/wavesurfer.js', - amdModuleId: 'wavesurfer', - objectToExport: 'WaveSurfer', - globalAlias: 'WaveSurfer' - } - }, - plugins: { - src: 'plugin/*.js', - dest: 'dist', - deps: { - 'default': [ 'WaveSurfer' ], - amd: [ 'wavesurfer' ], - cjs: [ 'wavesurfer.js' ], - global: [ 'WaveSurfer' ] - } - } - }, - uglify: { - options: { - banner: '<%= banner %>' - }, - dist: { - options: { - sourceMap: 'dist/wavesurfer.min.js.map', - sourceMapRoot: '/' - }, - src: '<%= umd.main.options.dest %>', - dest: 'dist/wavesurfer.min.js' - }, - plugins: { - files: [{ - expand: true, - cwd: 'dist', - src: 'plugin/*.js', - dest: 'dist/', - rename: function (dest, src) { - if (src.indexOf('.min.js') == -1) { - return dest + src.replace('.js', '.min.js'); - } - return dest + src; - } - }] - } - }, - jshint: { - options: { - curly: true, - eqeqeq: false, - eqnull: true, - quotmark: 'single', - browser: true, - // Missing "use strict" statement. - strict: false, - globals: { - WaveSurfer: true, - Promise: true - } - }, - ignore_warning: { - options: { - '-W004': true, - // Expected an assignment or function call and instead saw an expression - '-W030': true, - // {a} used out of scope - '-W038': true, - // Use '!==' to compare with '' - '-W041': true, - '-W056': true, - // Missing '()' invoking a constructor. - '-W058': true, - '-W079': true, - // Use the function form of 'use strict' - '-W097': true - }, - src: [ '<%= concat.dist.src %>', 'plugin/*.js', 'spec/*.spec.js' ] - } - }, - jscs: { - src: [ '<%= concat.dist.src %>', 'plugin/*.js', 'spec/*.spec.js' ], - options: { - config: '.jscsrc', - fix: false, // Autofix code style violations when possible. - requireCurlyBraces: [ 'if' ] - } - }, - karma: { - e2e: { - configFile: 'karma.conf.js' - } - } - }); - - // ========================================================================== - // TASKS - // ========================================================================== - - // These plugins provide necessary tasks. - grunt.loadNpmTasks('grunt-contrib-concat'); - grunt.loadNpmTasks('grunt-contrib-uglify'); - grunt.loadNpmTasks('grunt-contrib-jshint'); - grunt.loadNpmTasks('grunt-karma'); - grunt.loadNpmTasks('grunt-contrib-connect'); - grunt.loadNpmTasks('grunt-umd'); - grunt.loadNpmTasks('grunt-jscs'); - grunt.loadNpmTasks('grunt-contrib-clean'); - - // Default task. - grunt.registerTask('default', [ - 'clean', 'jshint', 'jscs', 'concat', 'umd', 'uglify', 'test' - ]); - - // Dev - grunt.registerTask('dev', [ 'clean', 'concat', 'uglify', 'jscs', 'connect' ]); - grunt.registerTask('test', [ 'karma:e2e' ]); -}; diff --git a/LICENSE b/LICENSE new file mode 100644 index 000000000..88998ae68 --- /dev/null +++ b/LICENSE @@ -0,0 +1,29 @@ +BSD 3-Clause License + +Copyright (c) 2012-2023, katspaugh and contributors +All rights reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + +* Redistributions of source code must retain the above copyright notice, this + list of conditions and the following disclaimer. + +* Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. + +* Neither the name of the copyright holder nor the names of its + contributors may be used to endorse or promote products derived from + this software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" +AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE +IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE +DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE +FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL +DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR +SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER +CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, +OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. diff --git a/README.md b/README.md index 4373b23d5..62a332d20 100644 --- a/README.md +++ b/README.md @@ -1,33 +1,53 @@ # [wavesurfer.js](https://wavesurfer-js.org) +--- + +✨ We're excited to introduce version 7.0.0-beta, a TypeScript rewrite of wavesurfer.js with better performance and new plugins. Give the beta version a spin and let us know what you think! Check out the [wavesurfer.ts README](https://github.com/katspaugh/wavesurfer.ts) to get started. Happy coding! ✨ + +--- + [](https://www.npmjs.com/package/wavesurfer.js) - [](https://gitter.im/katspaugh/wavesurfer.js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) + [](https://gitter.im/wavesurfer-js/wavesurfer.js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) +[](https://www.gitpoap.io/gh/wavesurfer-js/wavesurfer.js) Interactive navigable audio visualization using Web Audio and Canvas. -[](https://wavesurfer-js.org) +[](https://wavesurfer-js.org) + +See [docs](https://wavesurfer-js.org/docs) and [examples](https://wavesurfer-js.org/examples) on [wavesurfer-js.org](https://wavesurfer-js.org). -See a [tutorial](https://wavesurfer-js.org/docs) and [examples](https://wavesurfer-js.org/examples) on [wavesurfer-js.org](https://wavesurfer-js.org). +For a video tutorial, watch this [series by Live Blogger on YouTube](https://www.youtube.com/watch?v=yCmnDWCF8m0). 📺 -## Browser support -wavesurfer.js works only in [modern browsers supporting Web Audio](http://caniuse.com/audio-api). +## Questions +Have a question about integrating wavesurfer.js on your website? Feel free to ask in our forum: https://github.com/wavesurfer-js/wavesurfer.js/discussions/categories/q-a -It will fallback to Audio Element in other browsers (without graphics). You can also try [wavesurfer.swf](https://github.com/laurentvd/wavesurfer.swf) which is a Flash-based fallback. +## Quick start +Install the package: -## FAQ -### Can the audio start playing before the waveform is drawn? -Yes, if you use the `backend: 'MediaElement'` option. See here: https://wavesurfer-js.org/example/audio-element/. The audio will start playing as you press play. A thin line will be displayed until the whole audio file is downloaded and decoded to draw the waveform. +``` +npm install wavesurfer.js --save + +# or + +yarn add wavesurfer.js +``` -### Can drawing be done as file loads? -No. Web Audio needs the whole file to decode it in the browser. You can however load pre-decoded waveform data to draw the waveform immediately. See here: https://wavesurfer-js.org/example/audio-element/ (the "Pre-recoded Peaks" section). +And import it like so: +``` +import WaveSurfer from 'wavesurfer.js' +``` -## API in examples +If you're not using a package manager, simply insert the script from a CDN: +``` + +``` -Choose a container: +Create a container in your HTML: ```html
``` -Create an instance, passing the container selector and [options](https://wavesurfer-js.org/docs/options.html): + +Create an instance of wavesufer.js, passing the container selector and a few [options](https://wavesurfer-js.org/docs/options.html): ```javascript var wavesurfer = WaveSurfer.create({ @@ -55,64 +75,89 @@ wavesurfer.load('example/media/demo.wav'); See the documentation on all available [methods](https://wavesurfer-js.org/docs/methods.html), [options](https://wavesurfer-js.org/docs/options.html) and [events](https://wavesurfer-js.org/docs/events.html) on the [homepage](https://wavesurfer-js.org/docs/). -## Related projects +## Projects using wavesurfer.js -For a list of projects using wavesurfer.js, check out +For the list of projects using wavesurfer.js, check out [the projects page](https://wavesurfer-js.org/projects/). -## Development +## Contributing -[](https://www.npmjs.com/package/wavesurfer.js) -[]() -[](https://travis-ci.org/katspaugh/wavesurfer.js) +Have an idea and want to contribute to wavesurfer.js? +Please first start a discussion in the [Ideas section of our forum](https://github.com/wavesurfer-js/wavesurfer.js/discussions/categories/ideas) to coordinate with the maintainers. -Install `grunt-cli` using npm: +### Development -``` -npm install -g grunt-cli -``` +[](https://github.com/wavesurfer-js/wavesurfer.js/actions?workflow=wavesurfer.js) +[](https://coveralls.io/github/wavesurfer-js/wavesurfer.js) + Install development dependencies: ``` npm install ``` +Development tasks automatically rebuild certain parts of the library when files are changed (`start` – wavesurfer, `start:plugins` – plugins). Start a dev task and go to `localhost:8080/example/` to test the current build. -Build a minified version of the library and plugins. This command also checks -for code-style mistakes and runs the tests: +Start development server for core library: ``` -grunt +npm run start ``` -Generated files are placed in the `dist` directory. +Start development server for plugins: -Running tests only: +``` +npm run start:plugins +``` + +Build all the files. (generated files are placed in the `dist` directory.) ``` -grunt test +npm run build ``` -Creating a coverage report: +Running tests only: + +``` +npm run test +``` +Build documentation with esdoc (generated files are placed in the `doc` directory.) ``` -grunt coverage +npm run doc ``` -The HTML report can be found in `coverage/html/index.html`. +If you want to use [the VS Code - Debugger for Chrome](https://github.com/Microsoft/vscode-chrome-debug), there is already a [launch.json](.vscode/launch.json) with a properly configured ``sourceMapPathOverrides`` for you. ## Editing documentation -The homepage and the documentation are in the [`gh-pages` branch](https://github.com/katspaugh/wavesurfer.js/tree/gh-pages). Contributions to the documentation are especially welcome. +The homepage and documentation files are maintained in the [`gh-pages` branch](https://github.com/wavesurfer-js/wavesurfer.js/tree/gh-pages). Contributions to the documentation are especially welcome. + +## Releasing a new version +To release a new version and publish it to NPM, follow the steps below. + + Switch to the master branch and make sure it's up-to-date + ``` + git checkout master + git fetch --all; git reset --hard origin/master +``` + +Run the release script: +``` +yarn release +``` +This will update the version, generate a changelog, and push everything to a new branch called `release/X.X.X`. + +A browser window will open to create a PR from this new branch to the master branch. Once the PR is approved and merged, an automated workflow will kick in and publish a release both on GitHub and NPM. ## Credits -Initial idea by [Alex Khokhulin](https://github.com/xoxulin). Many -thanks to -[the awesome contributors](https://github.com/katspaugh/wavesurfer.js/contributors)! +The main maintainer:
Click on a region to enter an annotation.
Shift-click plays a region in a loop.
@@ -67,13 +67,6 @@
-
var wavesurfer = Object.create(WaveSurfer);
-
-wavesurfer.init({
+var wavesurfer = WaveSurfer.create({
container: document.querySelector('#wave'),
backend: 'MediaElement'
});
@@ -78,12 +80,14 @@ Pre-rendered Peaks
you can pass them into the load
function. This is optional–if you don't provide
any peaks,
- waserver.js will first draw a
+ wavesurfer.js will first draw a
thin line instead of a waveform, then attempt to
download the audio file via Ajax and decode it
with Web Audio if available.
-
+
+ Check the FAQ for instructions on how to generate peaks.
+
wavesurfer.load('example/media/demo.mp3');
@@ -99,11 +103,11 @@ Pre-rendered Peaks
- wavesurfer.js by katspaugh is licensed under a Creative Commons Attribution 3.0 Unported License.
+ wavesurfer.js by katspaugh is licensed under a BSD-3-Clause License.
@@ -118,7 +122,7 @@ Pre-rendered Peaks
diff --git a/example/audio-element/main.js b/example/audio-element/main.js
index 565635f2b..386db5b55 100644
--- a/example/audio-element/main.js
+++ b/example/audio-element/main.js
@@ -1,31 +1,59 @@
'use strict';
// Create an instance
-var wavesurfer = Object.create(WaveSurfer);
+var wavesurfer;
// Init & load audio file
-document.addEventListener('DOMContentLoaded', function () {
+document.addEventListener('DOMContentLoaded', function() {
// Init
- wavesurfer.init({
+ wavesurfer = WaveSurfer.create({
container: document.querySelector('#waveform'),
waveColor: '#A8DBA8',
progressColor: '#3B8686',
- backend: 'MediaElement'
+ backend: 'MediaElement',
+ mediaControls: false
+ });
+
+ wavesurfer.once('ready', function() {
+ console.log('Using wavesurfer.js ' + WaveSurfer.VERSION);
+ });
+
+ wavesurfer.on('error', function(e) {
+ console.warn(e);
});
// Load audio from URL
wavesurfer.load('../media/demo.wav');
- document.querySelector(
- '[data-action="play"]'
- ).addEventListener('click', wavesurfer.playPause.bind(wavesurfer));
-
- document.querySelector(
- '[data-action="peaks"]'
- ).addEventListener('click', function () {
- wavesurfer.load('../media/demo.wav', [
-0.0218, 0.0183, 0.0165, 0.0198, 0.2137, 0.2888, 0.2313, 0.15, 0.2542, 0.2538, 0.2358, 0.1195, 0.1591, 0.2599, 0.2742, 0.1447, 0.2328, 0.1878, 0.1988, 0.1645, 0.1218, 0.2005, 0.2828, 0.2051, 0.1664, 0.1181, 0.1621, 0.2966, 0.189, 0.246, 0.2445, 0.1621, 0.1618, 0.189, 0.2354, 0.1561, 0.1638, 0.2799, 0.0923, 0.1659, 0.1675, 0.1268, 0.0984, 0.0997, 0.1248, 0.1495, 0.1431, 0.1236, 0.1755, 0.1183, 0.1349, 0.1018, 0.1109, 0.1833, 0.1813, 0.1422, 0.0961, 0.1191, 0.0791, 0.0631, 0.0315, 0.0157, 0.0166, 0.0108
- ]);
- document.body.scrollTop = 0;
- });
+ // toggle play button
+ document
+ .querySelector('[data-action="play"]')
+ .addEventListener('click', wavesurfer.playPause.bind(wavesurfer));
+
+ // peaks button
+ document
+ .querySelector('[data-action="peaks"]')
+ .addEventListener('click', function() {
+ // load peaks from JSON file. See https://wavesurfer-js.org/faq/
+ // for instructions on how to generate peaks
+ fetch('../media/demo-peaks.json')
+ .then(response => {
+ if (!response.ok) {
+ throw new Error('HTTP error ' + response.status);
+ }
+ return response.json();
+ })
+ .then(peaks => {
+ console.log(
+ 'loaded peaks! sample_rate: ' + peaks.sample_rate
+ );
+
+ // load peaks into wavesurfer.js
+ wavesurfer.load('../media/demo.wav', peaks.data);
+ document.body.scrollTop = 0;
+ })
+ .catch(e => {
+ console.error('error', e);
+ });
+ });
});
diff --git a/example/bars/index.html b/example/bars/index.html
new file mode 100644
index 000000000..811190f0a
--- /dev/null
+++ b/example/bars/index.html
@@ -0,0 +1,169 @@
+
+
+
+
+
+ wavesurfer.js | Waveform using bars
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Bars example
+
+ Draws a waveform with bars.
+
+
+
let wavesurfer = WaveSurfer.create({
+ container: document.querySelector('#waveform'),
+ barWidth: 2,
+ barHeight: 1, // the height of the wave
+ barGap: null // the optional spacing between bars of the wave, if not provided will be calculated in legacy format
+});
+
+
+
+
+
+ Split Channel Options
+
+
+ The split channel view can be modified with the splitChannelsOptions. The waveforms can be stacked on top of each other. And colors can be added to each channel.
+
+
+
+
+
+
+
+
+
+
+
+
var wavesurfer = WaveSurfer.create({
+ container: document.querySelector('#wave'),
+ splitChannels: true,
+ splitChannelsOptions: {
+ overlay: false,
+ channelColors: {
+ 0: {
+ progressColor: 'green',
+ waveColor: 'pink'
+ },
+ 1: {
+ progressColor: 'orange',
+ waveColor: 'purple'
+ }
+ }
+ }
+});
+
+
+
+ splitChannelOptions
+
+ overlay - boolean - This determines whether channels are drawn on top of each other.
+
+
+ channelColors - object - Pass this to set colors for each channel. If the channel index is not found on the object, colors will default to the top level color params.
+
+
+ filterChannels - array - Array of channel numbers. Channels included in the array will not be drawn.
+
+
+ relativeNormalization - boolean - When normalize and splitChannels are both true the channels will be normalized individually or proportionally to each other. Defaults to false (each channel will be normalized in isolation).
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/example/bars/main.js b/example/bars/main.js
new file mode 100644
index 000000000..9fe90409c
--- /dev/null
+++ b/example/bars/main.js
@@ -0,0 +1,64 @@
+'use strict';
+
+// Create an instance
+let wavesurfer = {};
+let wavesurferWithOptions;
+
+// Init & load audio file
+document.addEventListener('DOMContentLoaded', function() {
+ wavesurfer = WaveSurfer.create({
+ container: document.querySelector('#waveform'),
+ barWidth: 2,
+ barHeight: 1,
+ barGap: null
+ });
+
+ wavesurfer.on('error', function(e) {
+ console.warn(e);
+ });
+
+ // Load audio from URL
+ wavesurfer.load('../media/demo.wav');
+
+ // Play button
+ const button = document.querySelector('[data-action="play"]');
+
+ button.addEventListener('click', wavesurfer.playPause.bind(wavesurfer));
+
+
+ // WaveSurfer with options example
+ wavesurferWithOptions = WaveSurfer.create({
+ container: document.querySelector('#waveform-with-options'),
+ barWidth: 2,
+ barHeight: 1,
+ barGap: null,
+ splitChannels: true,
+ splitChannelsOptions: {
+ overlay: false,
+ channelColors: {
+ 0: {
+ progressColor: 'green',
+ waveColor: 'pink'
+ },
+ 1: {
+ progressColor: 'orange',
+ waveColor: 'purple'
+ }
+ },
+ filterChannels: [],
+ relativeNormalization: true
+ }
+ });
+
+ wavesurferWithOptions.on('error', function(e) {
+ console.warn(e);
+ });
+
+ // Load audio from URL
+ wavesurferWithOptions.load('../media/stereo.mp3');
+
+ // Play/pause on button press
+ document
+ .getElementById('play-button')
+ .addEventListener('click', wavesurferWithOptions.playPause.bind(wavesurferWithOptions));
+});
diff --git a/example/css/style.css b/example/css/style.css
index 64fa818e0..4f37fea2d 100644
--- a/example/css/style.css
+++ b/example/css/style.css
@@ -87,10 +87,27 @@ body {
padding: 20px;
}
+#demo.vertical {
+ justify-content: space-between;
+}
+
#waveform {
position: relative;
}
+.vertical {
+ display: flex;
+ margin-bottom: 20px;
+}
+
+.vertical #demo {
+ margin-right: 30px;
+}
+
+#waveform.vertical {
+ height: 400px;
+}
+
#progress-bar {
position: absolute;
z-index: 10;
@@ -107,4 +124,4 @@ body {
#drop.wavesurfer-dragover {
border-color: #333;
-}
\ No newline at end of file
+}
diff --git a/example/cursor/index.html b/example/cursor/index.html
new file mode 100644
index 000000000..7d8243875
--- /dev/null
+++ b/example/cursor/index.html
@@ -0,0 +1,123 @@
+
+
+
+
+
+ wavesurfer.js | Cursor Example
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Cursor plugin
+
+ Shows a cursor on the waveform.
+
+
+
let wavesurfer = WaveSurfer.create({
+ container: document.querySelector('#waveform'),
+ plugins: [
+ WaveSurfer.cursor.create({
+ showTime: true,
+ opacity: 1,
+ customShowTimeStyle: {
+ 'background-color': '#000',
+ color: '#fff',
+ padding: '2px',
+ 'font-size': '10px'
+ }
+ })
+ ]
+});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/example/cursor/main.js b/example/cursor/main.js
new file mode 100644
index 000000000..969ab2afd
--- /dev/null
+++ b/example/cursor/main.js
@@ -0,0 +1,35 @@
+'use strict';
+
+// Create an instance
+let wavesurfer = {};
+
+// Init & load audio file
+document.addEventListener('DOMContentLoaded', function() {
+ wavesurfer = WaveSurfer.create({
+ container: document.querySelector('#waveform'),
+ plugins: [
+ WaveSurfer.cursor.create({
+ showTime: true,
+ opacity: 1,
+ customShowTimeStyle: {
+ 'background-color': '#000',
+ color: '#fff',
+ padding: '2px',
+ 'font-size': '10px'
+ }
+ })
+ ]
+ });
+
+ wavesurfer.on('error', function(e) {
+ console.warn(e);
+ });
+
+ // Load audio from URL
+ wavesurfer.load('../media/demo.wav');
+
+ // Play button
+ const button = document.querySelector('[data-action="play"]');
+
+ button.addEventListener('click', wavesurfer.playPause.bind(wavesurfer));
+});
diff --git a/example/elan-wave-segment/index.html b/example/elan-wave-segment/index.html
new file mode 100644
index 000000000..8dde4b853
--- /dev/null
+++ b/example/elan-wave-segment/index.html
@@ -0,0 +1,194 @@
+
+
+
+
+ wavesurfer.js | ELAN Wave Segment player
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ wavesurfer.js
+
+ The Elan Wave Segment Plugin uses the table and the time values created by the
+ ELAN plugin to insert a wave form column for each row.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ How to Enable Elan Wave Segment
+
+ Javascript Dependencies
+
+ - Wavesufer
+ - Region Plugin
+ - ElAN Plugin
+ - ELAN Wave Segment
+
<script src="[path_to]/wavesurfer.min.js"></script>
+<script src="[path_to]/plugin/wavesurfer.region.min.js"></script>
+<script src="[path_to]/plugin/wavesurfer.elan.min.js"></script>
+<script src="[path_to]/plugin/wavesurfer.elan-wave-segment.min.js"></script>
+
+
+
+ Javascript Initialization
+ // Create the wave surfer instance
+var wavesurfer = Object.create(WaveSurfer);
+
+// Create elan instance
+var elan = Object.create(WaveSurfer.ELAN);
+
+// Create Elan Wave Segment instance
+var elanWaveSegment = Object.create(WaveSurfer.ELANWaveSegment);
+
+document.addEventListener('DOMContentLoaded', function () {
+ var options = {
+ container : '#waveform',
+ };
+
+ //################## set up some listeners ####################
+
+ //set up listener for when elan is done
+ elan.on('ready', function (data) {
+ wavesurfer.load('../elan/transcripts/001z.mp3');
+ });
+
+ //set up listener for playing when clicked on
+ elan.on('select', function (start, end) {
+ wavesurfer.backend.play(start, end);
+ });
+ //############################## initialize wavesurfer and related plugins###############
+
+ // Init wavesurfer
+ wavesurfer.init(options);
+
+ //init elan
+ elan.init({
+ url: '../elan/transcripts/001z.xml',
+ container: '#annotations',
+ tiers: {
+ Text: true,
+ Comments: true
+ }
+ });
+
+ //int elanWaveSegment when wavesurfer is done loading the sound file
+ wavesurfer.on('ready', function() {
+ options.plotTimeEnd = wavesurfer.backend.getDuration();
+ options.wavesurfer = wavesurfer;
+ options.ELAN = elan;
+ elanWaveSegment.init(options);
+ });
+
+ //update waveSegments when time advances
+ var onProgress = function (time) {
+ elanWaveSegment.onProgress(time);
+ //code for scrolling Elan goes here
+ };
+ wavesurfer.on('audioprocess', onProgress);
+});
+ Options
+
+ ELAN: required - The ELAN instance used to parse the elan data
+ wafesurver: required - The wavesurfer instance used to draw the original waveform
+ waveSegmentWidth: optional - The width of each wave segment (defaults to 200)
+ waveSegmentPeaksPerSegment: optional - The number of peaks that should be drawn (defaults to 400)
+ waveSegmentHeight: optional - The height of each wave segment (defaults to 30)
+ waveSegmentRenderer: optional - The renderer (drawer) to be used for the wave segments
+ waveSegmentNormalizeTo: optional - What to normalize each wave segment to [whole, segment,none]
+ waveSegmentBorderWidth: optional - The width of the border of the container element
+ waveSegmentBarHeight: optional - the height of the peaks/bars (defaults to 1)
+
+
+
+
+
+
+
+
+ The ELAN program and format were developed by Max Planck Institute.
+
+
+
+ The sample ELAN file and audio are from spokencorpora.ru, used with permission.
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/example/elan/app.js b/example/elan/app.js
index 200faac3f..fcd7b04a8 100644
--- a/example/elan/app.js
+++ b/example/elan/app.js
@@ -1,18 +1,29 @@
'use strict';
// Create an instance
-var wavesurfer = Object.create(WaveSurfer);
+var wavesurfer;
// Init & load
-document.addEventListener('DOMContentLoaded', function () {
- var options = {
- container : '#waveform',
- waveColor : 'violet',
- progressColor : 'purple',
- loaderColor : 'purple',
- cursorColor : 'navy',
+document.addEventListener('DOMContentLoaded', function() {
+ let options = {
+ container: '#waveform',
+ waveColor: 'violet',
+ progressColor: 'purple',
+ loaderColor: 'purple',
+ cursorColor: 'navy',
selectionColor: '#d0e9c6',
- loopSelection : false
+ loopSelection: false,
+ plugins: [
+ WaveSurfer.elan.create({
+ url: 'transcripts/001z.xml',
+ container: '#annotations',
+ tiers: {
+ Text: true,
+ Comments: true
+ }
+ }),
+ WaveSurfer.regions.create()
+ ]
};
if (location.search.match('scroll')) {
@@ -24,17 +35,20 @@ document.addEventListener('DOMContentLoaded', function () {
options.normalize = true;
}
+ // Init wavesurfer
+ wavesurfer = WaveSurfer.create(options);
+
/* Progress bar */
- (function () {
- var progressDiv = document.querySelector('#progress-bar');
- var progressBar = progressDiv.querySelector('.progress-bar');
+ (function() {
+ let progressDiv = document.querySelector('#progress-bar');
+ let progressBar = progressDiv.querySelector('.progress-bar');
- var showProgress = function (percent) {
+ let showProgress = function(percent) {
progressDiv.style.display = 'block';
progressBar.style.width = percent + '%';
};
- var hideProgress = function () {
+ let hideProgress = function() {
progressDiv.style.display = 'none';
};
@@ -42,41 +56,27 @@ document.addEventListener('DOMContentLoaded', function () {
wavesurfer.on('ready', hideProgress);
wavesurfer.on('destroy', hideProgress);
wavesurfer.on('error', hideProgress);
- }());
-
- // Init wavesurfer
- wavesurfer.init(options);
-
- // Init ELAN plugin
- var elan = Object.create(WaveSurfer.ELAN);
+ })();
- elan.init({
- url: 'transcripts/001z.xml',
- container: '#annotations',
- tiers: {
- Text: true,
- Comments: true
- }
- });
-
- elan.on('ready', function (data) {
+ wavesurfer.elan.on('ready', function(data) {
wavesurfer.load('transcripts/' + data.media.url);
});
- elan.on('select', function (start, end) {
+ wavesurfer.elan.on('select', function(start, end) {
wavesurfer.backend.play(start, end);
});
- elan.on('ready', function () {
- var classList = elan.container.querySelector('table').classList;
- [ 'table', 'table-striped', 'table-hover' ].forEach(function (cl) {
+ wavesurfer.elan.on('ready', function() {
+ let classList = wavesurfer.elan.container.querySelector('table')
+ .classList;
+ ['table', 'table-striped', 'table-hover'].forEach(function(cl) {
classList.add(cl);
});
});
- var prevAnnotation, prevRow, region;
- var onProgress = function (time) {
- var annotation = elan.getRenderedAnnotation(time);
+ let prevAnnotation, prevRow, region;
+ let onProgress = function(time) {
+ let annotation = wavesurfer.elan.getRenderedAnnotation(time);
if (prevAnnotation != annotation) {
prevAnnotation = annotation;
@@ -86,13 +86,13 @@ document.addEventListener('DOMContentLoaded', function () {
if (annotation) {
// Highlight annotation table row
- var row = elan.getAnnotationNode(annotation);
+ let row = wavesurfer.elan.getAnnotationNode(annotation);
prevRow && prevRow.classList.remove('success');
prevRow = row;
row.classList.add('success');
- var before = row.previousSibling;
+ let before = row.previousSibling;
if (before) {
- elan.container.scrollTop = before.offsetTop;
+ wavesurfer.elan.container.scrollTop = before.offsetTop;
}
// Region
@@ -107,4 +107,8 @@ document.addEventListener('DOMContentLoaded', function () {
};
wavesurfer.on('audioprocess', onProgress);
+
+ wavesurfer.on('error', function(e) {
+ console.warn(e);
+ });
});
diff --git a/example/elan/index.html b/example/elan/index.html
index d4c38db2b..b8227011f 100644
--- a/example/elan/index.html
+++ b/example/elan/index.html
@@ -7,7 +7,7 @@
-
+
@@ -15,13 +15,13 @@
-
+
-
+
-
+
@@ -67,11 +67,11 @@ wavesurfer.js