No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
audio
scripts
src
.DS_Store
.gitignore
ProposalReadMe.md
README.md
bundle.js
favicon.ico
index.html
keymap.png
package.json
styles2.css
syntheseyeser.png
webpack.config.js
wireframe.png

README.md

Syntheseyeser

Syntheseyeser is an interactive 3D soundwave visualizer accompanied with a basic web based synthesizer and music player. It is written in Javascript using Three.js for 3D rendering and Tone.js to create the built in synthesizer and music player.

syntheseyeser

Waveform

The waveform illustrates an audio sample analyzed with a bitrate of 128 KB/s animated at a rate of 60 FPS. The sound wave is visualized using a 128 x 32 grid of spherical objects, taking in the waveform analysis (an array of decibel values) and manipulating the height (y-value) of each spherical object based on the given value at said index position of the array. Each line of spherical objects represents the array of analyzed values and is visualized 32 times across the z-axis to create the 3 dimensional visualization.

Waveform Colors

The waveform colors are manipulated based on the decibel values given in the array to create a more engaging user experience. Using a math equation and comparator operator, each decibel value in the waveform analysis array is compared and then the color of that spherical object is changed accordingly.

Synth

A basic polyphonic synthesizer is built in with a triangular waveform oscillator. The synth can be played by clicking on the keys displayed on the keyboard, or by pressing your computer keyboard keys. Your computer keyboard keys are mapped exactly the same as a standard Digital Audio Workstation (illustrated below). keymap

View Control

The view control feature allows the user to control the Three.js camera position. While the view control is active, the X and Y position of the camera is controlled by the current location of the user's mouse, and the Z position is controlled by the user's scroll creating a zoom effect.

Music Player

To illustrate the full ability of the 3D visualizer, a music player was added. Upon clicking the "play" button, the featured song , "Drowning In You" by Pascäal begins playing. This song was chosen for its dynamic nature of short silences and isolated textured sounds.