19 | 
26 |
27 |
38 |
26 |
27 | vue-peaks
28 |29 | A lightweight Vue wrapper around the 30 | bbc/peaks.js 35 | audio waveform UI component. 36 |
37 |
42 |
181 |
43 |
180 |
44 |
60 |
61 |
62 |
179 |
63 |
64 |
65 |
67 |
68 |
75 |
77 |
78 |
85 |
87 |
88 |
95 |
97 |
98 |
105 |
107 |
108 |
115 |
117 |
118 |
125 |
127 |
128 |
135 |
137 |
138 |
145 |
147 |
148 |
155 |
157 |
158 |
165 |
167 |
168 |
175 |
177 |
178 |
413 |
472 |
473 |
479 |
480 |
481 |
550 |
--------------------------------------------------------------------------------
/src/components/AudioPeaksWidget.vue:
--------------------------------------------------------------------------------
1 |
78 |
79 |
134 |
135 |
190 |
--------------------------------------------------------------------------------
/src/components/__tests__/Credits.spec.ts:
--------------------------------------------------------------------------------
1 | import { describe, it, expect } from 'vitest';
2 |
3 | import { mount } from '@vue/test-utils';
4 | import Credits from '../../documentation/Credits.vue';
5 |
6 | describe('Credits', () => {
7 | it('renders properly', () => {
8 | const wrapper = mount(Credits, {});
9 | expect(wrapper.html()).toContain('Lidija Roos');
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/src/documentation/AccessingThePeaksInstance.vue:
--------------------------------------------------------------------------------
1 |
2 |
414 |
415 |
419 |
420 |
424 |
425 |
426 |
427 |
428 |
429 |
433 |
434 |
438 |
439 |
440 |
441 |
442 |
443 |
447 |
448 |
449 |
458 |
459 |
468 |
469 |
470 |
471 |
474 |
475 |
476 | Zoom level: {{ zoomLevel }}
477 |
478 |
3 |
53 |
54 |
--------------------------------------------------------------------------------
/src/documentation/AvailableProperties.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
4 |
52 | 5 | You might need to access the peaks.js instance to call various functions 6 | on their extensive 7 | API. 8 |
9 |10 | In the hosting component, get a reference to the AudioPeaks child 11 | component and, for convenience, a directly computed property to the 12 | actual peaks.js instance: 13 |
14 |
15 |
28 | Now you can access the instance and it's methods by using the reference, 29 | like in this example: 30 |
31 |
32 |
48 | Remember, that the instance is available only after the child has been 49 | mounted and peaks.js has been initialized. 50 |
51 |
5 |
38 |
39 |
--------------------------------------------------------------------------------
/src/documentation/Credits.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
19 | 7 | Vue-peaks offers it's own properties for customization. Plus, you can 8 | configure the underlying peaks.js instance via the options property (of 9 | type PeaksOptions). 10 |
11 |12 | Read more about each property directly in the 13 | source code comments. 17 |
18 |
23 |
37 | This project uses
3 |-
4 |
- 5 | peaks.js, a client-side JavaScript component to display and interact with audio 10 | waveforms in the browser. (Released under the LGPL-3.0 license, by the 11 | British Broadcasting Corporation and contributors) 12 | 13 |
- 14 | Vue.js, the progressive JavaScript framework. (Released under the MIT License, 19 | Copyright © 2014-2021 Evan You) 20 | 21 |
- 22 | Bulma, the modern CSS framework that just works. (Released under the MIT 27 | License, by Jeremy Thomas) 28 | 29 |
- 30 | Bulmaswatch, free themes for Bulma. (Released under the MIT License, by Jenil 35 | Gogari) 36 | 37 |
- 38 | Material Design Icons, the original. Following Google's Material Design guidelines for system 43 | icons. (Icons released under the Apache 2.0 License, by pictogrammers.com) 44 | 45 |
- 46 | 50 | Jest, a delightful JavaScript Testing Framework. (Released under the MIT 52 | License, by Facebook) 53 | 54 |
- 55 | Music from the Album "Not For Sale" by Lidija Roos (Released to the 56 | public, by Lidija Roos) 57 | 58 | 59 |
- 60 | @highlightjs/vue-plugin, provides a highlightjs component for use in your Vue.js 3 applications. 65 | (Released under the BSD-3-Clause license, by the highlight.js team) 66 | 67 |
- 68 | @rushstack/eslint-patch, a patch that improves how ESLint loads plugins when working in a 73 | monorepo with a reusable toolchain. (Released under the MIT License, by 74 | Microsoft) 75 | 76 |
- 77 | @types/jsdom, @types/node, the repository for high quality TypeScript type definitions. (Released 82 | under the MIT License, by various contributors) 83 | 84 |
- 85 | vite, vitest, @vitejs/plugin-vue, next Generation Frontend Tooling. (Released under the MIT License, by 90 | the vite team) 91 | 92 |
- 93 | eslint, a tool for identifying and reporting on patterns found in 98 | ECMAScript/JavaScript code. (Released under the MIT License, by the eslint 99 | team) 100 | 101 |
- 102 | jsdom, a pure-JavaScript implementation of many web standards. (Released under 107 | the MIT License, by the jsdom team) 108 | 109 |
- 110 | npm-run-all, a CLI tool to run multiple npm-scripts in parallel or sequential. 115 | (Released under the MIT License, by Toru Nagashima) 116 | 117 |
- 118 | prettier, an opinionated Code Formatter. (Released under the MIT License, by the 123 | prettier team) 124 | 125 |
- 126 | typescript, a language for application-scale JavaScript. (Released under the 131 | Apache-2.0 license, by Microsoft) 132 | 133 |
- 134 | vue-tsc, high-performance tooling for Vue. (Released under the MIT License, by 139 | Johnson Chu) 140 | 141 |
- 142 | VueUse, a Collection of essential Vue Composition Utilities (Released under the 147 | MIT License, by the VueUse team) 148 | 149 |
- 150 | bulma-slider, Bulma's extension to display sliders (Released under the MIT License, 155 | by Wikiki) 156 | 157 |
Initial code is taken from
160 | 161 |-
162 |
- 163 | peaks-vue-demo, by Giovanni Candeo (MIT-licensed) 168 | 169 |
- 170 | vue-waveform-template, by Thomas Parisot (MIT-licensed) 175 | 176 |
8 |
59 |
9 |
16 | 10 | This is a showcase for a simple media player. It's available with 11 | vue-peaks as ready-made component, 12 | AudioPeaksWidget.vue, which you can use as-is 13 | or adapt to your needs. 14 |
15 |
17 |
36 |
37 |
58 |
38 |
55 |
56 |
57 |
39 |
48 |
51 |
40 |
46 |
47 |
60 |
70 |
71 |
--------------------------------------------------------------------------------
/src/documentation/ExampleErrorHandling.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
61 |
69 | 62 | You can find the complete 63 | Widget SFC source code on GitHub. 67 |
68 |7 | Errors stemming from peaks.js and from the 8 | HTMLMediaElement's error event 12 | (like a wrong URL or non-responding server) are reported using the 13 | @error event. You can then handle the error event 14 | as you see fit. There is a known issue [#18] in simple mode. 15 |
16 |17 | vue-peaks has simple internal error handling. In case of any error, the 18 | AudioPeaks gets annotated with the 19 | hasError class, causing a default red striped 20 | display on all views, plus the title attribute gets set to the error 21 | message. 22 |
23 |Wrong URL
24 |
25 |
56 |
26 |
43 | 27 | For example, a non-existing URL like 28 | https://example.com/missing.mp3 29 | will never load any content. 30 |
31 |
44 |
55 |
45 |
46 |
50 |
51 |
52 |
53 |
54 | CORS issue
57 |
58 |
92 |
93 |
--------------------------------------------------------------------------------
/src/documentation/ExampleUsingPeaksOptions.vue:
--------------------------------------------------------------------------------
1 |
40 |
41 |
59 |
83 | 60 | To create the waveforms, peaks.js needs access to the media file in 61 | binary form. To allow this, the web server must support 62 | Cross-origin resource sharing (CORS) 65 | for the origin domain your vue-peaks-enabled app is running on. 66 |
67 |68 | If CORS is not enabled, your media will play as expected, however the 69 | waveform calculation ends in an error, like in the example below: 70 |
71 |79 | The reported error message in this case is "XHR failed", although 80 | playback works just fine: 81 |
82 |
84 |
91 |
85 |
88 |
89 |
90 |
42 |
118 |
119 |
--------------------------------------------------------------------------------
/src/documentation/ExampleUsingReactivity.vue:
--------------------------------------------------------------------------------
1 |
19 |
20 |
21 |
43 |
61 | 44 | To fully customize the appearance and behavior, the Peaks.js configuration options can be provided. 46 |
47 |Note, that you should omit the the 48 | zoomview.container, 49 | overview.container and 50 | mediaElement options, since these are already handled internally, depending on the view mode 51 | (see explanation with the basic examples). 52 |
53 |The options allow you for example to 54 |
-
55 |
- customize the waveform styles 56 |
- define scrolling behavior 57 |
- use precomputed waveform data 58 |
62 |
63 |
104 |
105 |
117 |
106 |
107 |
110 |
111 |
113 |
114 |
115 |
116 |
22 |
111 |
112 |
--------------------------------------------------------------------------------
/src/documentation/ExampleUsingSlots.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
23 |
93 |
24 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
25 |
27 |
33 |
28 |
31 |
32 |
34 |
35 |
49 |
36 |
48 |
37 |
46 |
47 |
50 |
51 |
60 |
52 |
58 |
59 | 72 | AudioPeaks currently does not support reactivity for the options. Still, you can use Vue's reactivity on the 73 | component itself. You can for example: 74 |
75 |76 |
-
77 |
- Conditionally render the component (by using Vue's built-in 78 | v-if directive). This also releases memory used. 79 | 80 |
- Replace the media source by setting the src attribute of the audio element. When
81 | you also set the :key property to a new value, the component re-renders.
This 82 | is called the key-changing 83 | technique, and is required to trigger an update of the waveform.
84 |
87 | Note that media elements with an empty src attribute cause a MediaError. 88 | If this is a concern to you, use the v-if directive 89 | to conditionally only render the element on non-emtpy URL values. 90 |
91 | 92 |
94 |
110 | 104 | vue-peaks internally handles resizing of the contained overview and zoomview areas. If you, in the "external mode", 105 | have an external zoomview or overview area that are resizing completely independent from the AudioPeaks instance, 106 | please handle their resizing according to the 107 | peaks.js API docs about resizing. 108 |
109 |
7 |
91 |
92 |
--------------------------------------------------------------------------------
/src/documentation/ExampleUsingVideo.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
8 | #overview
13 | #zoomview
14 | #audio (default)
15 | #controls
16 |
17 |
28 | 9 | To provide your own layout, you can also use the 10 | named slots: 11 | 12 |
This allows you for example to 18 |
-
19 |
- layout elements differently 20 |
- not render (instead of just not show) elements 21 |
- have a completely custom media element 22 |
You can use a different mode for each slot, thus mixing the "slot" mode with the "external" mode in the same 26 | component instance.
27 |
29 |
58 |
59 |
90 |
60 |
61 |
62 |
63 |
64 | Some slot content here.
65 |
66 |
67 |
68 | In this example, the audio control is not shown,
69 | but some custom
70 | buttons instead:
71 |
74 |
77 |
80 |
81 |
82 |
83 |
84 |
85 |
86 | No zoom controls are shown, by providing an empty template
87 | to the named controls slot.
88 |
89 | 7 | vue-peaks also supports video, as peaks.js does. These examples expand on 8 | the above examples, with a focus on video content. 9 |
10 |Simple mode (with video)
11 |
12 |
43 |
44 |
13 |
42 | 14 | By default, the 15 | AudioPeaks Vue component 19 | template creates a new audio element. While this works for the audio 20 | part of video content, you can specify that the used HTML media element 21 | actually is a video element: 22 |
23 |
29 |
41 | 30 | Voyage of Discovery (Source: 31 | NASA), 12.3 MB (video/webm) 35 |
36 |Slot mode (with video)
45 |
46 |
86 |
87 |
47 |
85 | 48 | No difference to audio here, just place your video element inside the 49 | AudioPeaks element using the default slot. 50 |
51 |60 | Note that the default slot is still named 61 | #audio, in case you want to use it for 62 | customization. 63 |
64 | 65 |
66 |
74 |
82 |
83 |
84 | 67 | Cassini's High-Flying, Ring-Grazing Orbits (Source: 68 | NASA / Jet Propulsion Laboratory - Caltech), 27.1 MB (video/ogg) 72 |
73 |External mode (with video)
88 |
89 |
130 |
131 |
137 |
--------------------------------------------------------------------------------
/src/documentation/ExampleWithStyle.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
90 |
129 | 91 | As with audio, you can reference your existing video element by it's 92 | (unique) id, or as an HTMLMediaElement object. 93 |
94 | 95 |
107 |
128 | 108 | Where is the Edge of the Solar System? (Source: 109 | NASA's Goddard Space Flight Center), 28.8 MB (video/mp4) 112 |
113 | 121 |
122 |
123 | Using the external video element above.
125 |
126 |
5 |
46 |
47 |
--------------------------------------------------------------------------------
/src/documentation/ExampleWithTheBasics.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
6 |
19 | 7 | The AudioPeaks component has it's own CSS 8 | class, plus each generated pane (overview, zoomview, audio/video 9 | element, controls) also has a dedicated CSS class which you can select 10 | for your styles. Note however, that you can not style the waveforms 11 | themselves this way. 12 |
13 |14 | To use the default style also for external or slotted panes, you need to 15 | set the corresponding classes yourself. 16 |
17 |The following selectors are available:
18 |
20 |
45 | vue-peaks provides three modes of operation: 7 |
-
8 |
- Simple mode: just set the media URL, and all views are automatically rendered by default 9 |
- Slot mode: the media element and additional views are provided using named slots 10 |
- External mode: the media element and additional views are referenced by id or HTML element references 11 | 12 |
16 |
35 |
36 |
17 |
18 |
26 | Preferred: Import the compiled component:
19 |Note: Even if you do not use the default (or any other) styles, the overview and zoomview panes still do have a small minimum size set.
24 | 25 |
27 |
28 |
34 | Alternative: The package does not currently properly export types, see issue [#17]. To get TypeScript support, you can also directly include the vue component as SFC:
29 | 30 |Simple mode
37 |
38 |
55 |
56 |
39 |
49 | 40 | By default, the 41 | AudioPeaks Vue 42 | component 43 | template creates a new audio element, with the given source URL, and both view panes 44 | (overview and zoom, which are rendered with a default size) and a controls pane. A new audio context is 45 | created and used to compute the waveform. 46 |
47 |
50 |
54 |
51 |
53 | Slot mode
57 |
58 |
84 |
85 |
59 |
65 | 60 | To provide your own media element, just place it inside the AudioPeaks element (a.k.a. the slot). Vue-peaks will 61 | use 62 | the first media element in the slot. A new audio context is created and used to compute the waveform. 63 |
64 |
66 |
73 |
74 |
83 |
75 |
76 | You can also add additional HTML content.
77 |
80 |
81 |
82 | External mode
86 |External media element only
87 |
88 |
117 |
89 |
96 | 90 | If you already have an existing media element, you can reference it by it's (unique) id, or as an 91 | HTMLMediaElement 92 | object. A new audio context is 93 | created and used to compute the waveform. 94 |
95 |
97 |
105 |
106 |
116 |
107 |
110 |
113 |
114 |
115 |
111 | Using the external media element above.
112 | Having all elements externally
118 |
119 |
166 |
167 |
--------------------------------------------------------------------------------
/src/documentation/Introduction.vue:
--------------------------------------------------------------------------------
1 |
2 |
120 |
127 | 121 | There are also properties available for an external overview area and an external zoom view area. 122 |
123 |124 | Note however, that the default styles and the progress indication are not applied to any external HTML elements. 125 |
126 |
128 |
145 |
146 |
165 |
147 |
159 |
160 |
161 |
162 |
163 |
164 | External overview
148 | External zoomview
149 |
152 |
153 | Using the external overview, zoomview and audio element above.
154 |
3 |
60 |
61 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import AudioPeaks from './components/AudioPeaks.vue';
2 | export { AudioPeaks };
3 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue';
2 | import App from './App.vue';
3 |
4 | import './assets/vue-peaks-mods.css';
5 |
6 | // Syntax highlighter
7 | import hljs from 'highlight.js/lib/core';
8 |
9 | import typescript from 'highlight.js/lib/languages/typescript';
10 | hljs.registerLanguage('vue-typescript', typescript);
11 |
12 | import xml from 'highlight.js/lib/languages/xml';
13 | hljs.registerLanguage('vue-template', xml);
14 | hljs.registerLanguage('vue-sfc', xml);
15 |
16 | import bash from 'highlight.js/lib/languages/bash';
17 | hljs.registerLanguage('bash', bash);
18 |
19 | import css from 'highlight.js/lib/languages/css';
20 | hljs.registerLanguage('css', css);
21 |
22 | import hljsVuePlugin from '@highlightjs/vue-plugin';
23 |
24 | // The style to use (see https://highlightjs.org/static/demo/ to choose)
25 | import 'highlight.js/styles/base16/decaf.css';
26 |
27 | createApp(App).use(hljsVuePlugin).mount('#app');
28 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "useDefineForClassFields": true,
5 | "module": "ESNext",
6 | "moduleResolution": "Node",
7 | "strict": true,
8 | "jsx": "preserve",
9 | "resolveJsonModule": true,
10 | "isolatedModules": true,
11 | "esModuleInterop": true,
12 | "lib": ["ESNext", "DOM"],
13 | "skipLibCheck": true,
14 | "noEmit": true,
15 | "composite": true,
16 | "allowSyntheticDefaultImports": true
17 | },
18 | "include": ["vite.config.ts", "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
19 | }
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { fileURLToPath, URL } from 'node:url';
2 | import { defineConfig } from 'vite';
3 | import vue from '@vitejs/plugin-vue';
4 | import dts from 'vite-plugin-dts';
5 |
6 | // for "Library Mode", uncomment below:
7 | // import { resolve } from 'path';
8 |
9 | // https://vitejs.dev/config/
10 | export default defineConfig({
11 | plugins: [vue(), dts()],
12 | resolve: {
13 | alias: {
14 | '@': fileURLToPath(new URL('./src', import.meta.url)),
15 | },
16 | },
17 | /* path /vue-peaks/ is suitable for publishing to github pages */
18 | base: '/vue-peaks/',
19 | build: {
20 | /* Defining the rollupOptions for "App Mode" */
21 | rollupOptions: {
22 | external: [/^.*(.mp3)/, /^.*(.ogg)/],
23 | },
24 | /* Defining the assets to distribute and the options for "Library Mode" */
25 | // lib: {
26 | // entry: resolve(__dirname, 'src/index.ts'),
27 | // name: 'vue-peaks',
28 | // // the proper extensions will be added
29 | // fileName: 'vue-peaks',
30 | // },
31 | /* Defining the rollupOptions for "Library Mode" */
32 | // rollupOptions: {
33 | // external: ['vue', 'peaks.js', /^.*(.mp3)/, /^.*(.ogg)/],
34 | // output: {
35 | // // Provide global variables to use in the UMD build
36 | // // for externalized deps (in "Library Mode")
37 | // globals: {
38 | // vue: 'Vue',
39 | // 'peaks.js': 'PeaksJs',
40 | // },
41 | // },
42 | //},
43 | manifest: true,
44 | sourcemap: true,
45 | },
46 | });
47 |
--------------------------------------------------------------------------------
/vue-peaks-example-ui.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suterma/vue-peaks/69c8241f5aed9d92f0937cc29a0fa7e0bde2fc0b/vue-peaks-example-ui.png
--------------------------------------------------------------------------------
/vue-peaks.code-workspace:
--------------------------------------------------------------------------------
1 | {
2 | "folders": [
3 | {
4 | "path": "."
5 | }
6 | ],
7 | "settings": {
8 | "editor.tabSize": 2,
9 | "cSpell.words": ["Gridline", "highlightjs", "playhead", "zoomview"],
10 | "editor.formatOnSave": true,
11 | "prettier.singleAttributePerLine": true,
12 | "prettier.singleQuote": true,
13 | "html.completion.attributeDefaultValue": "singlequotes"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
4 |
29 | 5 | vue-peaks aims to simplify the use of 6 | peaks.js 11 | in a 12 | Vue3 17 | environment. It provides a single component, 18 | AudioPeaks. 19 |
20 |21 | Explore the below examples or see the 22 | vue-peaks GitHub repository. 27 |
28 |
30 |
59 |
31 |
37 | Installing vue-peaks also installs 38 | peaks.js (version 3) 43 | as a dependency. Additionally, peaks.js uses 44 | Konva (version 8 or 9) 49 | and 50 | waveform-data (version 4) 55 | as peer dependencies; these will get installed with vue-peaks, if not 56 | already available. 57 |
58 |