vibe-editor 0.0.0

package/src/scripts/js/MusicProcessor.js

@@ -0,0 +1,652 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Tone = require("tone");
+const mappings_1 = require("./utils/mappings");
+const midi_player_js_1 = require("midi-player-js");
+const Soundfont = require("soundfont-player");
+const constants_1 = require("./constants");
+const coordinates = require("./utils/coordinates");
+const cq = require("./utils/convenienceQueries");
+const meiConverter = require("./utils/MEIConverter");
+const buffer_1 = require("buffer");
+const axios_1 = require("axios");
+const currentlyPlayingFlag = "currentlyPlaying";
+const followerRectID = "followerRect";
+const ac = window.AudioContext;
+const synth = new Tone.Synth().toDestination();
+class MusicProcessor {
+    constructor(containerId) {
+        this.playBtn = (function playBtn(e) {
+            e.preventDefault();
+            this.context.resume().then(() => this.playMidi());
+        }).bind(this);
+        this.rewindBtn = (function rewindBtn(e) {
+            e.preventDefault();
+            this.rewindMidi();
+        }).bind(this);
+        this.fetchAudioSeconds = (function fetchAudioSeconds(e) {
+            var sec = e.target.currentTime;
+            this.highlight(sec, 100, "audio");
+            this.drawFollowerRect();
+        }).bind(this);
+        this.midiPlayHandler = (function midiPlayHandler(e) {
+            if (!this.hasContainerFocus())
+                return;
+            this.midiPlayFunction(e);
+        }).bind(this);
+        this.setCurrentNoteHandler = (function setCurrentNoteHandler(e) {
+            this.currentNote = e.target;
+        }).bind(this);
+        /**
+         *  Set last clicked element to restartpoint
+         */
+        this.startPointHandler = (function startPointHandler(e) {
+            if (!this.hasContainerFocus())
+                return;
+            var playingNote = e.target;
+            playingNote = cq.getVrvSVG(this.containerId).querySelector("#" + playingNote.closest("[refId]").getAttribute("refId"));
+            playingNote = playingNote.closest(".note") || playingNote.closest(".rest") || playingNote.closest(".mRest");
+            if (playingNote !== null) {
+                var it = this.durationMap.values();
+                var res = it.next();
+                while (!res.done) {
+                    if (playingNote.id === res.value.note.id) {
+                        this.restartTime = res.value.tick;
+                        break;
+                    }
+                    res = it.next();
+                }
+            }
+        }).bind(this);
+        /**
+         * Adds Class to be highlighted.
+         * Dispatches event for every Note which was started most currently
+         */
+        this.addClass = (function addClass(n, className) {
+            return new Promise(resolve => {
+                n.classList.add(className);
+                n.dispatchEvent(this.noteEvent);
+                resolve(true);
+            });
+        }).bind(this);
+        this.setContainerId(containerId);
+        this.noteEvent = new Event("currentNote");
+        this.playStartEvent = new Event("playStart");
+        this.playEndEvent = new Event("playEnd");
+        this.restartTime = 0;
+        this.setPlayListener();
+        if (navigator.userAgent.toLocaleLowerCase().indexOf("firefox") > 0) {
+            this.isFirefox = true;
+        }
+        else {
+            this.isFirefox = false;
+        }
+        this.getMidiInput();
+    }
+    /**
+     * Add Canvas in which all MusicPlayer SVGs are contained
+     */
+    addCanvas() {
+        //this.root = this.interactionOverlay //document.getElementById(c._vrvSVGID_)
+        this.rootBBox = this.interactionOverlay.getBoundingClientRect();
+        var rootWidth = this.rootBBox.width.toString();
+        var rootHeigth = this.rootBBox.height.toString();
+        if (this.canvasMP == undefined) {
+            this.canvasMP = document.createElementNS(constants_1.constants._SVGNS_, "svg");
+            this.canvasMP.setAttribute("id", "canvasMusicPlayer");
+            this.canvasMP.classList.add("canvas");
+            this.canvasMP.setAttribute("viewBox", ["0", "0", rootWidth, rootHeigth].join(" "));
+        }
+        this.canvasMP.innerHTML = ""; // will delete followerRect if present (usually when score is loaded)
+        this.interactionOverlay = cq.getInteractOverlay(this.containerId);
+        this.interactionOverlay.insertBefore(this.canvasMP, this.interactionOverlay.firstChild);
+    }
+    /**
+     * Initialize Player
+     */
+    initMidiPlayer() {
+        var that = this;
+        //@ts-ignore
+        this.midiPlayer = new midi_player_js_1.default.Player(function (event) {
+            if (event.name === "Set Tempo") {
+                that.tempo = event.data;
+                //that.pulse = (60000/ (event.data / 2 * 24))/10 //(60000/ (event.data * 24))/10000 //duration is in seconds
+                that.pulse = ((60 / event.data) * 1000) / 120;
+            }
+            if (event.name === 'Note on' && event.velocity !== 0) {
+                var track = event.track;
+                var time = event.tick;
+                var key = track.toString() + "," + event.byteIndex.toString();
+                if (!that.midiDurationMap.has(key)) {
+                    return;
+                }
+                var duration = that.midiDurationMap.get(key).duration;
+                that.restartTime = event.tick;
+                that.highlight(time, duration * 1000, "midi");
+                if (!that.isFirefox) {
+                    that.drawFollowerRect();
+                }
+                if (that.instruments != undefined) {
+                    var instr = that.instruments[track - 2];
+                    instr.play(event.noteName, that.context.currentTime, { gain: event.velocity / 100, duration: duration });
+                }
+            }
+        });
+        this.midiPlayer.loadArrayBuffer(buffer_1.Buffer.from(this.midi, "base64"));
+        this.mapDurations();
+        if (this.instruments == undefined) { // instruments only have to be updated, when new instrument (= track) is added
+            this.context = new ac();
+            this.instruments = new Array(this.midiPlayer.getEvents().length - 1);
+            this.initMidiInstruments();
+        }
+    }
+    //some change
+    /**
+     * Stop playing
+     */
+    stopMidiInstruments() {
+        var _a;
+        document.dispatchEvent(this.playEndEvent);
+        this.midiPlayer.stop();
+        (_a = this.instruments) === null || _a === void 0 ? void 0 : _a.forEach(instr => instr.stop(this.context.currentTime));
+        this.midiPlayer = undefined;
+        this.stopTimeouts();
+        if (this.restartTime === 0) {
+            if (document.getElementById(followerRectID) !== null) {
+                document.getElementById(followerRectID).remove();
+            }
+            Array.from(document.getElementsByClassName(currentlyPlayingFlag)).forEach(element => {
+                element.classList.remove(currentlyPlayingFlag);
+            });
+        }
+        this.initMidiPlayer();
+    }
+    rewindMidi() {
+        if (this.midiPlayer != undefined) {
+            this.restartTime = 0;
+            this.stopMidiInstruments();
+        }
+    }
+    /**
+     * Initialize Instrument for
+     */
+    initMidiInstruments() {
+        this.setSoundfontsRecursive();
+    }
+    setSoundfontsRecursive(counter = 0) {
+        var i = counter;
+        var that = this;
+        if (i < this.instruments.length) {
+            Soundfont.instrument(this.context, "acoustic_grand_piano").then((instrument) => {
+                that.instruments[i] = instrument;
+                i += 1;
+                that.setSoundfontsRecursive(i);
+            });
+        }
+    }
+    playMidi() {
+        if (!cq.hasActiveElement(this.containerId))
+            return;
+        if (this.midiPlayer.isPlaying()) {
+            this.stopMidiInstruments();
+        }
+        else {
+            this.midiPlayer.on("endOfFile", () => {
+                this.rewindMidi();
+            });
+            this.midiPlayer.division = 120;
+            //this.player.tempo = this.tempo
+            this.midiPlayer.tick = this.restartTime;
+            this.midiPlayer.skipToTick(this.restartTime);
+            this.midiPlayer.play();
+            document.dispatchEvent(this.playStartEvent);
+        }
+    }
+    ///// LISTENERS ////
+    setListeners() {
+        var that = this;
+        if (this.midiTimes == undefined) {
+            return;
+        }
+        var it = this.midiTimes.values();
+        var result = it.next();
+        while (!result.done) {
+            var arr = result.value;
+            arr.forEach(note => {
+                var _a;
+                if (note == undefined)
+                    return;
+                note.addEventListener("currentNote", this.setCurrentNoteHandler);
+                var id = ((_a = note.querySelector(".notehead")) === null || _a === void 0 ? void 0 : _a.id) || note.id;
+                var interactRect = cq.getInteractOverlay(that.containerId).querySelector("#scoreRects g[refId=\"" + id + "\"]");
+                interactRect.addEventListener("click", this.startPointHandler);
+            });
+            result = it.next();
+        }
+        this.container.querySelector("#playBtn").addEventListener("click", this.playBtn);
+        this.container.querySelector("#rewindBtn").addEventListener("click", this.rewindBtn);
+        this.container.addEventListener("timeupdate", this.fetchAudioSeconds, true);
+    }
+    removeListeners() {
+        var that = this;
+        if (this.midiTimes == undefined) {
+            return;
+        }
+        var it = this.midiTimes.values();
+        console.log("midiTimes", this.midiTimes);
+        var result = it.next();
+        while (!result.done) {
+            var arr = result.value;
+            arr.forEach(note => {
+                var _a;
+                note.removeEventListener("currentNote", this.setCurrentNoteHandler);
+                var id = ((_a = note.querySelector(".notehead")) === null || _a === void 0 ? void 0 : _a.id) || note.id;
+                var interactRect = cq.getInteractOverlay(that.containerId).querySelector("#scoreRects g[refId=\"" + id + "\"]");
+                interactRect.removeEventListener("click", this.startPointHandler);
+            });
+            result = it.next();
+        }
+        this.container.removeEventListener("timeupdate", this.fetchAudioSeconds, true);
+    }
+    resetListeners() {
+        this.removeListeners();
+        this.setListeners();
+    }
+    /**
+     * Separate Listeners to set player options externally
+     */
+    setPlayListener() {
+        document.addEventListener("keydown", this.midiPlayHandler);
+    }
+    removePlayListener() {
+        document.removeEventListener("keydown", this.midiPlayHandler);
+    }
+    midiPlayFunction(e) {
+        if (!this.hasContainerFocus())
+            return;
+        if (e.code === "Space") {
+            e.preventDefault();
+            if (e.shiftKey || document.getElementById("followerRect") !== null) {
+                this.context.resume().then(() => this.playMidi());
+            }
+            else if (typeof this.midiPlayer != undefined) {
+                this.stopMidiInstruments();
+            }
+        }
+    }
+    /**
+     * Call score tube alignment service and map the cursor to notes.
+     * @param file Bufferarray of imported file (Blob)
+     */
+    align(file) {
+        var that = this;
+        var fd = new FormData();
+        fd.append('mei', new Blob([meiConverter.docToMei(this.mei)]));
+        fd.append('audio', file);
+        console.log("in musicprocessor", this.mei, file);
+        var devUrl = 'http://localhost:8001/align';
+        axios_1.default.post(devUrl, fd, {
+            headers: {
+                'Content-Type': 'multipart/form-data',
+            },
+        }).then((response) => {
+            var data = response.data;
+            that.audioTimes = new Map();
+            for (const [key, value] of Object.entries(data)) {
+                var val = value;
+                if (!that.audioTimes.has(val)) {
+                    that.audioTimes.set(val, new Array());
+                }
+                that.audioTimes.get(val).push(that.container.querySelector("#" + key));
+            }
+        }).catch((error) => {
+            console.log(["An error occured while aligning the soundfile:", error].join(" "));
+        });
+    }
+    /**
+     * Map all durations and notes to make them available asynchronically
+     */
+    mapDurations() {
+        var durationMap = new Map(); // key: tracknumber,byteindex
+        var mapByNote = new Map();
+        var eventTracks = this.midiPlayer.getEvents();
+        eventTracks.forEach(eventArray => {
+            //@ts-ignore
+            Array.from(eventArray).forEach((event, eventIdx) => {
+                var e = event;
+                if (e.name === "Set Tempo") {
+                    this.tempo = e.data;
+                    this.pulse = ((60 / e.data) * 1000) / 120;
+                }
+                else if (e.name === "Note on") {
+                    var time = e.tick; //* this.pulse //* 1000 * 2
+                    var notes = this.getClosestEntry(time, "midi");
+                    if (notes == undefined) {
+                        return;
+                    }
+                    //iterate because notes can be in a chord
+                    notes.forEach(note => {
+                        var meiNote = this.mei.getElementById(note.id);
+                        var staffNumber = parseInt(meiNote.closest("staff").getAttribute("n")) + 1;
+                        if (!meiNote.hasAttribute("grace")) {
+                            var key = e.track.toString() + "," + e.byteIndex.toString();
+                            if (!durationMap.has(key) && e.track === staffNumber) {
+                                if (!meiNote.hasAttribute("dur")) {
+                                    meiNote = meiNote.closest("chord");
+                                }
+                                var baseDur = this.getDur(parseInt(meiNote.getAttribute("dur")), parseInt(meiNote.getAttribute("dots")) || 0, 4);
+                                //find any prolongated Notes
+                                var tie = this.mei.querySelector("tie[startid='#" + note.id + "']");
+                                if (tie !== null) {
+                                    var endid = tie.getAttribute("endid"); //endid alway includes # at beginnig
+                                    var prolongNote = this.mei.querySelector(endid);
+                                    if (prolongNote !== null) {
+                                        var pnDur = prolongNote.getAttribute("dur");
+                                        var pnDot = prolongNote.getAttribute("dots");
+                                        baseDur += this.getDur(parseInt(pnDur), parseInt(pnDot) || 0, 4);
+                                    }
+                                }
+                                //concat duration
+                                var dur = baseDur * 60 / this.tempo;
+                                var valueFound = false;
+                                var it = durationMap.values();
+                                var res = it.next();
+                                if (!valueFound) { // why do I check here?
+                                    durationMap.set(key, { note: note, duration: dur, tick: e.tick });
+                                    mapByNote.set(note, { duration: dur, tick: e.tick });
+                                }
+                                else {
+                                    //console.log(key, note, dur, e.tick)
+                                    //console.log(durationMap.get(key))
+                                }
+                            }
+                        }
+                    });
+                }
+            });
+        });
+        this.midiDurationMap = durationMap;
+        this.durationMapByNote = mapByNote;
+        //console.log(this.durationMap, this.durationMapByNote)
+    }
+    /**
+     * Computation of time and midi times have some divergence (by floating number)
+     * Finding closest entry is sufficient, but has to be made for all entries, since the miditimes-iterator is not ordered.
+     * @param time
+     * @returns
+     */
+    getClosestEntry(time, source) {
+        var targetEntry;
+        var temp = Infinity;
+        var entries;
+        if (source === "midi") {
+            entries = this.midiTimes.entries();
+        }
+        else if (source === "audio") {
+            entries = this.audioTimes.entries();
+        }
+        for (const [key, value] of entries) {
+            var diff = Math.abs(time - key);
+            if (diff < temp) {
+                targetEntry = value;
+                temp = diff;
+            }
+        }
+        return targetEntry;
+    }
+    getDur(dur, dots, base) {
+        var baseDur = base / dur;
+        var add = baseDur;
+        if (dots > 0) {
+            for (var i = 0; i < dots; i++) {
+                add = add / 2;
+                baseDur += add;
+            }
+        }
+        return baseDur;
+    }
+    setAudioContext() {
+        var that = this;
+        return new Promise((resolve, reject) => {
+            window.onload = function () {
+                resolve();
+            };
+        });
+    }
+    setMidi(midi) {
+        this.midi = midi;
+        return this;
+    }
+    /**
+     * Highlight playing Elements
+     * @param time Time at which Element is played (in ms)
+     * @param duration Duration of Element (in ms)
+     */
+    highlight(time, duration, source) {
+        var notes = this.getClosestEntry(time, source);
+        this.timeouts = new Array();
+        notes.forEach(n => {
+            this.addClass(n, currentlyPlayingFlag).then(() => {
+                if (source === "audio") { //we have no proper duration display yet, so no red coloring for notes, just the followerRect
+                    n.classList.remove(currentlyPlayingFlag);
+                    return;
+                }
+                var to = setTimeout(() => { n.classList.remove(currentlyPlayingFlag); }, duration);
+                this.timeouts.push(to);
+            });
+        });
+    }
+    /**
+     * Draw follower rectangle over all staves for last sounding element
+     */
+    drawFollowerRect() {
+        // var canvas =  document.getElementById(this.containerId).querySelector("#canvasMusicPlayer") //document.getElementById("canvasMusicPlayer")
+        // var canvasBBox = canvas.getBoundingClientRect();
+        var followerRect;
+        if (document.getElementById(followerRectID) !== null) {
+            followerRect = document.getElementById(followerRectID);
+        }
+        else {
+            followerRect = document.createElementNS(constants_1.constants._SVGNS_, "rect");
+            this.canvasMP.appendChild(followerRect);
+        }
+        var margin = 5;
+        var ptCurrentNote = coordinates.getDOMMatrixCoordinates(this.currentNote, this.canvasMP);
+        var parentMeasureRect = this.currentNote.closest(".measure").getBoundingClientRect();
+        var ptParentMeasure = coordinates.getDOMMatrixCoordinates(parentMeasureRect, this.canvasMP);
+        var upperBound = (ptParentMeasure.top - margin);
+        var lowerBound = (ptParentMeasure.bottom + margin);
+        var leftBound = (ptCurrentNote.left - margin);
+        var rightBound = (ptCurrentNote.right + margin);
+        followerRect.setAttribute("id", followerRectID);
+        followerRect.setAttribute("y", upperBound.toString());
+        followerRect.setAttribute("x", leftBound.toString());
+        followerRect.setAttribute("width", (rightBound - leftBound).toString());
+        followerRect.setAttribute("height", (lowerBound - upperBound).toString());
+    }
+    hasContainerFocus() {
+        return document.getElementById(this.containerId).classList.contains("activeContainer");
+    }
+    ///SYNTH////
+    generateTone(newNote) {
+        if (newNote.rest) {
+            return;
+        }
+        let note = newNote.pname;
+        let dur = newNote.dur + "n";
+        var accid = newNote.accid != undefined ? newNote.accid.replace("f", "b").replace("s", "#").replace("n", "") : "";
+        if (typeof newNote.keysig !== "undefined" && newNote.keysig !== "0") {
+            let signMap;
+            if (newNote.keysig.charAt(1) === "s") {
+                signMap = mappings_1.noteToCross;
+            }
+            else if (newNote.keysig.charAt(1) === "f") {
+                signMap = mappings_1.noteToB;
+            }
+            let signCount = parseInt(newNote.keysig.charAt(0));
+            let submap = new Map();
+            let i = 0;
+            for (const [key, value] of signMap.entries()) {
+                if (i < signCount) {
+                    submap.set(key, value);
+                }
+                i += 1;
+            }
+            if (submap.has(note)) {
+                note = submap.get(note);
+                note = note.charAt(0).toUpperCase() + note.charAt(1).toUpperCase() + newNote.oct;
+            }
+            else {
+                note = note.toUpperCase() + accid + newNote.oct;
+            }
+        }
+        else {
+            note = note.toUpperCase() + accid + newNote.oct;
+        }
+        if (!note.includes("undefined") && !dur.includes("undefined")) {
+            dur = "16n";
+            synth.triggerAttackRelease(note, dur);
+            Tone.start();
+        }
+    }
+    // UTILS
+    setMEI(mei) {
+        this.mei = mei;
+        return this;
+    }
+    setMidiTimes(midiTimes) {
+        this.midiTimes = midiTimes;
+        return this;
+    }
+    setScoreGraph(scoreGraph) {
+        this.scoreGraph = scoreGraph;
+        return this;
+    }
+    stopTimeouts() {
+        if (typeof this.timeouts !== "undefined") {
+            this.timeouts.forEach(to => {
+                clearTimeout(to);
+            });
+        }
+    }
+    setContainerId(containerId) {
+        this.containerId = containerId;
+        this.interactionOverlay = cq.getInteractOverlay(containerId);
+        this.vrvSVG = cq.getVrvSVG(containerId);
+        this.container = document.getElementById(containerId);
+        return this;
+    }
+    resetMidiInstruments() {
+        this.instruments = undefined;
+    }
+    getRestartTime() {
+        return this.restartTime;
+    }
+    setRestartTimeBySeconds(time) {
+        return this.restartTime = time;
+    }
+    setRestartTimeByElement(el) {
+        throw Error("Not yet implemented");
+    }
+    getIsPlaying() {
+        var _a;
+        return (_a = this.midiPlayer) === null || _a === void 0 ? void 0 : _a.isPlaying();
+    }
+    update() {
+        this.resetMidiInstruments();
+        this.resetListeners();
+        this.initMidiPlayer();
+        return this;
+    }
+    //// Experimantal
+    getMidiInput() {
+        var that = this;
+        var navigator = require('web-midi-api');
+        // consider using var navigator = require('jzz');
+        var midi;
+        var inputs;
+        var outputs;
+        function onMIDIFailure(msg) {
+            console.log('Failed to get MIDI access - ' + msg);
+            //process?.exit(1);
+        }
+        function onMIDISuccess(midiAccess) {
+            midi = midiAccess;
+            inputs = midi.inputs;
+            outputs = midi.outputs;
+            console.log("general midi info:", midi);
+            setTimeout(testOutputs, 100);
+        }
+        function testOutputs() {
+            console.log('Testing MIDI-Out ports...');
+            outputs.forEach(function (port) {
+                console.log('id:', port.id, 'manufacturer:', port.manufacturer, 'name:', port.name, 'version:', port.version);
+                port.open();
+                port.send([0x90, 60, 0x7f]);
+            });
+            setTimeout(stopOutputs, 1000);
+        }
+        function stopOutputs() {
+            outputs.forEach(function (port) {
+                port.send([0x80, 60, 0]);
+            });
+            testInputs();
+        }
+        function onMidiIn(ev) {
+            document.dispatchEvent(new CustomEvent("midiin", { detail: ev.data })); // goes to KeyModeHandler since there already most of the logic is implemented
+        }
+        function testInputs() {
+            console.log('Testing MIDI-In ports...');
+            inputs.forEach(function (port) {
+                console.log('id:', port.id, 'manufacturer:', port.manufacturer, 'name:', port.name, 'version:', port.version);
+                port.onmidimessage = onMidiIn;
+            });
+            //setTimeout(stopInputs, 5000);
+        }
+        function fillDeviceList(e) {
+            var _a;
+            var deviceList = (_a = cq.getContainer(that.containerId)) === null || _a === void 0 ? void 0 : _a.querySelector("#midiDeviceSelect");
+            if (deviceList === null)
+                return;
+            var value = e.port.name;
+            if (e.port.type === "input" && !e.port.name.includes("EDITOR")) {
+                var optionEntry = deviceList.querySelector("option[value='" + value + "']");
+                if (optionEntry !== null) {
+                    optionEntry.remove();
+                    console.log("Removed MIDI Device", e.port);
+                }
+                else {
+                    var option = document.createElement("option");
+                    option.setAttribute("value", value);
+                    option.textContent = e.port.manufacturer + " " + e.port.name;
+                    deviceList.append(option);
+                    console.log("Added MIDI Device", e.port);
+                }
+                deviceList.removeEventListener("change", chooseInput);
+                deviceList.addEventListener("change", chooseInput);
+            }
+        }
+        function chooseInput(e) {
+            var target = e.target;
+            console.log(e, target.value);
+            inputs.forEach(port => {
+                if (target.value === port.name) {
+                    port.onmidimessage = onMidiIn;
+                    console.log("Chosen MIDI Device", port);
+                }
+                else {
+                    port.close();
+                }
+            });
+        }
+        navigator.requestMIDIAccess().then(access => {
+            console.log(access);
+            access.onstatechange = (e) => {
+                fillDeviceList(e);
+            };
+            onMIDISuccess(access);
+            onMIDIFailure(access);
+        });
+    }
+}
+exports.default = MusicProcessor;