MusicVis can read one of two types of audio input: microphone or file upload. Please one select below.
MusicVis is a web application created to visualize sound. It was created by Van Huynh as a Fine Arts Independent Research Study at the University of Pennsylvania during the Spring 2017 semester; the study was advised by professor David Comberg. Support and guidance were also provided by Ryan Kiple, Amaris Kobolak, Richard Lee, Stephanie Park, Irena Xia, and Minji Yoon.
This web application uses Web Audio API to read in audio files or live audio via microphone to draw appropriately colored circles onto HTML5 canvases. The output works both as a live video visualization of the work, as well as a static image composited at the end of the analysis. The color, position, and size of the circles are all determined by the data coming from the audio feed.
Music visualization first started with the Atari Video Music in 1976. Later, in the 90s, music visualization became more widespread on the PC platform, resulting in visualizers like Cubic Player (1994) and Inertia Player (1995). The late 90s saw the birth of various other visualizers, like Winamp (1997), Audion (1999), and SoundJam (2000). These visualizations were initially meant to accompany the sound, be it in a stereo system or while played on an audio player program. More recent visualizers were created with the intention of creating a piece of art. These visualizers are more focused on engaging the audience’s attention by creating a conversation between the visuals and the sound. Additionally, these visualizations tend to only capture the instantaneous second of the music, not the cumulative whole.
MusicVis is a visualizer that is intended to capture the essence of sound both dynamically and statically. Although it has the goal of being visually appealing, the main objective is to faithfully map out the data of the sound. Information is of a higher priority than visual appeal.
The positions of the circles along the horizontal axis are determined by the amount of time that have passed in the audio feed. The more time that has passed, the further along the horizontal axis the circle is drawn.
time
The position along the vertical axis is dependent upon the pitch that is being read in at that time. The higher the pitch, the higher the circle is on the vertical axis. The height is calculated using the pitch such that there is a constant distance between each octave. This would not naturally occur because every time a note goes up an octave, their frequencies double, which would lead to an exponential increase in the distance between octaves.
The size of the circles are determined by the volume of the audio feed. The louder the sound, the larger the circle, and vice versa.
The color of the circles are dependent upon the note. It is done so such that all A notes are the same color, all B notes are the same color, all C notes are the same color, and so on. The mapping of notes to colors is completely arbitrary and not based off any scientific basis. The color mapping can be modified in the advanced settings.
