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)

GitHub

View Github