abudaan / heartbeat

a javascript MIDI/Audio sequencer for your browser
http://abudaan.github.io/heartbeat/
120 stars 20 forks source link

Adding notes to a song #11

Open tonysm opened 6 years ago

tonysm commented 6 years ago

Hi there. First of all, create lib, thanks.

I know we can remove notes and I know there is a way to move a note around, but I'm trying to add a note when clicking in the score. Is there any example that I've missed that does that?

tonysm commented 6 years ago

I've been trying this without much success.

handlePitchLineClicked ({pitchLine, event}) {
    const midiNote = window.sequencer.createMidiNote(
        120,
        window.sequencer.NOTE_ON,
        pitchLine.note.number,
        100
    );

    midiNote.durationOfTicks = 1;
    midiNote.endless = false;
    midiNote.bbox = this.$options.keyEditor.getNoteRect(midiNote);
    midiNote.bbox.width = 24;
    midiNote.bbox.x = midiNote.bbox.left = event.pageX + this.scorePositioning.scrollLeft;

    this.song.notes.push(midiNote);
}

The new note appears when I add it to the notes array (I'm using VueJS, so it updates the DOM when I change the component state), but it gets the X as the point the user clicked, I need to normalize it so it doesn't appear between bars/beats/sixteenth lines, but inside of those squares.

screenshot from 2018-08-19 16-42-39

But I haven't found a way to add it to the song yet (so when we play the keyEditor, we can hear the new note).

Sorry if it doesn't make any sense, I actually don't know much about MIDI sequencers, I'm just playing around with it.