wavesurfer.js 7.0.1 → 7.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +71 -28
  2. package/dist/plugins/wavesurfer.d.ts +6 -6
  3. package/dist/wavesurfer.d.ts +6 -6
  4. package/package.json +4 -1
package/README.md CHANGED
@@ -18,7 +18,9 @@ wavesurfer.js v7 is a TypeScript rewrite of wavesurfer.js that brings several im
18
18
 
19
19
  ---
20
20
 
21
- Try it out:
21
+ ## Getting started
22
+
23
+ Install and import the package:
22
24
 
23
25
  ```bash
24
26
  npm install --save wavesurfer.js
@@ -27,46 +29,87 @@ npm install --save wavesurfer.js
27
29
  import WaveSurfer from 'wavesurfer.js'
28
30
  ```
29
31
 
30
- Alternatively, import it from a CDN as a ES6 module:
31
-
32
+ Alternatively, insert a UMD script tag which exports the library as a global `WaveSurfer` variable:
32
33
  ```html
33
- <script type="module">
34
- import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
35
-
36
- const wavesurfer = WaveSurfer.create({
37
- container: '#waveform',
38
- waveColor: '#4F4A85',
39
- progressColor: '#383351',
40
- url: '/audio.mp3',
41
- })
42
- </script>
34
+ <script src="https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.min.js"></script>
43
35
  ```
44
36
 
45
- Or, as a UMD script tag which exports the library as a global `WaveSurfer` variable:
46
- ```html
47
- <script type="text/javascript" src="https://unpkg.com/wavesurfer.js/dist/wavesurfer.min.js"></script>
37
+ Create a wavesurfer instance and pass various [options](#wavesurfer-options):
38
+ ```js
39
+ const wavesurfer = WaveSurfer.create({
40
+ container: '#waveform',
41
+ waveColor: '#4F4A85',
42
+ progressColor: '#383351',
43
+ url: '/audio.mp3',
44
+ })
48
45
  ```
49
46
 
50
- To import one of the plugins, e.g. the Timeline plugin:
47
+ To import one of the plugins, e.g. the [Regions plugin](https://wavesurfer-js.org/examples/#regions.js):
51
48
  ```js
52
- import Timeline from 'wavesurfer.js/dist/plugins/timeline.js'
53
-
54
- // or with a CDN:
55
-
56
- import Timeline from 'https://unpkg.com/wavesurfer.js/dist/plugins/timeline.js'
57
-
58
- // or as a script tag
49
+ import Regions from 'wavesurfer.js/dist/plugins/regions.js'
50
+ ```
59
51
 
60
- <script type="text/javascript" src="https://unpkg.com/wavesurfer.js/dist/plugins/timeline.min.js"></script>
52
+ Or as a script tag:
53
+ ```html
54
+ <script src="https://unpkg.com/wavesurfer.js@7/dist/plugins/regions.min.js"></script>
61
55
  ```
62
56
 
63
57
  TypeScript types are included in the package, so there's no need to install `@types/wavesurfer.js`.
64
58
 
65
59
  See more [examples](https://wavesurfer-js.org/examples).
66
60
 
67
- ## Documentation
68
-
69
- See the documentation on wavesurfer.js [methods](http://wavesurfer-js.org/docs/methods), [options](http://wavesurfer-js.org/docs/options) and [events](http://wavesurfer-js.org/docs/events) on our website.
61
+ ## API reference
62
+
63
+ See the documentation on wavesurfer [methods](http://wavesurfer-js.org/docs/methods), [options](http://wavesurfer-js.org/docs/options) and [events](http://wavesurfer-js.org/docs/events).
64
+
65
+ ### Wavesurfer options
66
+ - `container`: `HTMLElement | string` - Required: an HTML element or selector where the waveform will be rendered.
67
+ - `height`: `number | 'auto'` - The height of the waveform in pixels, or "auto" to fill the container height
68
+ - `waveColor`: `string | string[] | CanvasGradient` - The color of the waveform
69
+ - `progressColor`: `string | string[] | CanvasGradient` - The color of the progress mask
70
+ - `cursorColor`: `string` - The color of the playpack cursor
71
+ - `cursorWidth`: `number` - The cursor width
72
+ - `barWidth`: `number` - Render the waveform with bars like this: ▁ ▂ ▇ ▃ ▅ ▂
73
+ - `barGap`: `number` - Spacing between bars in pixels
74
+ - `barRadius`: `number` - Rounded borders for bars
75
+ - `barHeight`: `number` - A vertical scaling factor for the waveform
76
+ - `barAlign`: `'top' | 'bottom'` - Vertical bar alignment
77
+ - `minPxPerSec`: `number` - Minimum pixels per second of audio (i.e. zoom level)
78
+ - `fillParent`: `boolean` - Stretch the waveform to fill the container, true by default
79
+ - `url`: `string` - Audio URL
80
+ - `peaks`: `Array<Float32Array | number[]>` - Pre-computed audio data
81
+ - `duration`: `number` - Pre-computed duration
82
+ - `media`: `HTMLMediaElement` - Use an existing media element instead of creating one
83
+ - `autoplay`: `boolean` - Play the audio on load
84
+ - `interact`: `boolean` - Pass false to disable clicks on the waveform
85
+ - `hideScrollbar`: `boolean` - Hide the scrollbar
86
+ - `audioRate`: `number` - Audio rate
87
+ - `autoScroll`: `boolean` - Automatically scroll the container to keep the current position in viewport
88
+ - `autoCenter`: `boolean` - If autoScroll is enabled, keep the cursor in the center of the waveform during playback
89
+ - `sampleRate`: `number` - Decoding sample rate. Doesn't affect the playback. Defaults to 8000
90
+ - `splitChannels`: `WaveSurferOptions[]` - Render each audio channel as a separate waveform
91
+ - `normalize`: `boolean` - Stretch the waveform to the full height
92
+ - `plugins`: `GenericPlugin[]` - The list of plugins to initialize on start
93
+ - `renderFunction`: `(peaks: Array<Float32Array | number[]>, ctx: CanvasRenderingContext2D) => void` - Custom render function
94
+ - `fetchParams`: `RequestInit` - Options to pass to the fetch method
95
+
96
+ ### Wavesurfer events
97
+ - `load`: `[url: string]` - When audio starts loading
98
+ - `decode`: `[duration: number]` - When the audio has been decoded
99
+ - `ready`: `[duration: number]` - When the audio is both decoded and can play
100
+ - `redraw`: `[]` - When a waveform is drawn
101
+ - `play`: `[]` - When the audio starts playing
102
+ - `pause`: `[]` - When the audio pauses
103
+ - `finish`: `[]` - When the audio finishes playing
104
+ - `timeupdate`: `[currentTime: number]` - On audio position change, fires continuously during playback
105
+ - `audioprocess`: `[currentTime: number]` - An alias of timeupdate but only when the audio is playing
106
+ - `seeking`: `[currentTime: number]` - When the user seeks to a new position
107
+ - `interaction`: `[newTime: number]` - When the user interacts with the waveform (i.g. clicks or drags on it)
108
+ - `click`: `[relativeX: number]` - When the user clicks on the waveform
109
+ - `drag`: `[relativeX: number]` - When the user drags the cursor
110
+ - `scroll`: `[visibleStartTime: number, visibleEndTime: number]` - When the waveform is scrolled (panned)
111
+ - `zoom`: `[minPxPerSec: number]` - When the zoom level changes
112
+ - `destroy`: `[]` - Just before the waveform is destroyed so you can clean up your events
70
113
 
71
114
  ## Plugins
72
115
 
package/dist/plugins/wavesurfer.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { GenericPlugin } from './base-plugin.js';
2
2
  import Player from './player.js';
3
3
  export type WaveSurferOptions = {
4
- /** HTML element or CSS selector */
4
+ /** Required: an HTML element or selector where the waveform will be rendered. */
5
5
  container: HTMLElement | string;
6
6
  /** The height of the waveform in pixels, or "auto" to fill the container height */
7
7
  height?: number | 'auto';
@@ -13,7 +13,7 @@ export type WaveSurferOptions = {
13
13
  cursorColor?: string;
14
14
  /** The cursor width */
15
15
  cursorWidth?: number;
16
- /** Render the waveform with bars like this: ▁ ▂ ▇ ▃ ▅ ▂ */
16
+ /** If set, the waveform will be rendered with bars like this: ▁ ▂ ▇ ▃ ▅ ▂ */
17
17
  barWidth?: number;
18
18
  /** Spacing between bars in pixels */
19
19
  barGap?: number;
@@ -23,15 +23,15 @@ export type WaveSurferOptions = {
23
23
  barHeight?: number;
24
24
  /** Vertical bar alignment */
25
25
  barAlign?: 'top' | 'bottom';
26
- /** Minimum pixels per second of audio (i.e. zoom level) */
26
+ /** Minimum pixels per second of audio (i.e. the zoom level) */
27
27
  minPxPerSec?: number;
28
28
  /** Stretch the waveform to fill the container, true by default */
29
29
  fillParent?: boolean;
30
30
  /** Audio URL */
31
31
  url?: string;
32
- /** Pre-computed audio data */
32
+ /** Pre-computed audio data, arrays of floats for each channel */
33
33
  peaks?: Array<Float32Array | number[]>;
34
- /** Pre-computed duration */
34
+ /** Pre-computed audio duration in seconds */
35
35
  duration?: number;
36
36
  /** Use an existing media element instead of creating one */
37
37
  media?: HTMLMediaElement;
@@ -41,7 +41,7 @@ export type WaveSurferOptions = {
41
41
  interact?: boolean;
42
42
  /** Hide the scrollbar */
43
43
  hideScrollbar?: boolean;
44
- /** Audio rate */
44
+ /** Audio rate, i.e. the playback speed */
45
45
  audioRate?: number;
46
46
  /** Automatically scroll the container to keep the current position in viewport */
47
47
  autoScroll?: boolean;
package/dist/wavesurfer.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { GenericPlugin } from './base-plugin.js';
2
2
  import Player from './player.js';
3
3
  export type WaveSurferOptions = {
4
- /** HTML element or CSS selector */
4
+ /** Required: an HTML element or selector where the waveform will be rendered. */
5
5
  container: HTMLElement | string;
6
6
  /** The height of the waveform in pixels, or "auto" to fill the container height */
7
7
  height?: number | 'auto';
@@ -13,7 +13,7 @@ export type WaveSurferOptions = {
13
13
  cursorColor?: string;
14
14
  /** The cursor width */
15
15
  cursorWidth?: number;
16
- /** Render the waveform with bars like this: ▁ ▂ ▇ ▃ ▅ ▂ */
16
+ /** If set, the waveform will be rendered with bars like this: ▁ ▂ ▇ ▃ ▅ ▂ */
17
17
  barWidth?: number;
18
18
  /** Spacing between bars in pixels */
19
19
  barGap?: number;
@@ -23,15 +23,15 @@ export type WaveSurferOptions = {
23
23
  barHeight?: number;
24
24
  /** Vertical bar alignment */
25
25
  barAlign?: 'top' | 'bottom';
26
- /** Minimum pixels per second of audio (i.e. zoom level) */
26
+ /** Minimum pixels per second of audio (i.e. the zoom level) */
27
27
  minPxPerSec?: number;
28
28
  /** Stretch the waveform to fill the container, true by default */
29
29
  fillParent?: boolean;
30
30
  /** Audio URL */
31
31
  url?: string;
32
- /** Pre-computed audio data */
32
+ /** Pre-computed audio data, arrays of floats for each channel */
33
33
  peaks?: Array<Float32Array | number[]>;
34
- /** Pre-computed duration */
34
+ /** Pre-computed audio duration in seconds */
35
35
  duration?: number;
36
36
  /** Use an existing media element instead of creating one */
37
37
  media?: HTMLMediaElement;
@@ -41,7 +41,7 @@ export type WaveSurferOptions = {
41
41
  interact?: boolean;
42
42
  /** Hide the scrollbar */
43
43
  hideScrollbar?: boolean;
44
- /** Audio rate */
44
+ /** Audio rate, i.e. the playback speed */
45
45
  audioRate?: number;
46
46
  /** Automatically scroll the container to keep the current position in viewport */
47
47
  autoScroll?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "wavesurfer.js",
3
- "version": "7.0.1",
3
+ "version": "7.0.3",
4
4
  "license": "BSD-3-Clause",
5
5
  "author": "katspaugh",
6
6
  "description": "Navigable audio waveform player",
@@ -22,6 +22,7 @@
22
22
  "dist"
23
23
  ],
24
24
  "main": "./dist/wavesurfer.esm.js",
25
+ "unpkg": "./dist/wavesurfer.min.js",
25
26
  "module": "./dist/wavesurfer.esm.js",
26
27
  "browser": "./dist/wavesurfer.esm.js",
27
28
  "types": "./dist/wavesurfer.d.ts",
@@ -46,6 +47,7 @@
46
47
  "deploy": "yarn build && yarn docs",
47
48
  "prepublishOnly": "npm run build",
48
49
  "docs": "typedoc --titleLink '/' src/wavesurfer.ts src/plugins/*.ts --out docs",
50
+ "gpt-docs": "node ./scripts/gpt-docs.js",
49
51
  "lint": "eslint --ext .ts src --fix",
50
52
  "prettier": "prettier -w '**/*.{js,ts,css}' --ignore-path .gitignore",
51
53
  "make-plugin": "./scripts/plugin.sh",
@@ -62,6 +64,7 @@
62
64
  "@typescript-eslint/parser": "^5.57.0",
63
65
  "cypress": "^12.9.0",
64
66
  "cypress-image-snapshot": "^4.0.1",
67
+ "dotenv": "^16.3.1",
65
68
  "eslint": "^8.37.0",
66
69
  "eslint-config-prettier": "^8.8.0",
67
70
  "eslint-plugin-prettier": "^4.2.1",