suterma / vue-audio-level-meter

A simple audio (peak) level meter for Vue.js

vue-audio-level-meter

A simple audio (peak) level meter for Vue.js

Installation

npm install vue-audio-level-meter

How to use

• No module / lib build available. If you use the NPM package, you need to import the SFC from vue-audio-level-meter/src/components/AudioLevelMeter.vue
• See the documentation and some live examples on the GitHub pages

Build & Development

This package uses Vue 3 + TypeScript + Vite.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

# build for production
npm run build

# locally preview production build
npm run preview

# to publish to GitHub Pages (requires committing and pushing the build in the /dist folder)
git add dist -f
git commit -m 'built for gh-pages'
git push
npm run publish-gh-pages

Run Unit Tests with Vitest

npm run test

Credits

• Vue.js, the progressive JavaScript framework. (Released under the MIT License, Copyright © 2019-PRESENT Anthony Fu)
• VueUse, a collection of essential Vue Composition Utilities for Vue 2 and 3. (Released under the MIT License, Copyright © 2014-2021 Evan You)
• Material Design Icons, the original. Following Google's Material Design guidelines for system icons. (Icons released under the Apache 2.0 License, by pictogrammers.com)
• Jest, a delightful JavaScript Testing Framework. (Released under the MIT License, by Facebook)
• Music from the Album "Not For Sale" by Lidija Roos (Released to the public, by Lidija Roos)
• @highlightjs/vue-plugin, provides a highlightjs component for use in your Vue.js 3 applications. (Released under the BSD-3-Clause license, by the highlight.js team)
• vite, vitest, @vitejs/plugin-vue, next Generation Frontend Tooling. (Released under the MIT License, by the vite team)
• prettier, an opinionated Code Formatter. (Released under the MIT License, by the prettier team)
• typescript, a language for application-scale JavaScript. (Released under the Apache 2.0 License, by Microsoft)
• vue-tsc, high-performance tooling for Vue. (Released under the MIT License, by Johnson Chu)
• Inkscape, draw freely. (Released under the GPLv2 License)
• RealFaviconGenerator Favicon Generator. For real. (free to use)

• @highlightjs/vue-plugin, provides a highlightjs component for use in your Vue.js 3 applications. (Released under the BSD-3-Clause license, by the highlight.js team)

Inspiration from

• Icon design using System icon metrics for Material Design
• The "battery charging high" icon by Michael Irigoyen. (Released under the Apache 2.0 License)
• An existing Web Audio Peak Meter for JavaScript by Evan Sonderegger. (Released under the MIT License)
• A StackOverflow post by Kevin Reid (Released under the CC BY-SA 3.0 License)

---

vue-audio-level-meter is created with love by Marcel Suter for the Replayer project.