vibe-editor 0.0.0 → 0.0.1

package/src/scripts/js/MusicProcessor.js

@@ -16,6 +16,7 @@ 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());
@@ -25,16 +26,45 @@ class MusicProcessor {
             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, 100, "audio");
+            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.setCurrentNoteHandler = (function setCurrentNoteHandler(e) {
+        this.setCurrentHighlightHandler = (function setCurrentNoteHandler(e) {
             this.currentNote = e.target;
         }).bind(this);
         /**
@@ -47,25 +77,22 @@ class MusicProcessor {
             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;
+                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;
                     }
-                    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) {
+        this.addClass = (function addClass(el, className) {
             return new Promise(resolve => {
-                n.classList.add(className);
-                n.dispatchEvent(this.noteEvent);
+                el.classList.add(className);
+                el.dispatchEvent(this.noteEvent);
                 resolve(true);
             });
         }).bind(this);
@@ -91,15 +118,17 @@ class MusicProcessor {
         this.rootBBox = this.interactionOverlay.getBoundingClientRect();
         var rootWidth = this.rootBBox.width.toString();
         var rootHeigth = this.rootBBox.height.toString();
-        if (this.canvasMP == undefined) {
+        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.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);
+        return this;
     }
     /**
      * Initialize Player
@@ -111,20 +140,15 @@ class MusicProcessor {
             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;
+                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;
-                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");
+                var duration = that.highlight(time, event.noteName, "midi") / 1000; // duratioin must be in seconds 
                 if (!that.isFirefox) {
-                    that.drawFollowerRect();
+                    //that.drawFollowerRect()
                 }
                 if (that.instruments != undefined) {
                     var instr = that.instruments[track - 2];
@@ -133,17 +157,40 @@ class MusicProcessor {
             }
         });
         this.midiPlayer.loadArrayBuffer(buffer_1.Buffer.from(this.midi, "base64"));
-        this.mapDurations();
+        //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
+     * 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);
@@ -196,7 +243,8 @@ class MusicProcessor {
             });
             this.midiPlayer.division = 120;
             //this.player.tempo = this.tempo
-            this.midiPlayer.tick = this.restartTime;
+            this.midiPlayer.tick = this.restartTime || 0;
+            console.log("tick", this.midiPlayer.tick);
             this.midiPlayer.skipToTick(this.restartTime);
             this.midiPlayer.play();
             document.dispatchEvent(this.playStartEvent);
@@ -204,54 +252,163 @@ class MusicProcessor {
     }
     ///// LISTENERS ////
     setListeners() {
+        var _a, _b, _c;
         var that = this;
-        if (this.midiTimes == undefined) {
+        if (!this.midiTimes) {
             return;
         }
         var it = this.midiTimes.values();
         var result = it.next();
         while (!result.done) {
             var arr = result.value;
-            arr.forEach(note => {
+            arr.forEach(noteId => {
                 var _a;
-                if (note == undefined)
+                const note = cq.getVrvSVG(this.containerId).querySelector(`#${noteId}`);
+                if (!note)
                     return;
-                note.addEventListener("currentNote", this.setCurrentNoteHandler);
+                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.addEventListener("click", this.startPointHandler);
+                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();
-        console.log("midiTimes", this.midiTimes);
         var result = it.next();
         while (!result.done) {
             var arr = result.value;
-            arr.forEach(note => {
+            arr.forEach(noteId => {
                 var _a;
-                note.removeEventListener("currentNote", this.setCurrentNoteHandler);
+                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.removeEventListener("click", this.startPointHandler);
+                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
      */
@@ -266,7 +423,7 @@ class MusicProcessor {
             return;
         if (e.code === "Space") {
             e.preventDefault();
-            if (e.shiftKey || document.getElementById("followerRect") !== null) {
+            if (e.shiftKey) {
                 this.context.resume().then(() => this.playMidi());
             }
             else if (typeof this.midiPlayer != undefined) {
@@ -279,11 +436,12 @@ class MusicProcessor {
      * @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.mei)]));
+        fd.append('mei', new Blob([meiConverter.docToMei(this.currentMEI)]));
         fd.append('audio', file);
-        console.log("in musicprocessor", this.mei, file);
         var devUrl = 'http://localhost:8001/align';
         axios_1.default.post(devUrl, fd, {
             headers: {
@@ -297,80 +455,16 @@ class MusicProcessor {
                 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(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(" "));
         });
     }
     /**
-     * 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)
+     * 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
@@ -379,15 +473,28 @@ class MusicProcessor {
         var targetEntry;
         var temp = Infinity;
         var entries;
+        var map;
         if (source === "midi") {
-            entries = this.midiTimes.entries();
+            map = this.midiTimes;
         }
         else if (source === "audio") {
-            entries = this.audioTimes.entries();
-        }
+            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);
-            if (diff < temp) {
+            // 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;
             }
@@ -417,24 +524,58 @@ class MusicProcessor {
         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 ms)
-     * @param duration Duration of Element (in ms)
+     * @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, duration, source) {
-        var notes = this.getClosestEntry(time, source);
+    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();
-        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);
+        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(() => { n.classList.remove(currentlyPlayingFlag); }, duration);
+                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
@@ -451,13 +592,13 @@ class MusicProcessor {
             this.canvasMP.appendChild(followerRect);
         }
         var margin = 5;
-        var ptCurrentNote = coordinates.getDOMMatrixCoordinates(this.currentNote, this.canvasMP);
-        var parentMeasureRect = this.currentNote.closest(".measure").getBoundingClientRect();
+        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 = (ptCurrentNote.left - margin);
-        var rightBound = (ptCurrentNote.right + 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());
@@ -465,6 +606,8 @@ class MusicProcessor {
         followerRect.setAttribute("height", (lowerBound - upperBound).toString());
     }
     hasContainerFocus() {
+        if (!document.getElementById(this.containerId))
+            return false;
         return document.getElementById(this.containerId).classList.contains("activeContainer");
     }
     ///SYNTH////
@@ -474,7 +617,7 @@ class MusicProcessor {
         }
         let note = newNote.pname;
         let dur = newNote.dur + "n";
-        var accid = newNote.accid != undefined ? newNote.accid.replace("f", "b").replace("s", "#").replace("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") {
@@ -505,13 +648,13 @@ class MusicProcessor {
         }
         if (!note.includes("undefined") && !dur.includes("undefined")) {
             dur = "16n";
-            synth.triggerAttackRelease(note, dur);
+            synth.triggerAttackRelease(note, dur, undefined, 0.3);
             Tone.start();
         }
     }
     // UTILS
     setMEI(mei) {
-        this.mei = mei;
+        this.currentMEI = mei;
         return this;
     }
     setMidiTimes(midiTimes) {
@@ -548,6 +691,21 @@ class MusicProcessor {
     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();