A tool to create beautiful musical visualisations. Inspired by the amazing animations on Musanim.
MuVis lets you import the musical notes from a MIDI file, divided into different voices, and lets you assign different types of animations to each voice. It provides a WYSIWYG view that shows you the final result as you make changes.
It has a tool to synchronize the music from the MIDI file to an existing audio source for the same piece of music on YouTube. This allows you to exactly match the animation to the music.
The resulting project can be saved and loaded as a JSON file. The application also keeps track of your edit history, allowing you to undo and redo changes.
The project is entirely made up of static JavaScript, HTML and CSS. After cloning the repo, all you need to do is open index.html in your browser. You can also open the application on https://sytzez.github.io/muvis/. I have mainly tested it on Google Chrome.
I used React to render the UI, with Redux to store the state of the project and allow redoing and undoing operations. This state (a cleaned up version) is also used to store the project as a JSON file. The visuals are created using WebGL with GLSL (the GL shading language).
In this view you can start a new project, load data from a MIDI file, load/save a project from/to a JSON file or open one of the example projects.
The following example projects are available:
The prelude from Wagner's opera Tristan und Isolde, containing the famous Tristan chord.
The animation is sober, soft, and slow, matching the yearning, ghostly mood and soft orchestral sound of the piece. It uses the blob note shape, a uniform color for all voices, the float note-to-note connection, the flash light-up mode, and a slow scrolling speed.
The first movement from the Messa de Nostre Dame by Machault. A medieval masterpiece.
The visualisation highlights the 4 voice polyphony of the piece, each voice being drawn in a different color.
Note: The YouTube video is not available anymore
The final movement from Rameau's keyboard suite in A minor (RCT 5). It is a theme with variations, which each variation becoming increasingly intense.
The base melody is highlighted by the animation in each variation, showing the same melody on every variation, while the actual music keeps changing. The two layers of animation contract eachother, the repeating melody being soft and moving slowly behind the fast and pointy variations.
Here you can edit, delete and add notes. You can apply these operations to multiple notes at once by selecting multiple notes. You can assign brushes to notes, which gives you the ability to add different animation styles to specific notes. You can also assign voices to notes, which gives them a different color if color based on voice is used. All operations are undoable and redoable. By changing the play position, you can see what the animation will look like at a specific moment, by looking at the preview in the bottom left corner.
On the right panel you can change the style of animation for the selected brush, the color of the selected voice, or some details about the whole piece.
This graph allows you to synch the visual notes to the audio in the YouTube video. The horizontal axis represents the time in the YouTube video, the vertical axis the time in the MIDI notes. By adding points to the graph, you can map these two times to eachother. Like in the Note Editor, you can change the play position to see a preview at the current moment, allowing you to accurately synch the audio and video.
On the bottom right, there are some tools to zoom in/out per dimension.
A large view of the resulting animation.
