Skip to content

Workshop on music visualizations with p5.js from MozFest '14, Eyeo '15

Notifications You must be signed in to change notification settings

robstenzinger/p5-music-viz

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

99 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Visualizing Music with p5.js

This session is for anyone who would like to explore music, visuals and creative coding for the web. We'll demonstrate types of data we can get from digital signal processing using interactive sketches in p5.js and the p5.sound library that builds upon the Web Audio API.

Part 1: Signal Processing

  • amplitude
  • frequency
  • peak detection
  • pitch detection / autocorrelation

How can we map this data onto meaningful visuals that enhance our experience of music?

Part 2: Musical Timing

  • sync music to timestamped lyrics
  • pre-analyze file with the Echo Nest API, and visualize the result

Demos:


Libraries

Participants may use whatever tools they wish, but the demos in this repo use the following libraries:

p5.js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today’s web.

p5.sound.js is an addon library that brings the Processing approach to the Web Audio API.

p5.dom.js is an addon library that helps us manipulate the DOM.

Setup

Getting Started with p5

A few more complex p5 examples:


p5.sound Classes That We'll Use For Music Visualizations:

p5.AudioIn - microphone! documentation | source code

p5.SoundFile - load and play .mp3 / .ogg files. documentation | source code

  • loadsound() creates a SoundFile using a Web Audio API buffer. Use during preload(), or with a callback, or with drag and drop.

p5.PeakDetect - detect beats and/or onsets within a frequency range documentation }| source code

p5.Amplitude - Analyze volume. documentation | source code

  • .getLevel() returns a Root Mean Square (RMS) amplitude reading, between 0.0 and 1.0, usually peaking at 0.5
  • .smooth()

p5.FFT - Analyze amplitude over time or frequency. documentation | source code

  • .analyze() returns amplitude readings from 0-255 in the frequency domain.
  • .waveform() returns amplitude readings from -1 to 1 in the time domain. demo | source

Music included in the demos/repo:

Dig Deeper into Web Audio Music Visualization...

Music Visualization Inspiration...

About

Workshop on music visualizations with p5.js from MozFest '14, Eyeo '15

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 97.8%
  • HTML 2.2%