vibe-editor 0.0.4 → 0.0.6

package/src/scripts/js/scripts/MusicProcessor.js

@@ -0,0 +1,810 @@
+"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.spaceCount = 0;
+        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 _a;
+            //if ((this.container.querySelector("#recordAlignment") as HTMLInputElement)?.checked || this.audioTimes?.size === 0) return
+            if (((_a = this.audioTimes) === null || _a === void 0 ? void 0 : _a.size) === 0)
+                return;
+            var sec = e.target.currentTime;
+            this.highlight(sec, "", "audio");
+            this.drawFollowerRect();
+        }).bind(this);
+        this.resetSpacebarCount = (function resetAudioTimes(e) {
+            var input = e.target;
+            if (input.checked) {
+                this.spaceCount = 0;
+            }
+        }).bind(this);
+        this.preventAudioPause = (function preventAudioPause(e) {
+            if (e.code === "Space" && cq.getContainer(this.containerId).querySelector("#recordAlignment").checked) {
+                e.target.blur();
+                e.preventDefault();
+            }
+        }).bind(this);
+        this.recAlignmentManually = (function recAligmentManually(e) {
+            this.recordAlignment(e);
+        }).bind(this);
+        this.downloadAlignmentHandler = (function downloadAlignmentHandler(e) {
+            this.downloadAlignment(e);
+        }).bind(this);
+        this.handleCountdown = (function handleCountdown(e) {
+            var recToggle = this.container.querySelector("#recordAlignment");
+            if (!(recToggle === null || recToggle === void 0 ? void 0 : recToggle.checked))
+                return;
+            var slider = e.target;
+            this.countdown(slider);
+        }).bind(this);
+        this.midiPlayHandler = (function midiPlayHandler(e) {
+            if (!this.hasContainerFocus())
+                return;
+            this.midiPlayFunction(e);
+        }).bind(this);
+        this.setCurrentHighlightHandler = (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) {
+                this.timemap.forEach(tm => {
+                    var _a;
+                    if ((_a = tm.on) === null || _a === void 0 ? void 0 : _a.includes(playingNote.id)) {
+                        this.restartTime = (tm.tstamp * this.pulse * this.tempo) / 60000;
+                    }
+                });
+            }
+        }).bind(this);
+        /**
+         * Adds Class to be highlighted.
+         * Dispatches event for every Note which was started most currently
+         */
+        this.addClass = (function addClass(el, className) {
+            return new Promise(resolve => {
+                el.classList.add(className);
+                el.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();
+        this.interactionOverlay = cq.getInteractOverlay(this.containerId);
+        this.canvasMP = this.interactionOverlay.querySelector("#canvasMusicPlayer");
+        if (!this.canvasMP) {
+            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.insertBefore(this.canvasMP, this.interactionOverlay.firstChild);
+        return this;
+    }
+    /**
+     * 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 = 120; //Math.floor((60 / event.data) * 1000 / 120)
+            }
+            if (event.name === 'Note on' && event.velocity !== 0) {
+                var track = event.track;
+                var time = event.tick;
+                that.restartTime = event.tick;
+                var duration = that.highlight(time, event.noteName, "midi") / 1000; // duratioin must be in seconds 
+                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();
+        }
+    }
+    /**
+     * Find Durations from timemap based on id of note.
+     * @param id id of note
+     * @returns duration or default 1 when no duration could be computed.
+     */
+    findDuration(id) {
+        var _a, _b;
+        var dur;
+        var start;
+        var end;
+        for (let i = 0; i < this.timemap.length; i++) {
+            var tm = this.timemap[i];
+            if ((_a = tm.on) === null || _a === void 0 ? void 0 : _a.includes(id)) {
+                start = tm.tstamp;
+            }
+            if ((_b = tm.off) === null || _b === void 0 ? void 0 : _b.includes(id)) {
+                end = tm.tstamp;
+                dur = end - start;
+                break;
+            }
+        }
+        return dur || 1;
+    }
+    /**
+     * 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 || 0;
+            console.log("tick", this.midiPlayer.tick);
+            this.midiPlayer.skipToTick(this.restartTime);
+            this.midiPlayer.play();
+            document.dispatchEvent(this.playStartEvent);
+        }
+    }
+    ///// LISTENERS ////
+    setListeners() {
+        var _a, _b, _c;
+        var that = this;
+        if (!this.midiTimes) {
+            return;
+        }
+        var it = this.midiTimes.values();
+        var result = it.next();
+        while (!result.done) {
+            var arr = result.value;
+            arr.forEach(noteId => {
+                var _a;
+                const note = cq.getVrvSVG(this.containerId).querySelector(`#${noteId}`);
+                if (!note)
+                    return;
+                note.addEventListener("currentNote", this.setCurrentHighlightHandler);
+                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 === null || interactRect === void 0 ? void 0 : 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);
+        //this.container.querySelector("#recordAlignment")?.addEventListener("click", this.resetSpacebarCount)
+        (_a = this.container.querySelector("#audioSlider")) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", this.preventAudioPause);
+        (_b = this.container.querySelector("#audioSlider")) === null || _b === void 0 ? void 0 : _b.addEventListener("play", this.handleCountdown);
+        (_c = this.container.querySelector("#exportAlignment")) === null || _c === void 0 ? void 0 : _c.addEventListener("click", this.downloadAlignmentHandler);
+        //["ended", "pause"].forEach(ev => this.container.querySelector("#audioSlider")?.addEventListener(ev, function () { that.resetListeners() }))
+        document.addEventListener("keydown", this.recAlignmentManually);
+    }
+    removeListeners() {
+        var _a, _b, _c;
+        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(noteId => {
+                var _a;
+                const note = cq.getVrvSVG(this.containerId).querySelector(`#${noteId}`);
+                if (!note)
+                    return;
+                note.removeEventListener("currentNote", this.setCurrentHighlightHandler);
+                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 === null || interactRect === void 0 ? void 0 : interactRect.removeEventListener("click", this.startPointHandler);
+            });
+            result = it.next();
+        }
+        this.container.removeEventListener("timeupdate", this.fetchAudioSeconds, true);
+        (_a = this.container.querySelector("#audioSlider")) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", this.preventAudioPause);
+        (_b = this.container.querySelector("#audioSlider")) === null || _b === void 0 ? void 0 : _b.removeEventListener("play", this.handleCountdown);
+        (_c = this.container.querySelector("#exportAlignment")) === null || _c === void 0 ? void 0 : _c.addEventListener("click", this.downloadAlignmentHandler);
+        //["ended", "pause"].forEach(ev => this.container.querySelector("#audioSlider")?.removeEventListener(ev, function () { that.resetListeners() }))
+        document.removeEventListener("keydown", this.recAlignmentManually);
+    }
+    resetListeners() {
+        this.removeListeners();
+        this.setListeners();
+    }
+    /**
+     * Record an alignment by pressing the space button.
+     * For each press the id of the next measure will be saved.
+     * @param e
+     * @returns
+     */
+    recordAlignment(e) {
+        var _a;
+        var audioSlider = this.container.querySelector("#audioSlider");
+        var recToggle = this.container.querySelector("#recordAlignment");
+        if (audioSlider === null || audioSlider === void 0 ? void 0 : audioSlider.paused)
+            return;
+        if (!(recToggle === null || recToggle === void 0 ? void 0 : recToggle.checked))
+            return;
+        if (e.code === "Space") {
+            if (this.currentHighlight) {
+                this.spaceCount = parseInt(this.currentHighlight.getAttribute("n"));
+                (_a = this.audioTimes) === null || _a === void 0 ? void 0 : _a.forEach((v, k) => {
+                    if (k > audioSlider.currentTime) {
+                        this.audioTimes.delete(k);
+                    }
+                });
+            }
+            e.preventDefault();
+            if (!this.audioTimes || this.spaceCount === 0) {
+                this.audioTimes = new Map();
+            }
+            this.spaceCount += 1;
+            const measure = this.container.querySelector(`#vrvSVG .measure[n='${this.spaceCount}']`);
+            this.currentHighlight = measure;
+            this.drawFollowerRect();
+            this.audioTimes.set(audioSlider.currentTime, [measure.id]);
+            console.log(this.audioTimes);
+        }
+    }
+    downloadAlignment(e) {
+        const d = new Date();
+        const fileName = d.getUTCFullYear()
+            + ("0" + d.getDate()).slice(-2)
+            + ("0" + d.getMonth()).slice(-2)
+            + "_"
+            + ("0" + d.getHours()).slice(-2)
+            + ("0" + d.getMinutes()).slice(-2)
+            + ("0" + d.getSeconds()).slice(-2)
+            + "_"
+            + "alignment_" + this.containerId + ".json";
+        const audioTimesJson = JSON.stringify(Object.fromEntries(this.audioTimes));
+        console.log("Audio JSON", audioTimesJson);
+        this.download(fileName, audioTimesJson);
+    }
+    download(file, text) {
+        //creating an invisible element
+        var element = document.createElement('a');
+        element.setAttribute('href', 'data:text/plain;charset=utf-8, '
+            + encodeURIComponent(text));
+        element.setAttribute('download', file);
+        document.body.appendChild(element);
+        element.click();
+        document.body.removeChild(element);
+    }
+    /**
+     * Set countdown for given audioElement
+     * @param audioElement
+     */
+    countdown(audioElement, seconds = 5) {
+        audioElement.pause();
+        var that = this;
+        that.container.querySelector("#recordDiv label").textContent = seconds.toString();
+        seconds--;
+        Tone.start();
+        const synth = new Tone.Synth().toDestination();
+        function cdSound() {
+            synth.triggerAttackRelease("C5", "128n", undefined, 0.25);
+        }
+        cdSound();
+        var timer = setInterval(function () {
+            var _a;
+            if (seconds === 1) {
+                synth.triggerAttackRelease("C6", "4n", undefined, 0.25);
+            }
+            else if (seconds > 0) {
+                cdSound();
+            }
+            that.container.querySelector("#recordDiv label").textContent = seconds.toString();
+            seconds--;
+            if (seconds < 0) {
+                clearInterval(timer);
+                (_a = that.container.querySelector("#audioSlider")) === null || _a === void 0 ? void 0 : _a.removeEventListener("play", that.handleCountdown);
+                audioElement.play();
+                that.container.querySelector("#recordDiv label").textContent = "rec";
+            }
+        }, 1000);
+    }
+    /**
+     * 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) {
+                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) {
+        // this listener is not in setListener function since we can get into an infinite loop easily
+        ["ended", "pause"].forEach(ev => this.container.querySelector("#audioSlider").addEventListener(ev, function () { that.resetListeners(); }));
+        var that = this;
+        var fd = new FormData();
+        fd.append('mei', new Blob([meiConverter.docToMei(this.currentMEI)]));
+        fd.append('audio', 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))
+                that.audioTimes.get(val).push(key);
+            }
+        }).catch((error) => {
+            alert(["Aligning Service is not Available:", error, ".", "\nToggle the record button at the audio slider to activate manual measure alignment."].join(" "));
+            console.log(["An error occured while aligning the soundfile:", error].join(" "));
+        });
+    }
+    /**
+     * Time maps and actual values of audio elements or midi events might 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;
+        var map;
+        if (source === "midi") {
+            map = this.midiTimes;
+        }
+        else if (source === "audio") {
+            map = this.audioTimes;
+            // const audioMap = new Map<number, string[]>() 
+            // map.forEach((v, k) => {
+            //     audioMap.set(k, v.map(v => v.id)) // map ids, since highlight function only works with ids, not elements
+            // })
+            // map = audioMap
+        }
+        entries = map.entries();
+        targetEntry = map.get(time);
+        if (targetEntry)
+            return targetEntry;
+        for (const [key, value] of entries) {
+            var diff = Math.abs(time - key);
+            // check if diff is in range of next time to be sufficiently percieved as beeing on time
+            var diffCondition = diff < temp;
+            diffCondition && (diffCondition = source === "audio" ? diff <= 0.2 : true);
+            if (diffCondition) {
+                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;
+    }
+    setTimemap(tm) {
+        this.timemap = tm;
+        this.midiTimes = new Map();
+        this.timemap.forEach(tm => {
+            if (tm.on)
+                this.midiTimes.set(tm.tstamp, tm.on);
+        });
+        return this;
+    }
+    /**
+     * Highlight playing Elements
+     * @param time Time at which Element is played (in ticks or ms)
+     * @param noteName noteName is important to find the correct element for the current time
+     */
+    highlight(time, noteName, source) {
+        noteName = noteName.replace("#", "s").replace("b", "f"); // make sure the notname is compatible with the mei accid names
+        noteName = noteName.toLowerCase();
+        const timeMS = source === "audio" ? time : (time / (this.pulse)) * (60000 / this.tempo);
+        var soundDur;
+        var highlightElements = this.getClosestEntry(timeMS, source);
+        if (!highlightElements)
+            return;
+        highlightElements.forEach((id) => {
+            if (this.container.querySelector(`#${id}`)) { //.classList.contains("measure")) {
+                this.currentHighlight = this.container.querySelector(`#${id}`); //highlightElements[0]
+                const meiElement = this.currentMEI.querySelector(`#${id}`);
+                const pname = meiElement.getAttribute("pname");
+                var accid = meiElement.getAttribute("accid") || meiElement.getAttribute("accid.ges");
+                accid = accid === "n" || !accid ? "" : accid;
+                const oct = meiElement.getAttribute("oct");
+                const meiNoteName = pname + accid + oct;
+                const enhUpNoteName = (mappings_1.enharmonicToCross.get(pname + accid) || "") + oct;
+                const enhDownNoteName = (mappings_1.enharmonicToB.get(pname + accid) || "") + oct;
+                const noteNameVersions = [meiNoteName, enhUpNoteName, enhDownNoteName];
+                if (noteNameVersions.includes(noteName)) {
+                    soundDur = this.findDuration(id);
+                }
+            }
+        });
+        this.timeouts = new Array();
+        highlightElements.forEach((id) => {
+            const el = this.container.querySelector(`#${id}`);
+            this.addClass(el, currentlyPlayingFlag).then(() => {
+                if (source === "audio") { //we have no proper duration display yet, so no red coloring for notes, just the followerRect for the whole measure
+                    el.classList.remove(currentlyPlayingFlag);
+                    return;
+                }
+                var to = setTimeout(() => { el.classList.remove(currentlyPlayingFlag); }, this.findDuration(id));
+                this.timeouts.push(to);
+            });
+        });
+        return soundDur || 500;
+    }
+    /**
+     * 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 ptCurrentHighlightElement = coordinates.getDOMMatrixCoordinates(this.currentHighlight, this.canvasMP);
+        var parentMeasureRect = this.currentHighlight.closest(".measure").getBoundingClientRect();
+        var ptParentMeasure = coordinates.getDOMMatrixCoordinates(parentMeasureRect, this.canvasMP);
+        var upperBound = (ptParentMeasure.top - margin);
+        var lowerBound = (ptParentMeasure.bottom + margin);
+        var leftBound = (ptCurrentHighlightElement.left - margin);
+        var rightBound = (ptCurrentHighlightElement.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() {
+        if (!document.getElementById(this.containerId))
+            return false;
+        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 = typeof newNote.accid === "string" ? 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, undefined, 0.3);
+            Tone.start();
+        }
+    }
+    // UTILS
+    setMEI(mei) {
+        this.currentMEI = 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");
+    }
+    /**
+     * Set audioTimes map for alignment.
+     * IDs are set new afterwards to account for different MEI.
+     * Assumes that Score and Map have the same number of measures.
+     * @param audioTimes
+     * @returns
+     */
+    setAudioTimes(audioTimes) {
+        this.audioTimes = audioTimes;
+        this.container.querySelectorAll(`#vrvSVG .measure`).forEach((m, i) => {
+            const key = Array.from(this.audioTimes.keys())[i];
+            this.audioTimes.set(key, [m.id]);
+        });
+        return this;
+    }
+    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;