├── .eslintrc.json
├── .github
├── actions
│ ├── deploy-s3-javascript
│ │ ├── action.yml
│ │ ├── dist
│ │ │ └── index.js
│ │ ├── package-lock.json
│ │ ├── package.json
│ │ └── src
│ │ │ └── main.js
│ └── install_dependencies
│ │ └── action.yml
└── workflows
│ ├── deploy_demo.yml
│ └── pull_request_guard.yml
├── .gitignore
├── .npmrc
├── LICENSE
├── README.md
├── demo
├── .eslintrc.json
├── .gitignore
├── README.md
├── package.json
├── pnpm-lock.yaml
├── public
│ ├── bensound-ukulele.mp3
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── reportWebVitals.js
│ └── setupTests.js
├── package.json
├── pnpm-lock.yaml
├── src
├── components
│ ├── Marker.tsx
│ ├── Region.tsx
│ └── WaveForm.tsx
├── constants
│ └── updatableRegionProps.ts
├── containers
│ └── WaveSurfer.tsx
├── contexts
│ └── WaveSurferContext.ts
├── hooks
│ ├── useRegionEvent.ts
│ ├── useRegionPluginEvent.ts
│ ├── useWavesurfer.ts
│ └── useWavesurferContext.ts
├── index.ts
├── types.ts
└── utils
│ ├── createPlugin.ts
│ ├── createWavesurfer.ts
│ ├── getDifference.ts
│ ├── getWaveFormOptionsFromProps.ts
│ └── isReactElement.ts
└── tsconfig.json
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "browser": true,
4 | "es2021": true
5 | },
6 | "extends": [
7 | "eslint:recommended",
8 | "plugin:@typescript-eslint/recommended",
9 | "plugin:react/recommended"
10 | ],
11 | "parser": "@typescript-eslint/parser",
12 | "parserOptions": {
13 | "ecmaFeatures": {
14 | "jsx": true
15 | },
16 | "ecmaVersion": 13,
17 | "sourceType": "module"
18 | },
19 | "plugins": [
20 | "react",
21 | "@typescript-eslint"
22 | ],
23 | "rules": {
24 | "@typescript-eslint/no-explicit-any": "off"
25 | },
26 | "ignorePatterns": ["demo"],
27 | "settings": {
28 | "react": {
29 | "version": "detect"
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/.github/actions/deploy-s3-javascript/action.yml:
--------------------------------------------------------------------------------
1 | name: "Deploy to S3"
2 | description: "Deploy a static website to S3"
3 | inputs:
4 | bucket:
5 | description: "The S3 bucket name"
6 | required: true
7 | bucket-region:
8 | description: "The S3 bucket region"
9 | required: false
10 | default: "ru-central1"
11 | dist-folder:
12 | description: "The folder containing the deployable files"
13 | required: true
14 | outputs:
15 | website-url:
16 | description: "The URL of deployed website"
17 | runs:
18 | using: 'node20'
19 | # All paths below are relative
20 | # to reusable action file location
21 | #
22 | # pre: <-- script executed before
23 | main: 'dist/index.js'
24 | # post: <-- script executed after
25 |
26 |
--------------------------------------------------------------------------------
/.github/actions/deploy-s3-javascript/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "deploy-s3-javascript",
3 | "version": "1.0.0",
4 | "lockfileVersion": 3,
5 | "requires": true,
6 | "packages": {
7 | "": {
8 | "name": "deploy-s3-javascript",
9 | "version": "1.0.0",
10 | "license": "ISC",
11 | "dependencies": {
12 | "@actions/core": "^1.10.1",
13 | "@actions/exec": "^1.1.1",
14 | "@actions/github": "^6.0.0",
15 | "@vercel/ncc": "^0.38.1"
16 | }
17 | },
18 | "node_modules/@actions/core": {
19 | "version": "1.10.1",
20 | "resolved": "https://registry.npmjs.org/@actions/core/-/core-1.10.1.tgz",
21 | "integrity": "sha512-3lBR9EDAY+iYIpTnTIXmWcNbX3T2kCkAEQGIQx4NVQ0575nk2k3GRZDTPQG+vVtS2izSLmINlxXf0uLtnrTP+g==",
22 | "dependencies": {
23 | "@actions/http-client": "^2.0.1",
24 | "uuid": "^8.3.2"
25 | }
26 | },
27 | "node_modules/@actions/exec": {
28 | "version": "1.1.1",
29 | "resolved": "https://registry.npmjs.org/@actions/exec/-/exec-1.1.1.tgz",
30 | "integrity": "sha512-+sCcHHbVdk93a0XT19ECtO/gIXoxvdsgQLzb2fE2/5sIZmWQuluYyjPQtrtTHdU1YzTZ7bAPN4sITq2xi1679w==",
31 | "dependencies": {
32 | "@actions/io": "^1.0.1"
33 | }
34 | },
35 | "node_modules/@actions/github": {
36 | "version": "6.0.0",
37 | "resolved": "https://registry.npmjs.org/@actions/github/-/github-6.0.0.tgz",
38 | "integrity": "sha512-alScpSVnYmjNEXboZjarjukQEzgCRmjMv6Xj47fsdnqGS73bjJNDpiiXmp8jr0UZLdUB6d9jW63IcmddUP+l0g==",
39 | "dependencies": {
40 | "@actions/http-client": "^2.2.0",
41 | "@octokit/core": "^5.0.1",
42 | "@octokit/plugin-paginate-rest": "^9.0.0",
43 | "@octokit/plugin-rest-endpoint-methods": "^10.0.0"
44 | }
45 | },
46 | "node_modules/@actions/http-client": {
47 | "version": "2.2.0",
48 | "resolved": "https://registry.npmjs.org/@actions/http-client/-/http-client-2.2.0.tgz",
49 | "integrity": "sha512-q+epW0trjVUUHboliPb4UF9g2msf+w61b32tAkFEwL/IwP0DQWgbCMM0Hbe3e3WXSKz5VcUXbzJQgy8Hkra/Lg==",
50 | "dependencies": {
51 | "tunnel": "^0.0.6",
52 | "undici": "^5.25.4"
53 | }
54 | },
55 | "node_modules/@actions/io": {
56 | "version": "1.1.3",
57 | "resolved": "https://registry.npmjs.org/@actions/io/-/io-1.1.3.tgz",
58 | "integrity": "sha512-wi9JjgKLYS7U/z8PPbco+PvTb/nRWjeoFlJ1Qer83k/3C5PHQi28hiVdeE2kHXmIL99mQFawx8qt/JPjZilJ8Q=="
59 | },
60 | "node_modules/@fastify/busboy": {
61 | "version": "2.1.0",
62 | "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.0.tgz",
63 | "integrity": "sha512-+KpH+QxZU7O4675t3mnkQKcZZg56u+K/Ct2K+N2AZYNVK8kyeo/bI18tI8aPm3tvNNRyTWfj6s5tnGNlcbQRsA==",
64 | "engines": {
65 | "node": ">=14"
66 | }
67 | },
68 | "node_modules/@octokit/auth-token": {
69 | "version": "4.0.0",
70 | "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-4.0.0.tgz",
71 | "integrity": "sha512-tY/msAuJo6ARbK6SPIxZrPBms3xPbfwBrulZe0Wtr/DIY9lje2HeV1uoebShn6mx7SjCHif6EjMvoREj+gZ+SA==",
72 | "engines": {
73 | "node": ">= 18"
74 | }
75 | },
76 | "node_modules/@octokit/core": {
77 | "version": "5.1.0",
78 | "resolved": "https://registry.npmjs.org/@octokit/core/-/core-5.1.0.tgz",
79 | "integrity": "sha512-BDa2VAMLSh3otEiaMJ/3Y36GU4qf6GI+VivQ/P41NC6GHcdxpKlqV0ikSZ5gdQsmS3ojXeRx5vasgNTinF0Q4g==",
80 | "dependencies": {
81 | "@octokit/auth-token": "^4.0.0",
82 | "@octokit/graphql": "^7.0.0",
83 | "@octokit/request": "^8.0.2",
84 | "@octokit/request-error": "^5.0.0",
85 | "@octokit/types": "^12.0.0",
86 | "before-after-hook": "^2.2.0",
87 | "universal-user-agent": "^6.0.0"
88 | },
89 | "engines": {
90 | "node": ">= 18"
91 | }
92 | },
93 | "node_modules/@octokit/endpoint": {
94 | "version": "9.0.4",
95 | "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-9.0.4.tgz",
96 | "integrity": "sha512-DWPLtr1Kz3tv8L0UvXTDP1fNwM0S+z6EJpRcvH66orY6Eld4XBMCSYsaWp4xIm61jTWxK68BrR7ibO+vSDnZqw==",
97 | "dependencies": {
98 | "@octokit/types": "^12.0.0",
99 | "universal-user-agent": "^6.0.0"
100 | },
101 | "engines": {
102 | "node": ">= 18"
103 | }
104 | },
105 | "node_modules/@octokit/graphql": {
106 | "version": "7.0.2",
107 | "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-7.0.2.tgz",
108 | "integrity": "sha512-OJ2iGMtj5Tg3s6RaXH22cJcxXRi7Y3EBqbHTBRq+PQAqfaS8f/236fUrWhfSn8P4jovyzqucxme7/vWSSZBX2Q==",
109 | "dependencies": {
110 | "@octokit/request": "^8.0.1",
111 | "@octokit/types": "^12.0.0",
112 | "universal-user-agent": "^6.0.0"
113 | },
114 | "engines": {
115 | "node": ">= 18"
116 | }
117 | },
118 | "node_modules/@octokit/openapi-types": {
119 | "version": "19.1.0",
120 | "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-19.1.0.tgz",
121 | "integrity": "sha512-6G+ywGClliGQwRsjvqVYpklIfa7oRPA0vyhPQG/1Feh+B+wU0vGH1JiJ5T25d3g1JZYBHzR2qefLi9x8Gt+cpw=="
122 | },
123 | "node_modules/@octokit/plugin-paginate-rest": {
124 | "version": "9.1.5",
125 | "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-9.1.5.tgz",
126 | "integrity": "sha512-WKTQXxK+bu49qzwv4qKbMMRXej1DU2gq017euWyKVudA6MldaSSQuxtz+vGbhxV4CjxpUxjZu6rM2wfc1FiWVg==",
127 | "dependencies": {
128 | "@octokit/types": "^12.4.0"
129 | },
130 | "engines": {
131 | "node": ">= 18"
132 | },
133 | "peerDependencies": {
134 | "@octokit/core": ">=5"
135 | }
136 | },
137 | "node_modules/@octokit/plugin-rest-endpoint-methods": {
138 | "version": "10.2.0",
139 | "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-10.2.0.tgz",
140 | "integrity": "sha512-ePbgBMYtGoRNXDyKGvr9cyHjQ163PbwD0y1MkDJCpkO2YH4OeXX40c4wYHKikHGZcpGPbcRLuy0unPUuafco8Q==",
141 | "dependencies": {
142 | "@octokit/types": "^12.3.0"
143 | },
144 | "engines": {
145 | "node": ">= 18"
146 | },
147 | "peerDependencies": {
148 | "@octokit/core": ">=5"
149 | }
150 | },
151 | "node_modules/@octokit/request": {
152 | "version": "8.1.6",
153 | "resolved": "https://registry.npmjs.org/@octokit/request/-/request-8.1.6.tgz",
154 | "integrity": "sha512-YhPaGml3ncZC1NfXpP3WZ7iliL1ap6tLkAp6MvbK2fTTPytzVUyUesBBogcdMm86uRYO5rHaM1xIWxigWZ17MQ==",
155 | "dependencies": {
156 | "@octokit/endpoint": "^9.0.0",
157 | "@octokit/request-error": "^5.0.0",
158 | "@octokit/types": "^12.0.0",
159 | "universal-user-agent": "^6.0.0"
160 | },
161 | "engines": {
162 | "node": ">= 18"
163 | }
164 | },
165 | "node_modules/@octokit/request-error": {
166 | "version": "5.0.1",
167 | "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-5.0.1.tgz",
168 | "integrity": "sha512-X7pnyTMV7MgtGmiXBwmO6M5kIPrntOXdyKZLigNfQWSEQzVxR4a4vo49vJjTWX70mPndj8KhfT4Dx+2Ng3vnBQ==",
169 | "dependencies": {
170 | "@octokit/types": "^12.0.0",
171 | "deprecation": "^2.0.0",
172 | "once": "^1.4.0"
173 | },
174 | "engines": {
175 | "node": ">= 18"
176 | }
177 | },
178 | "node_modules/@octokit/types": {
179 | "version": "12.4.0",
180 | "resolved": "https://registry.npmjs.org/@octokit/types/-/types-12.4.0.tgz",
181 | "integrity": "sha512-FLWs/AvZllw/AGVs+nJ+ELCDZZJk+kY0zMen118xhL2zD0s1etIUHm1odgjP7epxYU1ln7SZxEUWYop5bhsdgQ==",
182 | "dependencies": {
183 | "@octokit/openapi-types": "^19.1.0"
184 | }
185 | },
186 | "node_modules/@vercel/ncc": {
187 | "version": "0.38.1",
188 | "resolved": "https://registry.npmjs.org/@vercel/ncc/-/ncc-0.38.1.tgz",
189 | "integrity": "sha512-IBBb+iI2NLu4VQn3Vwldyi2QwaXt5+hTyh58ggAMoCGE6DJmPvwL3KPBWcJl1m9LYPChBLE980Jw+CS4Wokqxw==",
190 | "bin": {
191 | "ncc": "dist/ncc/cli.js"
192 | }
193 | },
194 | "node_modules/before-after-hook": {
195 | "version": "2.2.3",
196 | "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz",
197 | "integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ=="
198 | },
199 | "node_modules/deprecation": {
200 | "version": "2.3.1",
201 | "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
202 | "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ=="
203 | },
204 | "node_modules/once": {
205 | "version": "1.4.0",
206 | "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
207 | "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
208 | "dependencies": {
209 | "wrappy": "1"
210 | }
211 | },
212 | "node_modules/tunnel": {
213 | "version": "0.0.6",
214 | "resolved": "https://registry.npmjs.org/tunnel/-/tunnel-0.0.6.tgz",
215 | "integrity": "sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==",
216 | "engines": {
217 | "node": ">=0.6.11 <=0.7.0 || >=0.7.3"
218 | }
219 | },
220 | "node_modules/undici": {
221 | "version": "5.28.2",
222 | "resolved": "https://registry.npmjs.org/undici/-/undici-5.28.2.tgz",
223 | "integrity": "sha512-wh1pHJHnUeQV5Xa8/kyQhO7WFa8M34l026L5P/+2TYiakvGy5Rdc8jWZVyG7ieht/0WgJLEd3kcU5gKx+6GC8w==",
224 | "dependencies": {
225 | "@fastify/busboy": "^2.0.0"
226 | },
227 | "engines": {
228 | "node": ">=14.0"
229 | }
230 | },
231 | "node_modules/universal-user-agent": {
232 | "version": "6.0.1",
233 | "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.1.tgz",
234 | "integrity": "sha512-yCzhz6FN2wU1NiiQRogkTQszlQSlpWaw8SvVegAc+bDxbzHgh1vX8uIe8OYyMH6DwH+sdTJsgMl36+mSMdRJIQ=="
235 | },
236 | "node_modules/uuid": {
237 | "version": "8.3.2",
238 | "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
239 | "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
240 | "bin": {
241 | "uuid": "dist/bin/uuid"
242 | }
243 | },
244 | "node_modules/wrappy": {
245 | "version": "1.0.2",
246 | "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
247 | "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
248 | }
249 | }
250 | }
251 |
--------------------------------------------------------------------------------
/.github/actions/deploy-s3-javascript/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "deploy-s3-javascript",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "dist/index.js",
6 | "scripts": {
7 | "build": "node_modules/.bin/ncc build src/main.js",
8 | "test": "echo \"Error: no test specified\" && exit 1"
9 | },
10 | "author": "",
11 | "license": "ISC",
12 | "dependencies": {
13 | "@actions/core": "^1.10.1",
14 | "@actions/exec": "^1.1.1",
15 | "@actions/github": "^6.0.0",
16 | "@vercel/ncc": "^0.38.1"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/.github/actions/deploy-s3-javascript/src/main.js:
--------------------------------------------------------------------------------
1 | const core = require('@actions/core');
2 | const exec = require('@actions/exec');
3 |
4 | function run() {
5 | // get some inputs
6 | const bucket$ = core.getInput('bucket', { required: true });
7 | const bucketRegion$ = core.getInput('bucket-region', { required: true });
8 | const dist$ = core.getInput('dist-folder', { required: true });
9 |
10 |
11 |
12 | // upload to S3
13 | const s3URI = `s3://${bucket$}`;
14 |
15 | exec.exec(`aws s3 sync ${dist$} ${s3URI} --region ${bucketRegion$} --endpoint-url=https://storage.yandexcloud.net`)
16 |
17 | const website$ = `https://${bucket$}.website.yandexcloud.net`;
18 | core.setOutput('website-url', website$);
19 | }
20 |
21 | run();
22 |
--------------------------------------------------------------------------------
/.github/actions/install_dependencies/action.yml:
--------------------------------------------------------------------------------
1 | name: 'Yarn'
2 |
3 | description: 'Install node modules'
4 |
5 | runs:
6 | using: 'composite'
7 | steps:
8 | - name: Install pnpm
9 | uses: pnpm/action-setup@v4
10 | with:
11 | version: 9
12 |
13 | - name: Use Node.js 20
14 | uses: actions/setup-node@v4
15 | with:
16 | node-version: 20
17 | cache: 'pnpm'
18 |
19 | - name: Install dependencies
20 | shell: bash
21 | run: pnpm install
--------------------------------------------------------------------------------
/.github/workflows/deploy_demo.yml:
--------------------------------------------------------------------------------
1 | name: Deploy Demo
2 | on:
3 | push:
4 | branches:
5 | - master
6 | paths-ignore:
7 | - '*.md' # all MD files
8 | - '.eslintrc.json'
9 | - 'LICENSE'
10 | - '.gitignore'
11 | workflow_dispatch:
12 | jobs:
13 | lint:
14 | runs-on: ubuntu-latest
15 | steps:
16 | - name: Checkout
17 | uses: actions/checkout@v4
18 |
19 | - name: Install dependencies
20 | uses: ./.github/actions/install_dependencies
21 |
22 | - name: Lint
23 | run: |
24 | pnpm run lint
25 | deploy:
26 | needs: [ lint ]
27 | runs-on: ubuntu-latest
28 | steps:
29 | - name: Checkout
30 | uses: actions/checkout@v4
31 |
32 | - name: Install dependencies
33 | uses: ./.github/actions/install_dependencies
34 |
35 | - name: Build
36 | run: |
37 | pnpm run build
38 |
39 | # вложить дистрибутив в папку с демо по правильному пути
40 | - name: Move dist
41 | run: |
42 | pnpm run demo:sync
43 |
44 | - name: Install demo dependencies
45 | run: |
46 | cd ./demo && pnpm install --frozen-lockfile
47 |
48 | - name: Build demo
49 | run: |
50 | pnpm run build:demo
51 |
52 | - name: Upload artifacts
53 | uses: actions/upload-artifact@v4
54 | with:
55 | name: demo-dist
56 | path: demo/build
57 |
58 | # папку с демо отправить в бакет
59 | - name: Deploy
60 | uses: ./.github/actions/deploy-s3-javascript
61 | id: deploy
62 | env:
63 | AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
64 | AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
65 | with:
66 | bucket: wavesurfer-react
67 | dist-folder: ./demo/build
68 | - name: Output information
69 | run: |
70 | echo "Live URL: ${{ steps.deploy.outputs.website-url }}"
71 |
--------------------------------------------------------------------------------
/.github/workflows/pull_request_guard.yml:
--------------------------------------------------------------------------------
1 | name: Pull Request Guard
2 | on: [pull_request]
3 |
4 | jobs:
5 | eslint:
6 | runs-on: ubuntu-latest
7 | steps:
8 | - uses: actions/checkout@v4
9 |
10 | - uses: ./.github/actions/install_dependencies
11 |
12 | - name: Lint
13 | run: pnpm run lint
14 |
15 | build:
16 | needs: eslint
17 | runs-on: ubuntu-latest
18 | steps:
19 | - uses: actions/checkout@v4
20 |
21 | - uses: ./.github/actions/install_dependencies
22 |
23 | - name: Build
24 | run: pnpm run build
25 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | **/node_modules/
3 | dist
4 | demo_dist
5 | !/.github/actions/**/dist
6 | npm-debug.log
7 | debug.log
8 |
9 | /demo/src/wavesurfer-react
10 |
11 | __dev__
12 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | auto-install-peers=true
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Denis Bogdanenko
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | Wavesurfer React
4 |
5 | [](https://bundlephobia.com/package/wavesurfer-react)
6 | [](https://bundlephobia.com/package/wavesurfer-react)
7 | [](https://npmjs.com/package/wavesurfer-react)
8 |
9 | A simple wrapper around an awesome library called [wavesurfer.js](https://wavesurfer-js.org).
10 |
11 | The purpose of the package is to provide an abstraction over wavesurfer.js API
12 | and to do it as close to react style of doing things as its maintainer(-s) can provide.
13 |
14 | **LiveDemo:**
15 |
16 | [
](https://codesandbox.io/p/sandbox/wavesurfer-react-3-0-w8vr3m)
17 |
18 | [
19 | ](https://wavesurfer-react.website.yandexcloud.net)
20 |
21 | > [!IMPORTANT]
22 | > Since October 2023 I am occupied on a full-time job where it's not currently required to use any audio related modules.
23 | > I'll try to pay as much attention as possible for this repo, but not as much as previously because I need to prioritize things.
24 | > I'll keep this module to be as simple as possible and open to contributions.
25 |
26 | # Table of Contents
27 |
28 | - [Wavesurfer React](#wavesurfer-react)
29 | * [User Guide](#user-guide)
30 | + [Components](#components)
31 | - [WaveSurfer](#wavesurfer)
32 | - [WaveForm](#waveform)
33 | - [Region](#region)
34 | - [Marker](#region)
35 | + [Hooks](#hooks)
36 | - [useWavesurfer](#usewavesurfer)
37 | - [useRegionEvent](#useregionevent)
38 | - [useRegionsPluginEvent](#useregionpluginevent)
39 | - [useWaveSurferContext](#usewavesurfercontext)
40 | * [Known Issues and Workarounds](#known-issues-and-workarounds)
41 |
42 |
43 |
44 | ## User Guide
45 |
46 | ### Components
47 | Package provides the following set of components:
48 | 1. WaveSurfer
49 | 2. WaveForm
50 | 3. Region
51 |
52 | #### WaveSurfer
53 | Core component of the package.
54 | It creates wavesurfer instance and watches for changes in plugins list.
55 | It accepts the following props set:
56 | 1. plugins
57 | 2. onMount
58 |
59 | ##### Plugins Prop
60 |
61 | It is a list of plugins to use by WaveSurfer and has the following format:
62 | ```jsx
63 | import { WaveSurfer } from 'wavesurfer-react';
64 | import RegionsPlugin from "wavesurfer.js/dist/plugins/regions";
65 | import TimelinePlugin from "wavesurfer.js/dist/plugins/timeline";
66 | import MyCustomPlugin from 'my-custom-plugin-path';
67 |
68 | const plugins = [
69 | {
70 | plugin: RegionsPlugin,
71 | key: "regions",
72 | options: { dragSelection: true }
73 | },
74 | {
75 | plugin: TimelinePlugin,
76 | key: "timeline",
77 | options: {
78 | container: "#timeline"
79 | }
80 | },
81 | {
82 | plugin: MyCustomPlugin,
83 | key: "my-custom-plugin",
84 | options: {
85 | someGreatOption: 'someGreatValue'
86 | },
87 | creator: 'myCustomCreate'
88 | }
89 | ];
90 |
91 |
92 | ```
93 |
94 | The `plugins` prop is watched inside WaveSurfer.
95 | If plugin was disabled (it's not enlisted in `plugins` prop) it will be destroyed,
96 | otherwise added to wavesurfer plugins list and immediately initialized.
97 |
98 | To correctly track initialized plugins, `key` property is used in item of `plugins` array.
99 |
100 | ##### onMount prop
101 | It is a function, that is called after WaveSurfer instance has been mounted.
102 | It has only one argument - WaveSurfer instance.
103 |
104 | ##### WaveSurfer Options
105 | You can pass here all options that is used to configure wavesurfer, i.e. [full list of available options](https://wavesurfer-js.org/docs/options.html).
106 |
107 | #### WaveForm
108 | It is used as an alias for:
109 | ```html
110 |
111 | ```
112 |
113 |
114 |
115 | #### Region
116 | Think of it as a some kind of helper component.
117 | It can be used to imperatively control regions, appearing on WaveForm if you're using RegionsPlugin.
118 | If region is already present of WaveForm it creation will be avoided and existing instance is used.
119 | On mount, it will try to find region with the same region identifier and then attaches itself to it.
120 | If the Region component did not find an appropriate region, then it creates a region itself.
121 |
122 | It accepts the following props:
123 | 1. onOver - is called when mouse enters a region
124 | 2. onLeave - is called when moused leaves a region
125 | 3. onClick - is called on a mouse click on a region
126 | 4. onDoubleClick - is called on double click
127 | 5. onIn - is called when playback enters a region
128 | 6. onOut - is called when playback leaves a region
129 | 7. onRemove - is called just before region remove
130 | 8. onUpdate - is called on each region's options update
131 | 9. onUpdateEnd - is called when dragging or resizing are finished
132 |
133 | Rest given props are passed as region's data into wavesurfer.
134 |
135 | #### Marker
136 | Special component using Region under the hood to display only markers.
137 | Marker await all props of Region except `end` prop.
138 |
139 | ### Hooks
140 |
141 | Package provides the following set of hooks:
142 | 1. useWavesurfer
143 | 2. useRegionEvent
144 | 3. useRegionPluginEvent
145 | 4. useWaveSurferContext
146 |
147 | #### useWavesurfer
148 | This hook is used inside WaveSurfer and its purpose is to create wavesurfer instance and return it.
149 | It also handles a task of creating and destroying wavesurfer plugins, after `plugins` prop update detection.
150 |
151 | You can use it standalone to create you own (more specific) wavesurfer component that will handle more than a component that is provided out-of-the-box.
152 |
153 | #### useRegionEvent
154 | Is used inside the `Region` component to subscribe to region-related events.
155 | Can be used by developers, if they wanna to, inside a HOC-like component over `Region` component
156 | that is provided by the package or any other component, that is rendered inside `WaveSurfer` component,
157 | but for the latter task you will have to get region instance first.
158 |
159 | #### useRegionPluginEvent
160 | Is used inside the `Region` component to subscribe to region plugin related events.
161 | Can be used by developers, if they wanna to, inside a HOC-like component over `Region` component
162 | that is provided by the package or any other component, that is rendered inside `WaveSurfer` component,
163 | but for the latter task you will have to get regions plugin instance first.
164 |
165 | #### useWaveSurferContext
166 | Returns a tuple of:
167 | 1. wavesurfer instance,
168 | 2. mapped object of enabled plugins keyed by the `key` property passed alongside a plugin,
169 | 3. an array containing these plugins.
170 |
171 | ## Known Issues and Workarounds
172 | ### Regions desynchronization
173 | Issues with regions synchronization when using redux and `Region` component.
174 | Try to not hard-bind redux-state with wavesurfer-react too tight or use an instance of wavesurfer to operate regions.
175 |
176 | ### Timeline issues
177 | [**FIXED**](https://github.com/katspaugh/wavesurfer.js/pull/3327/files): Timeline is not visible after removing it from plugins array and adding again. I hope it is a temporal issue with the original package.
178 | Comments related to this issue are:
179 | [Comment #1](https://github.com/ShiiRochi/wavesurfer-react/issues/72#issuecomment-1793807986)
180 | [Comment #2](https://github.com/ShiiRochi/wavesurfer-react/issues/72#issuecomment-1793968082)
181 | [Comment #3](https://github.com/ShiiRochi/wavesurfer-react/issues/72#issuecomment-1794293542)
182 |
183 | **INFO**: use `wavesurfer.js@^7.4.5` to have this issue fixed
184 |
185 | **Solution** to this problem is **to execute** `wavesurfer.setOptions({})`, right after Timeline plugin is added again via `plugins` prop second time and further.
186 |
187 | ## Infographics
188 |
189 | ### Stars History
190 |
191 | Thanks for your support and contributions!
192 |
193 | [](https://star-history.com/#ShiiRochi/wavesurfer-react&Date)
194 |
195 |
196 | ## Credits
197 |
198 | Logo: Facebook, React-icon, place another image at the center of this image by shiirochi@yandex.ru, CC BY-SA 1.0
199 |
--------------------------------------------------------------------------------
/demo/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "browser": true,
4 | "es2021": true
5 | },
6 | "root": true,
7 | "extends": [
8 | "eslint:recommended",
9 | "plugin:react/recommended"
10 | ],
11 | "rules": {
12 | "react/prop-types": "off",
13 | "@typescript-eslint/no-explicit-any": "off"
14 | },
15 | "ignorePatterns": ["demo"],
16 | "settings": {
17 | "react": {
18 | "version": "detect"
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/demo/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/demo/README.md:
--------------------------------------------------------------------------------
1 | # Getting Started with Create React App
2 |
3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4 |
5 | ## Available Scripts
6 |
7 | In the project directory, you can run:
8 |
9 | ### `npm start`
10 |
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
13 |
14 | The page will reload when you make changes.\
15 | You may also see any lint errors in the console.
16 |
17 | ### `npm test`
18 |
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 |
22 | ### `npm run build`
23 |
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 |
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 |
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 |
32 | ### `npm run eject`
33 |
34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!**
35 |
36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 |
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
39 |
40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
41 |
42 | ## Learn More
43 |
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 |
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 |
48 | ### Code Splitting
49 |
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 |
52 | ### Analyzing the Bundle Size
53 |
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 |
56 | ### Making a Progressive Web App
57 |
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 |
60 | ### Advanced Configuration
61 |
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 |
64 | ### Deployment
65 |
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 |
68 | ### `npm run build` fails to minify
69 |
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 |
--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "demo",
3 | "version": "0.1.1",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.16.5",
7 | "@testing-library/react": "^13.4.0",
8 | "@testing-library/user-event": "^13.5.0",
9 | "react": "^18.2.0",
10 | "react-dom": "^18.2.0",
11 | "react-scripts": "5.0.1",
12 | "styled-components": "^6.1.0",
13 | "wavesurfer.js": "^7.4.12",
14 | "web-vitals": "^2.1.4",
15 | "wavesurfer-react": "../../wavesurfer-react-artifacts/demo_dist"
16 | },
17 | "scripts": {
18 | "start": "react-scripts start",
19 | "build": "react-scripts build",
20 | "test": "react-scripts test",
21 | "eject": "react-scripts eject"
22 | },
23 | "browserslist": {
24 | "production": [
25 | ">0.2%",
26 | "not dead",
27 | "not op_mini all"
28 | ],
29 | "development": [
30 | "last 1 chrome version",
31 | "last 1 firefox version",
32 | "last 1 safari version"
33 | ]
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/demo/public/bensound-ukulele.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShiiRochi/wavesurfer-react/a4282efaef8cf57549fc3febd6a6ba2d9fb6aa26/demo/public/bensound-ukulele.mp3
--------------------------------------------------------------------------------
/demo/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShiiRochi/wavesurfer-react/a4282efaef8cf57549fc3febd6a6ba2d9fb6aa26/demo/public/favicon.ico
--------------------------------------------------------------------------------
/demo/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/demo/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShiiRochi/wavesurfer-react/a4282efaef8cf57549fc3febd6a6ba2d9fb6aa26/demo/public/logo192.png
--------------------------------------------------------------------------------
/demo/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShiiRochi/wavesurfer-react/a4282efaef8cf57549fc3febd6a6ba2d9fb6aa26/demo/public/logo512.png
--------------------------------------------------------------------------------
/demo/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/demo/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/demo/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | font-family: sans-serif;
3 | text-align: center;
4 | }
5 |
--------------------------------------------------------------------------------
/demo/src/App.js:
--------------------------------------------------------------------------------
1 | import React, {
2 | useCallback,
3 | useEffect,
4 | useRef,
5 | useState,
6 | useMemo
7 | } from "react";
8 | import styled from "styled-components";
9 | import { WaveSurfer, WaveForm, Region, Marker } from "wavesurfer-react";
10 | import "./App.css";
11 | import RegionsPlugin from "wavesurfer.js/dist/plugins/regions";
12 | import TimelinePlugin from "wavesurfer.js/dist/plugins/timeline";
13 |
14 | const Buttons = styled.div`
15 | display: inline-block;
16 | `;
17 |
18 | const Button = styled.button``;
19 |
20 | /**
21 | * @param min
22 | * @param max
23 | * @returns {*}
24 | */
25 | function generateNum(min, max) {
26 | return Math.random() * (max - min + 1) + min;
27 | }
28 |
29 | /**
30 | * @param distance
31 | * @param min
32 | * @param max
33 | * @returns {([*, *]|[*, *])|*[]}
34 | */
35 | function generateTwoNumsWithDistance(distance, min, max) {
36 | const num1 = generateNum(min, max);
37 | const num2 = generateNum(min, max);
38 | // if num2 - num1 < 10
39 | if (num2 - num1 >= 10) {
40 | return [num1, num2];
41 | }
42 | return generateTwoNumsWithDistance(distance, min, max);
43 | }
44 |
45 | function App() {
46 | const [timelineVis, setTimelineVis] = useState(false);
47 | const [isLoaded, setIsLoaded] = useState(false);
48 |
49 | const [markers, setMarkers] = useState([
50 | {
51 | time: 5.5,
52 | label: "V1",
53 | color: "#ff990a",
54 | draggable: true
55 | },
56 | {
57 | time: 10,
58 | label: "V2",
59 | color: "#00ffcc",
60 | position: "top"
61 | }
62 | ]);
63 |
64 | const plugins = useMemo(() => {
65 | return [
66 | {
67 | key: "regions",
68 | plugin: RegionsPlugin,
69 | options: { dragSelection: true }
70 | },
71 | timelineVis && {
72 | key: "top-timeline",
73 | plugin: TimelinePlugin,
74 | options: {
75 | height: 20,
76 | insertPosition: 'beforebegin',
77 | style: {
78 | color: '#2D5B88',
79 | }
80 | }
81 | },
82 | timelineVis && {
83 | key: "bottom-timeline",
84 | plugin: TimelinePlugin,
85 | options: {
86 | height: 10,
87 | style: {
88 | color: '#6A3274',
89 | }
90 | }
91 | }
92 | ].filter(Boolean);
93 | }, [timelineVis]);
94 |
95 | const toggleTimeline = useCallback(() => {
96 | setTimelineVis(!timelineVis);
97 | }, [timelineVis]);
98 |
99 | const [regions, setRegions] = useState([
100 | {
101 | id: "region-1",
102 | start: 0.5,
103 | end: 10,
104 | color: "rgba(0, 0, 0, .5)",
105 | data: {
106 | systemRegionId: 31
107 | }
108 | },
109 | {
110 | id: "region-2",
111 | start: 5,
112 | end: 25,
113 | color: "rgba(225, 195, 100, .5)",
114 | data: {
115 | systemRegionId: 32
116 | }
117 | },
118 | {
119 | id: "region-3",
120 | start: 15,
121 | end: 35,
122 | color: "rgba(25, 95, 195, .5)",
123 | data: {
124 | systemRegionId: 33
125 | }
126 | }
127 | ]);
128 |
129 | // use regions ref to pass it inside useCallback
130 | // so it will use always the most fresh version of regions list
131 | const regionsRef = useRef(regions);
132 |
133 | useEffect(() => {
134 | regionsRef.current = regions;
135 | }, [regions]);
136 |
137 | const regionCreatedHandler = useCallback(
138 | (region) => {
139 | console.log("region-created --> region:", region);
140 |
141 | if (region.data.systemRegionId) return;
142 |
143 | setRegions([
144 | ...regionsRef.current,
145 | { ...region, data: { ...region.data, systemRegionId: -1 } }
146 | ]);
147 | },
148 | [regionsRef]
149 | );
150 |
151 | const wavesurferRef = useRef();
152 |
153 | const handleWSMount = useCallback(
154 | (waveSurfer) => {
155 | wavesurferRef.current = waveSurfer;
156 |
157 | if (wavesurferRef.current) {
158 | wavesurferRef.current.load("/bensound-ukulele.mp3");
159 |
160 | wavesurferRef.current.on("region-created", regionCreatedHandler);
161 |
162 | wavesurferRef.current.on("ready", () => {
163 | console.log("WaveSurfer is ready");
164 | setIsLoaded(true);
165 | });
166 |
167 | wavesurferRef.current.on("region-removed", (region) => {
168 | console.log("region-removed --> ", region);
169 | });
170 |
171 | wavesurferRef.current.on("loading", (data) => {
172 | console.log("loading --> ", data);
173 | });
174 |
175 | if (window) {
176 | window.surferidze = wavesurferRef.current;
177 | }
178 | }
179 | },
180 | [regionCreatedHandler]
181 | );
182 |
183 | const generateRegion = useCallback(() => {
184 | if (!wavesurferRef.current) return;
185 | const minTimestampInSeconds = 0;
186 | const maxTimestampInSeconds = wavesurferRef.current.getDuration();
187 | const distance = generateNum(0, 10);
188 | const [min, max] = generateTwoNumsWithDistance(
189 | distance,
190 | minTimestampInSeconds,
191 | maxTimestampInSeconds
192 | );
193 |
194 | const r = generateNum(0, 255);
195 | const g = generateNum(0, 255);
196 | const b = generateNum(0, 255);
197 |
198 | setRegions([
199 | ...regions,
200 | {
201 | id: `custom-${generateNum(0, 9999)}`,
202 | start: min,
203 | end: max,
204 | color: `rgba(${r}, ${g}, ${b}, 0.5)`
205 | }
206 | ]);
207 | }, [regions, wavesurferRef]);
208 | const generateMarker = useCallback(() => {
209 | if (!wavesurferRef.current) return;
210 | const minTimestampInSeconds = 0;
211 | const maxTimestampInSeconds = wavesurferRef.current.getDuration();
212 | const distance = generateNum(0, 10);
213 | const [min] = generateTwoNumsWithDistance(
214 | distance,
215 | minTimestampInSeconds,
216 | maxTimestampInSeconds
217 | );
218 |
219 | const r = generateNum(0, 255);
220 | const g = generateNum(0, 255);
221 | const b = generateNum(0, 255);
222 |
223 | setMarkers([
224 | ...markers,
225 | {
226 | label: `custom-${generateNum(0, 9999)}`,
227 | time: min,
228 | color: `rgba(${r}, ${g}, ${b}, 0.5)`
229 | }
230 | ]);
231 | }, [markers, wavesurferRef]);
232 |
233 | const removeLastRegion = useCallback(() => {
234 | let nextRegions = [...regions];
235 |
236 | nextRegions.pop();
237 |
238 | setRegions(nextRegions);
239 | }, [regions]);
240 | const removeLastMarker = useCallback(() => {
241 | let nextMarkers = [...markers];
242 |
243 | nextMarkers.pop();
244 |
245 | setMarkers(nextMarkers);
246 | }, [markers]);
247 |
248 | const shuffleLastMarker = useCallback(() => {
249 | setMarkers((prev) => {
250 | const next = [...prev];
251 | let lastIndex = next.length - 1;
252 |
253 | const minTimestampInSeconds = 0;
254 | const maxTimestampInSeconds = wavesurferRef.current.getDuration();
255 | const distance = generateNum(0, 10);
256 | const [min] = generateTwoNumsWithDistance(
257 | distance,
258 | minTimestampInSeconds,
259 | maxTimestampInSeconds
260 | );
261 |
262 | next[lastIndex] = {
263 | ...next[lastIndex],
264 | time: min
265 | };
266 |
267 | return next;
268 | });
269 | }, []);
270 |
271 | const play = useCallback(() => {
272 | wavesurferRef.current.playPause();
273 | }, []);
274 |
275 | const handleRegionUpdate = useCallback((region, smth) => {
276 | console.log("region-update-end --> region:", region);
277 | console.log(smth);
278 | }, []);
279 |
280 | const handleMarkerUpdate = useCallback((marker, smth) => {
281 | console.log("region-update-end --> marker:", marker);
282 | console.log(smth);
283 | }, []);
284 |
285 | const setZoom50 = () => {
286 | wavesurferRef.current.zoom(50);
287 | };
288 |
289 | return (
290 |
291 |
292 |
293 | {isLoaded && regions.map((regionProps) => (
294 |
299 | ))}
300 | {isLoaded && markers.map(markerProps => (
301 |
309 | ))}
310 |
311 |
312 |
313 |
314 |
315 |
316 |
317 |
318 |
319 |
320 |
321 |
322 |
323 |
{children}
;
9 | };
10 |
11 | export default WaveForm;
12 |
--------------------------------------------------------------------------------
/src/constants/updatableRegionProps.ts:
--------------------------------------------------------------------------------
1 | export const UpdatableRegionProps = [
2 | "id",
3 | "start",
4 | "end",
5 | "drag",
6 | "resize",
7 | "color",
8 | "content",
9 | "channelIdx"
10 | ] as const;
11 |
--------------------------------------------------------------------------------
/src/containers/WaveSurfer.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import WaveSurferContext from "../contexts/WaveSurferContext";
3 | import { WaveSurfer as WaveSurferRef } from "../utils/createWavesurfer";
4 | import useWavesurfer from "../hooks/useWavesurfer";
5 |
6 | import { PluginType } from "../types";
7 | import { GenericPlugin } from "wavesurfer.js/dist/base-plugin";
8 | import { WaveSurferOptions } from "wavesurfer.js";
9 |
10 | export interface WaveSurferProps extends Omit {
11 | children: React.ReactNode;
12 | plugins: PluginType[];
13 | onMount: (wavesurferRef: null | WaveSurferRef) => void;
14 | }
15 |
16 |
17 | // TODO: research on ref usage
18 | function WaveSurfer({ children, plugins = [], onMount, ...props }: WaveSurferProps) {
19 | const wavesurfer = useWavesurfer({
20 | plugins,
21 | onMount,
22 | ...props,
23 | });
24 |
25 | return (
26 |
27 | {children}
28 |
29 | );
30 | }
31 |
32 | export default WaveSurfer;
33 |
--------------------------------------------------------------------------------
/src/contexts/WaveSurferContext.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 | import WaveSurfer from 'wavesurfer.js';
3 | import { GenericPlugin } from "wavesurfer.js/dist/base-plugin";
4 | import { PluginDictionary } from "../hooks/useWavesurfer";
5 |
6 | const WaveSurferContext = createContext, GenericPlugin[]] | null>(null);
7 |
8 | export default WaveSurferContext;
9 |
--------------------------------------------------------------------------------
/src/hooks/useRegionEvent.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from "react";
2 | import { Region, RegionEvents } from "wavesurfer.js/dist/plugins/regions";
3 |
4 | import { EventListener } from "../types";
5 |
6 | export type RegionEventListener = (region: Region, ...rest: Parameters>) => void;
7 |
8 | function useRegionEvent(
9 | ref: Region | null | undefined,
10 | eventName: K,
11 | callback?: RegionEventListener
12 | ) {
13 | const callbackRef = useRef | null>(null);
14 |
15 | useEffect(() => {
16 | if (!ref) {
17 | return;
18 | }
19 |
20 | if (callback) {
21 | callbackRef.current = (...args) => callback(ref, ...args);
22 |
23 | ref.on(eventName, callbackRef.current);
24 | }
25 |
26 | return () => {
27 | callbackRef.current && ref.un(eventName, callbackRef.current);
28 | callbackRef.current = null;
29 | };
30 | }, [ref, eventName, callback]);
31 | }
32 |
33 | export default useRegionEvent;
34 |
--------------------------------------------------------------------------------
/src/hooks/useRegionPluginEvent.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from "react";
2 | import RegionsPlugin, { RegionsPluginEvents } from "wavesurfer.js/dist/plugins/regions";
3 |
4 | import { EventListener } from "../types";
5 |
6 | export type RegionPluginEventListener = (...rest: Parameters>) => void;
7 |
8 | // TODO: try to merge it with useRegionEvent
9 | function useRegionPluginEvent(
10 | ref: RegionsPlugin | null | undefined,
11 | eventName: K,
12 | callback?: RegionPluginEventListener
13 | ) {
14 | const callbackRef = useRef | null>(null);
15 |
16 | useEffect(() => {
17 | if (!ref) {
18 | return;
19 | }
20 |
21 | if (callback) {
22 | callbackRef.current = (...args) => callback(...args);
23 |
24 | ref.on(eventName, callbackRef.current);
25 | }
26 |
27 | return () => {
28 | callbackRef.current && ref.un(eventName, callbackRef.current);
29 | callbackRef.current = null;
30 | };
31 | }, [ref, eventName, callback]);
32 | }
33 |
34 | export default useRegionPluginEvent;
35 |
--------------------------------------------------------------------------------
/src/hooks/useWavesurfer.ts:
--------------------------------------------------------------------------------
1 | import {useEffect, useRef, useState} from "react";
2 | import { GenericPlugin } from "wavesurfer.js/dist/base-plugin";
3 | import createWavesurfer, {WaveSurfer as WaveSurferRef, WaveSurfer} from "../utils/createWavesurfer";
4 | import createPlugin from "../utils/createPlugin";
5 | import getDifference from "../utils/getDifference";
6 | import { PluginType } from "../types";
7 |
8 | export type UseWaveSurferParams = {
9 | container?: string | HTMLElement,
10 | plugins: PluginType[],
11 | onMount: (wavesurferRef: null | WaveSurferRef) => any
12 | };
13 |
14 | export type PluginDictionary = Record;
15 |
16 |
17 | function createPluginsMap(curr: PluginDictionary, plugins: PluginType[]): PluginDictionary {
18 | const result: PluginDictionary = {};
19 |
20 | const stack = [...plugins];
21 |
22 | while (stack.length >= 1) {
23 | const node = stack.shift()!;
24 |
25 | const hasThisPluginAlready = !!curr[node.key];
26 |
27 | if (hasThisPluginAlready) {
28 | result[node.key] = curr[node.key]!;
29 | } else {
30 | result[node.key] = createPlugin(node);
31 | }
32 | }
33 |
34 | return result;
35 | }
36 |
37 | export default function useWavesurfer({ container, plugins = [], onMount, ...props }: UseWaveSurferParams) {
38 | const isInitilizing$ = useRef(false);
39 |
40 | const [pluginsMap, setPluginsMap] = useState>({});
41 | // is used to keep track of initialized plugins
42 | const initialized$ = useRef([]);
43 |
44 | const [wavesurfer, setWavesurfer] = useState(null);
45 |
46 | useEffect(() => {
47 | if (!container) return;
48 |
49 | // keep track of container
50 | const prevContainer = container;
51 |
52 | // do not allot to create WaveSurfer instance twice
53 | if (isInitilizing$.current) return;
54 | isInitilizing$.current = true;
55 |
56 |
57 | const _plugins = createPluginsMap(pluginsMap, plugins);
58 |
59 | initialized$.current = Object.keys(_plugins);
60 |
61 | const ws = createWavesurfer({
62 | container,
63 | ...props,
64 | plugins: Object.values(_plugins),
65 | })
66 |
67 | onMount?.(ws);
68 |
69 | setPluginsMap(_plugins);
70 | setWavesurfer(ws);
71 |
72 | return () => {
73 | // if container did not changed, but useEffect is still called,
74 | // prevent destroy if container or all-others hook dependencies are not changed
75 | if (prevContainer === container) return;
76 | ws.destroy();
77 | };
78 | }, [container]);
79 |
80 | useEffect(() => {
81 | if (wavesurfer) {
82 | const _plugins = createPluginsMap(pluginsMap, plugins);
83 |
84 | const { disabled, enabled } = getDifference(
85 | pluginsMap,
86 | _plugins
87 | );
88 |
89 | // destroy plugin, wavesurfer self removes it from plugin array
90 | Object.keys(disabled).forEach(plugKey => {
91 | disabled[plugKey]!.destroy();
92 | })
93 |
94 | Object.keys(enabled).forEach((pluginKey) => {
95 | // do not initialize plugin under the same key twice or more times
96 | if (initialized$.current.includes(pluginKey)) return;
97 |
98 | console.log('register plugin', pluginKey, enabled[pluginKey]);
99 |
100 | wavesurfer?.registerPlugin(enabled[pluginKey]!);
101 | });
102 |
103 | // register only enabled plugins
104 | initialized$.current = Object.keys(enabled);
105 |
106 | setPluginsMap(_plugins);
107 | }
108 | }, [plugins]);
109 |
110 | return [wavesurfer as WaveSurfer, pluginsMap, Object.values(pluginsMap)] as const;
111 | }
112 |
--------------------------------------------------------------------------------
/src/hooks/useWavesurferContext.ts:
--------------------------------------------------------------------------------
1 | import WaveSurferContext from "../contexts/WaveSurferContext";
2 | import {useContext} from "react";
3 |
4 | export default function useWavesurferContext() {
5 | return useContext(WaveSurferContext);
6 | }
7 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import Region from "./components/Region";
2 | import Marker from "./components/Marker";
3 | import WaveSurfer from "./containers/WaveSurfer";
4 | import WaveForm from "./components/WaveForm";
5 | import useWavesurfer from "./hooks/useWavesurfer";
6 | import useWavesurferContext from "./hooks/useWavesurferContext";
7 |
8 | export { Region, WaveSurfer, WaveForm, Marker, useWavesurfer, useWavesurferContext };
9 |
--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
1 | import { GenericPlugin } from "wavesurfer.js/dist/base-plugin";
2 | import { GeneralEventTypes } from "wavesurfer.js/dist/event-emitter";
3 |
4 | export interface PluginType {
5 | key: string;
6 | plugin: GPlug;
7 | options: any;
8 | creator?: string;
9 | }
10 |
11 | export type EventListener = (...args: EventTypes[EventName]) => void;
12 |
--------------------------------------------------------------------------------
/src/utils/createPlugin.ts:
--------------------------------------------------------------------------------
1 | import { GenericPlugin } from "wavesurfer.js/dist/base-plugin";
2 | import { PluginType } from "../types";
3 |
4 | export default function createPlugin(pluginObj: PluginType): GPlug {
5 | const { plugin, options, creator = 'create'} = pluginObj;
6 |
7 | const createMethod: any = plugin[creator as keyof typeof plugin];
8 |
9 | if (!plugin) throw new Error(`Please pass a valid plugin in plugin list`);
10 | if (!creator) throw new Error(`Please pass the creator function name in 'creator' property.`)
11 |
12 | if (typeof createMethod !== 'function') {
13 | throw new Error(`"${creator}" is not callable on given plugin. Please pass a valid 'creator' in plugins list.`)
14 | }
15 |
16 | return createMethod(options);
17 | }
18 |
--------------------------------------------------------------------------------
/src/utils/createWavesurfer.ts:
--------------------------------------------------------------------------------
1 | import WaveSurfer, { WaveSurferOptions } from "wavesurfer.js";
2 |
3 | export default function createWavesurfer(options: WaveSurferOptions): WaveSurfer {
4 | return WaveSurfer.create(options);
5 | }
6 |
7 | export { WaveSurfer };
8 |
--------------------------------------------------------------------------------
/src/utils/getDifference.ts:
--------------------------------------------------------------------------------
1 | import { GenericPlugin } from "wavesurfer.js/dist/base-plugin";
2 | import { PluginDictionary } from "../hooks/useWavesurfer";
3 |
4 | const fromPairs = (arr: Array<[string, T]>): Record => arr.reduce((acc, item) => {
5 | acc[item[0]] = item[1];
6 |
7 | return acc;
8 | }, {} as Record);
9 |
10 | const getDifference = (arr1: PluginDictionary, arr2: PluginDictionary) => {
11 | const nextArr1 = Object.entries(arr1);
12 | const nextArr2 = Object.entries(arr2);
13 |
14 | const disabled = nextArr1.filter(([item]) => nextArr2.findIndex(([nextItem]) => nextItem === item) === -1);
15 |
16 | const enabled = nextArr2.filter(([item]) => nextArr1.findIndex(([nextItem]) => nextItem === item) === -1);
17 |
18 | return { disabled: fromPairs(disabled), enabled: fromPairs(enabled) };
19 | };
20 |
21 | export default getDifference;
22 |
--------------------------------------------------------------------------------
/src/utils/getWaveFormOptionsFromProps.ts:
--------------------------------------------------------------------------------
1 | import { WaveSurferOptions } from "wavesurfer.js";
2 | import { WaveFormProps } from "../components/WaveForm";
3 |
4 |
5 | export const waveFormPropsList = [
6 | "audioRate",
7 | "autoCenter",
8 | "backend",
9 | "barGap",
10 | "barHeight",
11 | "barRadius",
12 | "barWidth",
13 | "cursorColor",
14 | "cursorWidth",
15 | "fillParent",
16 | "height",
17 | "hideScrollbar",
18 | "interact",
19 | "media",
20 | "mediaControls",
21 | "minPxPerSec",
22 | "normalize",
23 | "progressColor",
24 | "splitChannels",
25 | "waveColor",
26 |
27 | "duration",
28 |
29 | "fetchParams"
30 | ] as const;
31 |
32 | const getWaveFormOptionsFromProps = (props: WaveFormProps): Omit => {
33 | if (!props) return {};
34 |
35 | return waveFormPropsList.reduce>((waveFormOptions, optionName) => {
36 | if (!Object.prototype.hasOwnProperty.call(props,optionName)) {
37 | return waveFormOptions;
38 | }
39 |
40 | return {
41 | ...waveFormOptions,
42 | [optionName]: props[optionName]
43 | };
44 | }, {} as Record);
45 | };
46 |
47 | export default getWaveFormOptionsFromProps;
48 |
--------------------------------------------------------------------------------
/src/utils/isReactElement.ts:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default function isReactElement(el: React.ReactNode): el is React.ReactElement {
4 | return !!el && typeof el !== "string" && typeof el !== "number" && typeof el !== "boolean" && "type" in el && "props" in el;
5 | }
6 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "esModuleInterop": true,
4 | "skipLibCheck": true,
5 | "target": "esnext",
6 | "jsx": "react",
7 | "allowJs": true,
8 | "resolveJsonModule": true,
9 | "strict": true,
10 | "allowSyntheticDefaultImports": true,
11 | "noUncheckedIndexedAccess": true,
12 | "module": "esnext",
13 | "moduleResolution": "node",
14 | "outDir": "dist",
15 | "sourceMap": true,
16 | "declaration": true
17 | },
18 | "include": [
19 | "src/**/*"
20 | ],
21 | "exclude": [
22 | "src/**/*.spec.tsx",
23 | "src/setupTests.tsx",
24 | "src/stories",
25 | "dist",
26 | "node_modules"
27 | ]
28 | }
29 |
--------------------------------------------------------------------------------
