aframe-metronome-component

    1.2.3 • Public • Published

    aframe-metronome-component

    A component for A-Frame that fires events at a specified rhythm, to facilitate building loop-based musical VR applications.

    Properties

    Property Description Default Value
    bpm Beats Per Minute. The overall speed of the loop. 80
    beatsPerBar The number of beats contained in each bar of the loop. 4
    barsPerLoop The number of bars in each loop. 4
    startTime How long to wait (in milliseconds) after the page loads before the metronome starts. Can be reassigned to effectively jump to any point in the loop. performance.now() + 500

    Events

    Event Description
    beat Fires on every beat of the loop, according to the component's bpm property. Contains information about the current beat relative to the current bar, current loop, total beats, etc.
    tick Contains roughly the same information as the beat event, but fires more frequently. Each beat is divided into 12 ticks.

    Installation

    Browser Installation

    <head>
        <title>A Musical A-Frame Scene</title>
        <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script> 
        <script src="https://unpkg.com/aframe-metronome-component"></script> 
    </head>
     
    <body>
        <a-scene>
            <a-entity id="clock" metronome="bpm:136;beatsPerBar:8;barsPerLoop:8"></a-entity>
        
        </a-scene>
    </body>

    NPM Installation

    Install via NPM:

    npm install aframe-metronome-component

    Usage

    var clock = document.getElementById('clock')
     
    clock.addEventListener('beat', function(event){
        console.log(event.detail)
        var ed = event.detail
        if (  (ed.beatInBar % 2 === 1) && (ed.barInLoop !== 1) ) {
            // code in this block will run on every other beat, except during the first bar of each loop
            // e.g. snareDrum.play() 
        }
     
    }
     
    clock.addEventListener('tick', function(event){
        console.log(event.detail)
    }
     

    Install

    npm i aframe-metronome-component

    DownloadsWeekly Downloads

    11

    Version

    1.2.3

    License

    MIT

    Last publish

    Collaborators

    • rserota