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.

Demo Page

Table of Contents

• Installation
• Usage
• Development
• License

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;
        },
    },
    ...
}

Development

A sandboxed dev environment is provided by vue-play. Changes made to the component files will appear in real time in the sandbox.

To begin development, run:

yarn install
yarn dev

then navigate to http://localhost:5000

To modify and add sandbox scenarios, edit play/index.js

License

This project is licensed under the Apache License - see the LICENCE file for details.