A Vue wrapper around the bbc/peaks.js audio waveform UI component
vue-peaks
A Vue wrapper around the bbc/peaks.js audio waveform UI component.
This project aims to simplify the use of peaks.js in a Vue3 environment.
Installation
npm install --save vue-peaks
# peer dependencies of peaks.js
npm install --save konva
npm install --save waveform-data
Installing vue-peaks also installs Peaks.js as a dependency. However, Peaks.js uses Konva and waveform-data as peer dependencies, so you must also install those modules.
How to use
Basic examples
Using a media source URL (“simple” mode)
<AudioPeaks src="lidija_roos-not_for_sale.mp3" />
Alternative with enclosed media element (“slot” mode)
<AudioPeaks id="enclosed">
<div>
<span>You can also add additional HTML content.</span>
<audio controls style="width: 100%;">
<source src="lidija_roos-not_for_sale.mp3" />
</audio>
</div>
</AudioPeaks>
Using a specified media element (“external” mode)
<div>
<span>External media element:</span>
<audio controls style="width: 100%;" id="mediaElement">
<source src="lidija_roos-not_for_sale.mp3" />
</audio>
</div>
<AudioPeaks id="external" mediaElementId="mediaElement">
</AudioPeaks>
When using more than one audio.js component instance in the same HTML document, a unique id must be set.
See a more detailed documentation and live examples on the GitHub Pages.
Build & Development
Project Setup
npm install
Compile and Hot-Reload for Development
npm run dev
Type-Check, Compile and Minify for Production
npm run build
# to publish to GitHub Pages (requires committing and pushing the build in the /dist folder)
git add dist
git commit -m 'built for gh-pages'
git push
npm run publish-gh-pages
Run Unit Tests with Vitest
npm run test:unit
Lint with ESLint
npm run lint
Credits
- peaks.js by BBC (LGPL-3.0 licensed)
- Music tracks “Not for sale” and “Decisions” by Lidija Roos, used by permission.
Initial code is taken from
- peaks-vue-demo by Giovanni Candeo (MIT-licensed)
- vue-waveform-template by Thomas Parisot (MIT-licensed)