Is it possible to display notes from a midi file in real-time using Tone.js?

Question

I want to display the notes in realtime when the midi file is beign played using tone.js, but all i can do is display them before the track plays. Is there anyway to display them alongside the track using tone.js or any other ways?

All the below code does is log all notes info when the play button is clicked.

    async function initiateMidi() {
        const midi = await Midi.fromUrl('src\\static\\saliha-ya-khdoud-ettefeh.mid');
    
        const synth = new Tone.Synth().toDestination();
        synths.push(synth);
    
        const now = Tone.now() + 0.5;
    
        midi.tracks.forEach((track) => {
            track.instrument;
            const notes = track.notes;
            notes.forEach((note) => {
                const noteTime = note.time + now;
                synth.triggerAttackRelease(note.name, note.duration, noteTime, note.velocity);
                console.log(`Note: ${note.name}, Time: ${noteTime}, Duration: ${note.duration}`);
            });
        });
    }

Any help on how will this work in note.js or any other way I should go about this would be appreciated and thanks in advance

Edit : I added a setTimeout function to display the notes in time but I still there is a way to do this using note.js

    async function initiateMidi() {
            const midi = await Midi.fromUrl('src\\static\\saliha-ya-khdoud-ettefeh.mid');
            const synth = new Tone.Synth().toDestination();
            synths.push(synth);
    
            const now = Tone.now() + 0.5;
    
            midi.tracks.forEach((track) => {
                const notes = track.notes;
                notes.forEach((note) => {
                    const noteTime = note.time + now;
                    const noteDuration = note.duration;
    
                    setTimeout(() => {
                        console.log(`Note: ${note.name}, Time: ${noteTime}, Duration: ${noteDuration}`);
                    }, noteTime * 1000);
    
                    synth.triggerAttackRelease(note.name, noteDuration, noteTime, note.velocity);
                });
            });
        }

Answer 1

See https://tonejs.github.io/docs/14.7.77/Transport.html#schedule. You can use Transport.schedule() which works almost like setTimeout(). In general, it is better to use the schedule() method when scheduling audio events in Tone.js. This ensures that the events occur at the correct time in the musical timeline, regardless of the tempo.