Play.vue

<template>
    <div id="app">
        <v-app id="inspire">
            <v-container fluid grid-list-lg>
                <h1 class="st">Fur Elise!</h1>
                <br><br><br>

                <span id="bpmval">BPM: {{bpm}}</span>
                <v-slider name="bpm" type="range" :min="60" :max="180" step="1" v-model="bpm" @change="updateBPM" thumb-label="always" class="slider" height="70"></v-slider>
                <br><br><br>

                <p v-if="r">Current Beat: {{r.getBeat()}}</p>
                <br><br><br>
                <span>Volume: {{Math.floor(vol*100)}}</span>
                <!-- <input name="volume" type="range" id="vol" min="0" max="1" step="0.01" v-model="vol" @change="updateVol" class="slider"/> -->
                <v-slider name="volume" prepend-icon="volume_up" min="0" max="1" step="0.01" v-model="vol" @change="updateVol" class="slider"></v-slider>
                <br><br><br>
                <v-btn class="general-btn" color="success" round large @click="g">
                    <v-icon>music_note</v-icon>Press Me!<v-icon>music_note</v-icon>
                </v-btn>
            </v-container>
        </v-app>
    </div>
</template>

<script>
import {
    Howl,
    Howler
} from 'howler'
import Rhythm from './../Classes/Base/Rhythm'
import Measure from './../Classes/Measure'
import Chord from './../Classes/Base/Chord'
import {
    Note
} from '../Classes/Base/Note'
import {
    DiatonicScale
} from '../Classes/Base/Scale'
import {
    major_scale
} from '../Classes/Base/Patterns';
export default {
    name: "Play",
    data() {
        const e = new Note('e', 5, 'e'),
            ds = new Note('d#', 5, 'e'),
            b = new Note('b', 4, 'e'),
            d = new Note('d', 5, 'e'),
            c = new Note('c', 5, 'e'),
            a = new Note('a', 4, 'q'),
            notes = []
        for(let i = 0; i < 20; i++)
            notes.push(e, ds, e, ds, e, b, d, c, [a, new Note('a', '2', 'e')], e.newOctave(3).newLength('e'), a.newOctave(3).newLength('e'), c.newOctave(4), e.newOctave(4), a.newLength('e'), [b.newLength('q'), e.newOctave(2).newLength('e')], e.newOctave(3).newLength('e'), new Note('g#', 3, 'e'), new Note('e', 4, 'e'), new Note('g#', 4, 'e'), new Note('b', 4, 'e'), [c.newLength('q'), new Note('a', 2, 'e')], new Note('e', 3, 'e'), new Note('a', 3, 'e'), new Note('e', 4, 'e'), e, ds, e, ds, e, b, d, c, [a, new Note('a', '2', 'e')],e.newOctave(3).newLength('e'), a.newOctave(3).newLength('e'), c.newOctave(4), e.newOctave(4), a.newLength('e'), [b.newLength('q'), e.newOctave(2).newLength('e')], e.newOctave(3).newLength('e'), new Note('g#', 3, 'e'), new Note('e', 4, 'e'),c,b,[a, new Note('a', 2, 'h'),])
        let bpm = 120
        return {
            notes,
            bpm,
            r: new Rhythm(bpm, [4, 4]),
            beat: null,
            vol: 1,
        }
    },
    methods: {
        g() {
            // setInterval(()=> {
            //     this.meas.play()
            // }, this.meas.rhythm.bpm/60*4*1000)
            this.r.addNotes(this.notes)
            this.r.play()
            this.beat = this.meas.rhythm.getBeat()
        },
        updateBPM() {
            this.r.bpm = this.bpm
        },
        updateVol() {
            Howler.volume([this.vol])
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#app{
    text-align: center;
}
  h1,
  h2 {
    font-weight: normal;
          font-size: 40pt;
      background-color: aqua;
  }
  p, span{
      font-size: 30pt;
      color: red;
      /* background-color: lightcoral; */
      display: inline;
  }
  .slider{
      background-color: lavender;
  }
.v-btn {
  min-width: 0;
  width: 200pt;
  height: 100pt;
}
</style>