The paper "Decoding the evolution of melodic and harmonic structure of Western music through the lens of network science" analysed and visualised musical tracks to identify structural trends over a range of genres. This project is a web-based implementation inspired by the original R-based visualisations.
The application parses MIDI files to analyse note transitions and visualises the results as a 3D topological web.
-
Network Parsing & Analysis The application uses
@tonejs/midito convert binary MIDI data into a structured format. This processing occurs in a background Web Worker to maintain UI responsiveness. Notes are grouped by their MIDI tick to identify chords and sequential transitions. These transitions are stored in a directed, weighted graph usingngraph.graph, where nodes represent pitch classes and edges represent transitions. The worker calculates metrics such as Density, Reciprocity, Mean Node Entropy, and Global Efficiency. -
3D Visualization The graph is rendered using
three(Three.js). A 2D layout is calculated byngraph.forcelayoutusing a spring-physics simulation. This layout is then mapped to 3D space, with the Z-axis (depth) determined by each node's degree (connection count). Edges are rendered as curved Quadratic Bezier lines. Thepostprocessinglibrary is used to apply a Bloom effect to the scene. Interaction and node highlighting are handled via Three.js raycasting. -
Audio Playback & Synchronization Playback is managed by
tone(Tone.js), which provides the master clock and event scheduling. Audio synthesis is performed byspessasynth_lib, a Web Audio Worklet synthesizer that renders audio from SoundFont (.sf2) data.Tone.Drawis used to synchronize visual highlights in the 3D scene with audio playback events.
To run this project locally:
npm ci
npm run devBefore sending a pull request, run the linting and formatting checks locally:
npm run prettier
npm run eslint
npm run test
Sample MIDI files included from Wikimedia Commons:
Tone Nets sounds a bit like Tonnetz. Ha ha, so clever.