Vue-guitar-tuner NPM

Vue Guitar Tuner

This is a UI enhanced guitar tuner package, using Vue.js hooks

Vue Guitar Tuner is a mobile-ready, customisable, Vue.js-powered guitar tuner.

WARNING: vue-guitar-tuner is at alpha stage of development and may undergo significant changes.

Feel free to submit issues and feature requests here.

Installation

npm install vue-guitar-tuner

or if you prefer yarn

yarn add vue-guitar-tuner

Usage

Global

You may install Vue Guitar Tuner globally:

import Vue from 'vue';
import VueGuitarTuner from 'vue-guitar-tuner';

Vue.use(VueGuitarTuner);

This will make <VueGuitarTuner> available to all components within your Vue app.

Local

Include the tuner directly into your component using import:

import VueGuitarTuner from 'vue-guitar-tuner';

export default {
  ...
  components: {
    VueGuitarTuner,
  }
  ...
};

Styles

Include demo styles using import:

import("vue-guitar-tuner/dist/vue-guitar-tuner.css");

Configuration

Property	Type	Default	Description
displayNote	Boolean	true	Flag to enable or disable note display.
displayReferenceLine	Boolean	true	Flag to enable or disable the vertical reference line.
displayGrid	Boolean	true	Flag to enable or disable background grid.
notes	Array	'C', ..., 'B'	An array of Strings that define the 12 notes displayed on note area. Default value: "C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B". Must be an array of 12 strings.
tunerClasses	Array	'tuner'	An Array of CSS Classes to customise tuner area.
gridClasses	Array	'gridOverlay'	An array of CSS Classes to customise Grid area.
detuneClasses	Array	'detune'	An Array of CSS Classes to customise Detune area.
detuneTipClasses	Array	'detuneTip'	An Array of CSS Classes to customise the Detune Tip.
detuneValueClasses	Array	'detuneValue'	An Array of CSS Classes to customise the Detune Value.
keySignatureClasses	Array	'keySignature'	An Array of CSS Classes to customise both of the key signatures (flat, sharp).
flatClasses	Array	'tuner'	An Array of CSS Classes to customise the flat character.
sharpClasses	Array	'tuner'	An Array of CSS Classes to customise the sharp character.

Events

Event	Type	Description
`dataUpdate`	Object	Emits whenever there's a new value available. Object includes { pitch: Number, note: Number, detune: Number }
`statusUpdate`	Boolean	Emits whenever the recording statues changes.

Actions

Action	Description
`this.$root.$toggleGuitarTuner()`	Toggles the tuner on and off depending on the current recording status.

HTML Structure

Once the VueguitarTuner component is installed globally or imported, it can be used in templates in the following manner:

  <VueGuitarTuner :display-note="false" :displayGrid="false" :tunerClasses="['tuner, 'tunerArea']"/>

To listen for the dataUpdate and statusUpdate events you can do the following:

  <VueGuitarTuner @statusUpdate="statusUpdate" @dataUpdate="dataUpdate" />

export default {
    ...
    data() {
        return {
            isTunerActive: false,
            data: {},
        };
    },
    ...
    methods: {
        statusUpdate(status) {
            this.isTunerActive = status;
        },
        dataUpdate(data) {
            this.data = data;
        },
    },
    ...
}