├── .gitignore ├── .nvmrc ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── public ├── 07023003-2channel.dat ├── 07023003.mp3 ├── 07030039.dat ├── 07030039.mp3 ├── favicon.ico ├── index.html └── manifest.json └── src ├── App.css ├── App.jsx ├── App.test.js ├── CustomPointMarker.js ├── CustomSegmentMarker.js ├── MarkerFactories.js ├── Point.jsx ├── Segment.jsx ├── SegmentLabelFactory.js ├── SimplePointMarker.js ├── WaveformView.css ├── WaveformView.jsx ├── index.css ├── index.js └── registerServiceWorker.js /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | 4 | # testing 5 | /coverage 6 | 7 | # production 8 | /build 9 | 10 | # misc 11 | .env.local 12 | .env.development.local 13 | .env.test.local 14 | .env.production.local 15 | 16 | npm-debug.log* 17 | yarn-debug.log* 18 | yarn-error.log* 19 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 14.3.0 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | Apache License 3 | Version 2.0, January 2004 4 | http://www.apache.org/licenses/ 5 | 6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 7 | 8 | 1. Definitions. 9 | 10 | "License" shall mean the terms and conditions for use, reproduction, 11 | and distribution as defined by Sections 1 through 9 of this document. 12 | 13 | "Licensor" shall mean the copyright owner or entity authorized by 14 | the copyright owner that is granting the License. 15 | 16 | "Legal Entity" shall mean the union of the acting entity and all 17 | other entities that control, are controlled by, or are under common 18 | control with that entity. For the purposes of this definition, 19 | "control" means (i) the power, direct or indirect, to cause the 20 | direction or management of such entity, whether by contract or 21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 22 | outstanding shares, or (iii) beneficial ownership of such entity. 23 | 24 | "You" (or "Your") shall mean an individual or Legal Entity 25 | exercising permissions granted by this License. 26 | 27 | "Source" form shall mean the preferred form for making modifications, 28 | including but not limited to software source code, documentation 29 | source, and configuration files. 30 | 31 | "Object" form shall mean any form resulting from mechanical 32 | transformation or translation of a Source form, including but 33 | not limited to compiled object code, generated documentation, 34 | and conversions to other media types. 35 | 36 | "Work" shall mean the work of authorship, whether in Source or 37 | Object form, made available under the License, as indicated by a 38 | copyright notice that is included in or attached to the work 39 | (an example is provided in the Appendix below). 40 | 41 | "Derivative Works" shall mean any work, whether in Source or Object 42 | form, that is based on (or derived from) the Work and for which the 43 | editorial revisions, annotations, elaborations, or other modifications 44 | represent, as a whole, an original work of authorship. For the purposes 45 | of this License, Derivative Works shall not include works that remain 46 | separable from, or merely link (or bind by name) to the interfaces of, 47 | the Work and Derivative Works thereof. 48 | 49 | "Contribution" shall mean any work of authorship, including 50 | the original version of the Work and any modifications or additions 51 | to that Work or Derivative Works thereof, that is intentionally 52 | submitted to Licensor for inclusion in the Work by the copyright owner 53 | or by an individual or Legal Entity authorized to submit on behalf of 54 | the copyright owner. For the purposes of this definition, "submitted" 55 | means any form of electronic, verbal, or written communication sent 56 | to the Licensor or its representatives, including but not limited to 57 | communication on electronic mailing lists, source code control systems, 58 | and issue tracking systems that are managed by, or on behalf of, the 59 | Licensor for the purpose of discussing and improving the Work, but 60 | excluding communication that is conspicuously marked or otherwise 61 | designated in writing by the copyright owner as "Not a Contribution." 62 | 63 | "Contributor" shall mean Licensor and any individual or Legal Entity 64 | on behalf of whom a Contribution has been received by Licensor and 65 | subsequently incorporated within the Work. 66 | 67 | 2. Grant of Copyright License. Subject to the terms and conditions of 68 | this License, each Contributor hereby grants to You a perpetual, 69 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 70 | copyright license to reproduce, prepare Derivative Works of, 71 | publicly display, publicly perform, sublicense, and distribute the 72 | Work and such Derivative Works in Source or Object form. 73 | 74 | 3. Grant of Patent License. Subject to the terms and conditions of 75 | this License, each Contributor hereby grants to You a perpetual, 76 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 77 | (except as stated in this section) patent license to make, have made, 78 | use, offer to sell, sell, import, and otherwise transfer the Work, 79 | where such license applies only to those patent claims licensable 80 | by such Contributor that are necessarily infringed by their 81 | Contribution(s) alone or by combination of their Contribution(s) 82 | with the Work to which such Contribution(s) was submitted. If You 83 | institute patent litigation against any entity (including a 84 | cross-claim or counterclaim in a lawsuit) alleging that the Work 85 | or a Contribution incorporated within the Work constitutes direct 86 | or contributory patent infringement, then any patent licenses 87 | granted to You under this License for that Work shall terminate 88 | as of the date such litigation is filed. 89 | 90 | 4. Redistribution. You may reproduce and distribute copies of the 91 | Work or Derivative Works thereof in any medium, with or without 92 | modifications, and in Source or Object form, provided that You 93 | meet the following conditions: 94 | 95 | (a) You must give any other recipients of the Work or 96 | Derivative Works a copy of this License; and 97 | 98 | (b) You must cause any modified files to carry prominent notices 99 | stating that You changed the files; and 100 | 101 | (c) You must retain, in the Source form of any Derivative Works 102 | that You distribute, all copyright, patent, trademark, and 103 | attribution notices from the Source form of the Work, 104 | excluding those notices that do not pertain to any part of 105 | the Derivative Works; and 106 | 107 | (d) If the Work includes a "NOTICE" text file as part of its 108 | distribution, then any Derivative Works that You distribute must 109 | include a readable copy of the attribution notices contained 110 | within such NOTICE file, excluding those notices that do not 111 | pertain to any part of the Derivative Works, in at least one 112 | of the following places: within a NOTICE text file distributed 113 | as part of the Derivative Works; within the Source form or 114 | documentation, if provided along with the Derivative Works; or, 115 | within a display generated by the Derivative Works, if and 116 | wherever such third-party notices normally appear. The contents 117 | of the NOTICE file are for informational purposes only and 118 | do not modify the License. You may add Your own attribution 119 | notices within Derivative Works that You distribute, alongside 120 | or as an addendum to the NOTICE text from the Work, provided 121 | that such additional attribution notices cannot be construed 122 | as modifying the License. 123 | 124 | You may add Your own copyright statement to Your modifications and 125 | may provide additional or different license terms and conditions 126 | for use, reproduction, or distribution of Your modifications, or 127 | for any such Derivative Works as a whole, provided Your use, 128 | reproduction, and distribution of the Work otherwise complies with 129 | the conditions stated in this License. 130 | 131 | 5. Submission of Contributions. Unless You explicitly state otherwise, 132 | any Contribution intentionally submitted for inclusion in the Work 133 | by You to the Licensor shall be under the terms and conditions of 134 | this License, without any additional terms or conditions. 135 | Notwithstanding the above, nothing herein shall supersede or modify 136 | the terms of any separate license agreement you may have executed 137 | with Licensor regarding such Contributions. 138 | 139 | 6. Trademarks. This License does not grant permission to use the trade 140 | names, trademarks, service marks, or product names of the Licensor, 141 | except as required for reasonable and customary use in describing the 142 | origin of the Work and reproducing the content of the NOTICE file. 143 | 144 | 7. Disclaimer of Warranty. Unless required by applicable law or 145 | agreed to in writing, Licensor provides the Work (and each 146 | Contributor provides its Contributions) on an "AS IS" BASIS, 147 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 148 | implied, including, without limitation, any warranties or conditions 149 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 150 | PARTICULAR PURPOSE. You are solely responsible for determining the 151 | appropriateness of using or redistributing the Work and assume any 152 | risks associated with Your exercise of permissions under this License. 153 | 154 | 8. Limitation of Liability. In no event and under no legal theory, 155 | whether in tort (including negligence), contract, or otherwise, 156 | unless required by applicable law (such as deliberate and grossly 157 | negligent acts) or agreed to in writing, shall any Contributor be 158 | liable to You for damages, including any direct, indirect, special, 159 | incidental, or consequential damages of any character arising as a 160 | result of this License or out of the use or inability to use the 161 | Work (including but not limited to damages for loss of goodwill, 162 | work stoppage, computer failure or malfunction, or any and all 163 | other commercial damages or losses), even if such Contributor 164 | has been advised of the possibility of such damages. 165 | 166 | 9. Accepting Warranty or Additional Liability. While redistributing 167 | the Work or Derivative Works thereof, You may choose to offer, 168 | and charge a fee for, acceptance of support, warranty, indemnity, 169 | or other liability obligations and/or rights consistent with this 170 | License. However, in accepting such obligations, You may act only 171 | on Your own behalf and on Your sole responsibility, not on behalf 172 | of any other Contributor, and only if You agree to indemnify, 173 | defend, and hold each Contributor harmless for any liability 174 | incurred by, or claims asserted against, such Contributor by reason 175 | of your accepting any such warranty or additional liability. 176 | 177 | END OF TERMS AND CONDITIONS 178 | 179 | APPENDIX: How to apply the Apache License to your work. 180 | 181 | To apply the Apache License to your work, attach the following 182 | boilerplate notice, with the fields enclosed by brackets "[]" 183 | replaced with your own identifying information. (Don't include 184 | the brackets!) The text should be enclosed in the appropriate 185 | comment syntax for the file format. We also recommend that a 186 | file or class name and description of purpose be included on the 187 | same "printed page" as the copyright notice for easier 188 | identification within third-party archives. 189 | 190 | Copyright [yyyy] [name of copyright owner] 191 | 192 | Licensed under the Apache License, Version 2.0 (the "License"); 193 | you may not use this file except in compliance with the License. 194 | You may obtain a copy of the License at 195 | 196 | http://www.apache.org/licenses/LICENSE-2.0 197 | 198 | Unless required by applicable law or agreed to in writing, software 199 | distributed under the License is distributed on an "AS IS" BASIS, 200 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 201 | See the License for the specific language governing permissions and 202 | limitations under the License. 203 | 204 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Peaks.js React Example 2 | 3 | This is a simple example of how to use [Peaks.js](https://github.com/bbc/peaks.js) 4 | in a React application. 5 | 6 | This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app). 7 | 8 | Note that this is just a demo and not a feature-complete reusable React component for Peaks.js. 9 | 10 | # Getting started 11 | 12 | Ensure you have Node.js 14.3.0 or later installed, then: 13 | 14 | ```bash 15 | git clone git@github.com:chrisn/peaksjs-react-example.git 16 | cd peaksjs-react-example 17 | npm install 18 | npm start 19 | ``` 20 | 21 | This should open your web browser to view the demo at 22 | http://localhost:3000. 23 | 24 | # Copyright 25 | 26 | Copyright 2021 Chris Needham 27 | 28 | # License 29 | 30 | Licensed under the Apache License, Version 2.0 (the "License"); 31 | you may not use this file except in compliance with the License. 32 | You may obtain a copy of the License at 33 | 34 | http://www.apache.org/licenses/LICENSE-2.0 35 | 36 | Unless required by applicable law or agreed to in writing, software 37 | distributed under the License is distributed on an "AS IS" BASIS, 38 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 39 | See the License for the specific language governing permissions and 40 | limitations under the License. 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "peaksjs-react-example", 3 | "version": "0.1.0", 4 | "license": "Apache-2.0", 5 | "dependencies": { 6 | "konva": "~9.3.20", 7 | "peaks.js": "~4.0.0-beta.1", 8 | "react": "~18.2.0", 9 | "react-bootstrap": "~1.6.7", 10 | "react-dom": "~18.2.0", 11 | "waveform-data": "~4.5.1" 12 | }, 13 | "devDependencies": { 14 | "@babel/plugin-proposal-private-property-in-object": "^7.21.11", 15 | "react-scripts": "~5.0.1" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test --env=jsdom", 21 | "eject": "react-scripts eject" 22 | }, 23 | "browserslist": [ 24 | ">0.2%", 25 | "not dead", 26 | "not ie <= 11", 27 | "not op_mini all" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /public/07023003-2channel.dat: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisn/peaksjs-react-example/40a013afd9fafeaf0d4ca7f27d52ee404afe7223/public/07023003-2channel.dat -------------------------------------------------------------------------------- /public/07023003.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisn/peaksjs-react-example/40a013afd9fafeaf0d4ca7f27d52ee404afe7223/public/07023003.mp3 -------------------------------------------------------------------------------- /public/07030039.dat: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisn/peaksjs-react-example/40a013afd9fafeaf0d4ca7f27d52ee404afe7223/public/07030039.dat -------------------------------------------------------------------------------- /public/07030039.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisn/peaksjs-react-example/40a013afd9fafeaf0d4ca7f27d52ee404afe7223/public/07030039.mp3 -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisn/peaksjs-react-example/40a013afd9fafeaf0d4ca7f27d52ee404afe7223/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | 27 | 28 | React App 29 | 30 | 31 | 34 |
35 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /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", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-header { 6 | background-color: #222; 7 | height: 150px; 8 | padding: 20px; 9 | color: white; 10 | } 11 | 12 | .App-intro { 13 | font-size: large; 14 | width: 1000px; 15 | margin: 20px auto 20px auto; 16 | text-align: left; 17 | } 18 | 19 | footer { 20 | margin-top: 80px; 21 | height: 80px; 22 | background-color: #222; 23 | color: white; 24 | display: flex; 25 | align-items: center; 26 | } 27 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | ButtonToolbar, 4 | Container, 5 | Table, 6 | ToggleButton, 7 | ToggleButtonGroup 8 | } from 'react-bootstrap'; 9 | 10 | import Point from './Point'; 11 | import Segment from './Segment'; 12 | import WaveformView from './WaveformView'; 13 | import './App.css'; 14 | 15 | const urls = { 16 | 1: { 17 | audioUrl: '07030039.mp3', 18 | audioContentType: 'audio/mpeg', 19 | waveformDataUrl: '07030039.dat' 20 | }, 21 | 22 | 2: { 23 | audioUrl: '07023003.mp3', 24 | audioContentType: 'audio/mpeg', 25 | waveformDataUrl: '07023003-2channel.dat' 26 | } 27 | }; 28 | 29 | class App extends Component { 30 | constructor() { 31 | super(); 32 | 33 | this.state = { 34 | ...urls[1] 35 | }; 36 | } 37 | 38 | render() { 39 | return ( 40 | 41 | 42 |

43 | Peaks.js React Example 44 |

45 | 46 |

47 | This is a simple example of how to use Peaks.js in a React application. 48 |

49 | 50 |

51 | Audio content is copyright BBC, from the BBC Sound Effects library, 52 | used under the terms of the RemArc Licence. 53 |

54 | 55 |

Select audio

56 | 57 | 58 | 63 | Bird song  64 | Car passing 65 | 66 | 67 | 68 | 75 | 76 | {this.renderSegments()} 77 | {this.renderPoints()} 78 | 79 | 80 | ); 81 | } 82 | 83 | handleSelectedAudioChange = (e) => { 84 | this.setState({ 85 | audioUrl: urls[e].audioUrl, 86 | audioContentType: urls[e].audioContentType, 87 | waveformDataUrl: urls[e].waveformDataUrl 88 | }); 89 | }; 90 | 91 | setSegments = (segments) => { 92 | this.setState({ segments }); 93 | }; 94 | 95 | renderSegments() { 96 | const segments = this.state.segments; 97 | 98 | if (!segments) { 99 | return null; 100 | } 101 | 102 | if (segments.length === 0) { 103 | return null; 104 | } 105 | 106 | return ( 107 | 108 |

Segments

109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | {this.renderSegmentRows(segments)} 120 | 121 |
IDStart timeEnd timeLabel text
122 | 123 | ); 124 | } 125 | 126 | renderSegmentRows(segments) { 127 | return segments.map((segment) => 128 | 135 | ); 136 | } 137 | 138 | setPoints = (points) => { 139 | this.setState({ points }); 140 | }; 141 | 142 | renderPoints() { 143 | const points = this.state.points; 144 | 145 | if (!points) { 146 | return null; 147 | } 148 | 149 | if (points.length === 0) { 150 | return null; 151 | } 152 | 153 | return ( 154 | 155 |

Points

, 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | {this.renderPointRows(points)} 166 | 167 |
IDTimeLabel text
168 | 169 | ); 170 | } 171 | 172 | renderPointRows(points) { 173 | return points.map((point) => 174 | 180 | ); 181 | } 182 | } 183 | 184 | export default App; 185 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /src/CustomPointMarker.js: -------------------------------------------------------------------------------- 1 | import { Label, Tag } from 'konva/lib/shapes/Label'; 2 | import { Line } from 'konva/lib/shapes/Line'; 3 | import { Text } from 'konva/lib/shapes/Text'; 4 | 5 | class CustomPointMarker { 6 | constructor(options) { 7 | this._options = options; 8 | } 9 | 10 | init(group) { 11 | this._group = group; 12 | 13 | this._label = new Label({ 14 | x: 0.5, 15 | y: 0.5 16 | }); 17 | 18 | this._tag = new Tag({ 19 | fill: this._options.color, 20 | stroke: this._options.color, 21 | strokeWidth: 1, 22 | pointerDirection: 'down', 23 | pointerWidth: 10, 24 | pointerHeight: 10, 25 | lineJoin: 'round', 26 | shadowColor: 'black', 27 | shadowBlur: 10, 28 | shadowOffsetX: 3, 29 | shadowOffsetY: 3, 30 | shadowOpacity: 0.3 31 | }); 32 | 33 | this._label.add(this._tag); 34 | 35 | this._text = new Text({ 36 | text: this._options.point.labelText, 37 | fontFamily: 'Calibri', 38 | fontSize: 14, 39 | padding: 5, 40 | fill: 'white' 41 | }); 42 | 43 | this._label.add(this._text); 44 | 45 | // Vertical Line - create with default y and points, the real values 46 | // are set in fitToView(). 47 | this._line = new Line({ 48 | x: 0, 49 | y: 0, 50 | stroke: this._options.color, 51 | strokeWidth: 1 52 | }); 53 | 54 | group.add(this._label); 55 | group.add(this._line); 56 | 57 | this.fitToView(); 58 | 59 | this.bindEventHandlers(); 60 | }; 61 | 62 | bindEventHandlers() { 63 | this._group.on('mouseenter', () => { 64 | document.body.style.cursor = 'move'; 65 | }); 66 | 67 | this._group.on('mouseleave', () => { 68 | document.body.style.cursor = 'default'; 69 | }); 70 | }; 71 | 72 | fitToView() { 73 | const height = this._options.layer.getHeight(); 74 | 75 | const labelHeight = this._text.height() + 2 * this._text.padding(); 76 | const offsetTop = 14; 77 | const offsetBottom = 26; 78 | 79 | this._group.y(offsetTop + labelHeight + 0.5); 80 | 81 | this._line.points([0.5, 0, 0.5, height - labelHeight - offsetTop - offsetBottom]); 82 | }; 83 | } 84 | 85 | export default CustomPointMarker; 86 | -------------------------------------------------------------------------------- /src/CustomSegmentMarker.js: -------------------------------------------------------------------------------- 1 | import { Label, Tag } from 'konva/lib/shapes/Label'; 2 | import { Line } from 'konva/lib/shapes/Line'; 3 | import { Text } from 'konva/lib/shapes/Text'; 4 | 5 | class CustomSegmentMarker { 6 | constructor(options) { 7 | this._options = options; 8 | } 9 | 10 | init(group) { 11 | this._group = group; 12 | 13 | this._label = new Label({ 14 | x: 0.5, 15 | y: 0.5 16 | }); 17 | 18 | const color = this._options.segment.color; 19 | 20 | this._tag = new Tag({ 21 | fill: color, 22 | stroke: color, 23 | strokeWidth: 1, 24 | pointerDirection: 'down', 25 | pointerWidth: 10, 26 | pointerHeight: 10, 27 | lineJoin: 'round', 28 | shadowColor: 'black', 29 | shadowBlur: 10, 30 | shadowOffsetX: 3, 31 | shadowOffsetY: 3, 32 | shadowOpacity: 0.3 33 | }); 34 | 35 | this._label.add(this._tag); 36 | 37 | let labelText = this._options.segment.labelText; 38 | 39 | if (labelText) { 40 | labelText += ' '; 41 | } 42 | 43 | labelText += this._options.startMarker ? 'Start' : 'End'; 44 | 45 | this._text = new Text({ 46 | text: labelText, 47 | fontFamily: 'Calibri', 48 | fontSize: 14, 49 | padding: 5, 50 | fill: 'white' 51 | }); 52 | 53 | this._label.add(this._text); 54 | 55 | // Vertical Line - create with default y and points, the real values 56 | // are set in fitToView(). 57 | this._line = new Line({ 58 | x: 0, 59 | y: 0, 60 | stroke: color, 61 | strokeWidth: 1 62 | }); 63 | 64 | group.add(this._label); 65 | group.add(this._line); 66 | 67 | this.fitToView(); 68 | 69 | this.bindEventHandlers(); 70 | } 71 | 72 | bindEventHandlers() { 73 | this._group.on('mouseenter', () => { 74 | document.body.style.cursor = 'move'; 75 | }); 76 | 77 | this._group.on('mouseleave', () => { 78 | document.body.style.cursor = 'default'; 79 | }); 80 | }; 81 | 82 | fitToView() { 83 | const height = this._options.layer.getHeight(); 84 | 85 | const labelHeight = this._text.height() + 2 * this._text.padding(); 86 | const offsetTop = 14; 87 | const offsetBottom = 26; 88 | 89 | this._group.y(offsetTop + labelHeight + 0.5); 90 | 91 | this._line.points([0.5, 0, 0.5, height - labelHeight - offsetTop - offsetBottom]); 92 | } 93 | } 94 | 95 | export default CustomSegmentMarker; 96 | -------------------------------------------------------------------------------- /src/MarkerFactories.js: -------------------------------------------------------------------------------- 1 | import CustomPointMarker from './CustomPointMarker'; 2 | import SimplePointMarker from './SimplePointMarker'; 3 | import CustomSegmentMarker from './CustomSegmentMarker'; 4 | 5 | export function createPointMarker(options) { 6 | if (options.view === 'zoomview') { 7 | return new CustomPointMarker(options); 8 | } 9 | else { 10 | return new SimplePointMarker(options); 11 | } 12 | } 13 | 14 | export function createSegmentMarker(options) { 15 | if (options.view === 'zoomview') { 16 | return new CustomSegmentMarker(options); 17 | } 18 | 19 | return null; 20 | } 21 | -------------------------------------------------------------------------------- /src/Point.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Point extends Component { 4 | render() { 5 | return ( 6 | 7 | {this.props.id} 8 | {this.props.time} 9 | {this.props.labelText} 10 | 11 | ); 12 | } 13 | } 14 | 15 | export default Point; 16 | -------------------------------------------------------------------------------- /src/Segment.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Segment extends Component { 4 | render() { 5 | return ( 6 | 7 | {this.props.id} 8 | {this.props.startTime} 9 | {this.props.endTime} 10 | {this.props.labelText} 11 | 12 | ); 13 | } 14 | } 15 | 16 | export default Segment; 17 | -------------------------------------------------------------------------------- /src/SegmentLabelFactory.js: -------------------------------------------------------------------------------- 1 | import { Label, Tag } from 'konva/lib/shapes/Label'; 2 | import { Text } from 'konva/lib/shapes/Text'; 3 | 4 | export function createSegmentLabel(options) { 5 | if (options.view === 'overview') { 6 | return null; 7 | } 8 | 9 | const label = new Label({ 10 | x: 12, 11 | y: 16 12 | }); 13 | 14 | label.add(new Tag({ 15 | fill: 'black', 16 | pointerDirection: 'none', 17 | shadowColor: 'black', 18 | shadowBlur: 10, 19 | shadowOffsetX: 3, 20 | shadowOffsetY: 3, 21 | shadowOpacity: 0.3 22 | })); 23 | 24 | label.add(new Text({ 25 | text: options.segment.labelText, 26 | fontSize: 14, 27 | fontFamily: 'Calibri', 28 | fill: 'white', 29 | padding: 8 30 | })); 31 | 32 | return label; 33 | } 34 | -------------------------------------------------------------------------------- /src/SimplePointMarker.js: -------------------------------------------------------------------------------- 1 | import { Line } from 'konva/lib/shapes/Line'; 2 | 3 | function SimplePointMarker(options) { 4 | this._options = options; 5 | } 6 | 7 | SimplePointMarker.prototype.init = function(group) { 8 | this._group = group; 9 | 10 | // Vertical Line - create with default y and points, the real values 11 | // are set in fitToView(). 12 | this._line = new Line({ 13 | x: 0, 14 | y: 0, 15 | stroke: this._options.color, 16 | strokeWidth: 1 17 | }); 18 | 19 | group.add(this._line); 20 | 21 | this.fitToView(); 22 | }; 23 | 24 | SimplePointMarker.prototype.fitToView = function() { 25 | const height = this._options.layer.getHeight(); 26 | 27 | this._line.points([0.5, 0, 0.5, height]); 28 | }; 29 | 30 | export default SimplePointMarker; 31 | -------------------------------------------------------------------------------- /src/WaveformView.css: -------------------------------------------------------------------------------- 1 | .zoomview-container { 2 | box-shadow: 3px 3px 20px #919191; 3 | -moz-box-shadow: 3px 3px 20px #919191; 4 | -webkit-box-shadow: 3px 3px 20px #919191; 5 | margin: 24px 0 24px 0; 6 | line-height: 0; 7 | height: 200px; 8 | } 9 | 10 | .overview-container { 11 | box-shadow: 3px 3px 20px #919191; 12 | -moz-box-shadow: 3px 3px 20px #919191; 13 | -webkit-box-shadow: 3px 3px 20px #919191; 14 | margin: 0 0 24px 0; 15 | line-height: 0; 16 | height: 85px; 17 | } 18 | -------------------------------------------------------------------------------- /src/WaveformView.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Button, ButtonToolbar } from 'react-bootstrap'; 4 | import Peaks from 'peaks.js'; 5 | 6 | import { createPointMarker, createSegmentMarker } from './MarkerFactories'; 7 | import { createSegmentLabel } from './SegmentLabelFactory'; 8 | 9 | import './WaveformView.css'; 10 | 11 | class WaveformView extends Component { 12 | constructor(props) { 13 | super(props); 14 | 15 | this.zoomviewWaveformRef = React.createRef(); 16 | this.overviewWaveformRef = React.createRef(); 17 | this.audioElementRef = React.createRef(); 18 | this.peaks = null; 19 | } 20 | 21 | render() { 22 | console.log("WaveformView.render, audioUrl:", this.props.audioUrl, 'waveformDataUrl:', this.props.waveformDataUrl); 23 | 24 | return ( 25 |
26 |
27 |
28 | 29 | 33 | 34 | {this.renderButtons()} 35 |
36 | ); 37 | } 38 | 39 | renderButtons() { 40 | return ( 41 | 42 |   43 |   44 |   45 |   46 | 47 | 48 | ); 49 | } 50 | 51 | componentDidMount() { 52 | console.log("WaveformComponent.componentDidMount"); 53 | 54 | this.initPeaks(); 55 | } 56 | 57 | componentDidUpdate(prevProps, prevState, snapshot) { 58 | console.log('WaveformComponent.componentDidUpdate'); 59 | 60 | if (this.props.audioUrl === prevProps.audioUrl) { 61 | return; 62 | } 63 | 64 | console.log('props', this.props); 65 | console.log('prevProps', prevProps); 66 | 67 | this.initPeaks(); 68 | } 69 | 70 | initPeaks() { 71 | const options = { 72 | overview: { 73 | container: this.overviewWaveformRef.current 74 | }, 75 | zoomview: { 76 | container: this.zoomviewWaveformRef.current 77 | }, 78 | mediaElement: this.audioElementRef.current, 79 | keyboard: true, 80 | logger: console.error.bind(console), 81 | createSegmentMarker: createSegmentMarker, 82 | createSegmentLabel: createSegmentLabel, 83 | createPointMarker: createPointMarker 84 | }; 85 | 86 | if (this.props.waveformDataUrl) { 87 | options.dataUri = { 88 | arraybuffer: this.props.waveformDataUrl 89 | }; 90 | } 91 | else if (this.props.audioContext) { 92 | options.webAudio = { 93 | audioContext: this.props.audioContext 94 | }; 95 | } 96 | 97 | this.audioElementRef.current.src = this.props.audioUrl; 98 | 99 | if (this.peaks) { 100 | this.peaks.destroy(); 101 | this.peaks = null; 102 | } 103 | 104 | Peaks.init(options, (err, peaks) => { 105 | this.peaks = peaks; 106 | this.onPeaksReady(); 107 | }); 108 | } 109 | 110 | componentWillUnmount() { 111 | console.log('WaveformView.componentWillUnmount'); 112 | 113 | if (this.peaks) { 114 | this.peaks.destroy(); 115 | } 116 | } 117 | 118 | zoomIn = () => { 119 | if (this.peaks) { 120 | this.peaks.zoom.zoomIn(); 121 | } 122 | }; 123 | 124 | zoomOut = () => { 125 | if (this.peaks) { 126 | this.peaks.zoom.zoomOut(); 127 | } 128 | }; 129 | 130 | addSegment = () => { 131 | if (this.peaks) { 132 | const time = this.peaks.player.getCurrentTime(); 133 | 134 | this.peaks.segments.add({ 135 | startTime: time, 136 | endTime: time + 10, 137 | labelText: 'Test Segment', 138 | editable: true 139 | }); 140 | } 141 | }; 142 | 143 | addPoint = () => { 144 | if (this.peaks) { 145 | const time = this.peaks.player.getCurrentTime(); 146 | 147 | this.peaks.points.add({ 148 | time: time, 149 | labelText: 'Test Point', 150 | editable: true 151 | }); 152 | } 153 | }; 154 | 155 | logMarkers = () => { 156 | if (this.peaks) { 157 | this.props.setSegments(this.peaks.segments.getSegments()); 158 | this.props.setPoints(this.peaks.points.getPoints()); 159 | } 160 | } 161 | 162 | onPeaksReady = () => { 163 | // Do something when the Peaks instance is ready for use 164 | console.log("Peaks.js is ready"); 165 | } 166 | } 167 | 168 | WaveformView.propTypes = { 169 | audioUrl: PropTypes.string, 170 | audioContentType: PropTypes.string, 171 | waveformDataUrl: PropTypes.string, 172 | audioContext: PropTypes.object, 173 | setSegments: PropTypes.func, 174 | setPoints: PropTypes.func 175 | }; 176 | 177 | export default WaveformView; 178 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client'; 2 | 3 | import App from './App'; 4 | import registerServiceWorker from './registerServiceWorker'; 5 | import './index.css'; 6 | 7 | const container = document.getElementById('root'); 8 | const root = createRoot(container); 9 | root.render(); 10 | 11 | registerServiceWorker(); 12 | -------------------------------------------------------------------------------- /src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | export default function register() { 12 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 13 | window.addEventListener('load', () => { 14 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 15 | navigator.serviceWorker 16 | .register(swUrl) 17 | .then(registration => { 18 | registration.onupdatefound = () => { 19 | const installingWorker = registration.installing; 20 | installingWorker.onstatechange = () => { 21 | if (installingWorker.state === 'installed') { 22 | if (navigator.serviceWorker.controller) { 23 | // At this point, the old content will have been purged and 24 | // the fresh content will have been added to the cache. 25 | // It's the perfect time to display a "New content is 26 | // available; please refresh." message in your web app. 27 | console.log('New content is available; please refresh.'); 28 | } else { 29 | // At this point, everything has been precached. 30 | // It's the perfect time to display a 31 | // "Content is cached for offline use." message. 32 | console.log('Content is cached for offline use.'); 33 | } 34 | } 35 | }; 36 | }; 37 | }) 38 | .catch(error => { 39 | console.error('Error during service worker registration:', error); 40 | }); 41 | }); 42 | } 43 | } 44 | 45 | export function unregister() { 46 | if ('serviceWorker' in navigator) { 47 | navigator.serviceWorker.ready.then(registration => { 48 | registration.unregister(); 49 | }); 50 | } 51 | } 52 | --------------------------------------------------------------------------------