Example Audiograms:

 

Medium:

 

Hard:

 

WITHOUT WNYC'S AUDIOGRAM:

 

Audiogram

NOTE: FOR WINDOWS USERS, GO TO EALEXJORDAN.COM/INSTALL AND FOLLOW THOSE STEPS.

We're going to use the following programs:

Hindenburg
Terminal
Homebrew
Node.js
GIMP 2.0
Brackets

InSTALLATION INSTRUCTIONS:

1) Install/update XCode from the App Store
2) Install Homebrew
3) Install Node.js
4) Open Terminal
5) Type “brew install git”, hit enter, and wait for it to finish
6) Type “brew install pkg-config cairo pango libpng jpeg giflib ffmpeg”, hit enter and wait for this to finish (might take a little while)

NOTE: You may receive an error that says “fatal error: ‘jpeglib.h’ file not found”, The problem is even though you have XCode installed, you don’t have XCode command line tools installed -- so when Audiogram is trying to install, it is using language your computer doesn’t understand.
Try typing xcode-select --install after the $ in Terminal. If this installs something, you should be able to continue.

7) Type “cd /applications” (this is the directory where it’ll be installed)
8) Type “git clone https://github.com/nypublicradio/audiogram.git” and wait for it to finish.
9) Type “cd audiogram”
10) Type npm install

 

MAKING AUDIOGRAMS:

 

In Terminal:

1) Type “cd audiogram”
2) Type “npm start”
3) Wait until you see “info: Listening on 8888”, then open Chrome and type in the address bar “http://localhost:8888”

 

CUSTOMIZING AUDIOGRAMS:

1) Go to the styles file in the following location: /applications/audiogram/settings/themes.json

2) Open in Brackets

Here are the commands you need:

"pattern": can be "wave", "bars", "roundBars", "line", "curve" or "equalizer"

"waveTop" and "waveBottom": Given as a value in pixels out of 720 (or your custom height). Determines the limits of the waveform. The default is 150-420.

"backgroundColor": Given as a hexidecimal value (i.e., #FFFFFF is white, #000000 is black). Replaced by backgroundImage.

"backgroundImage": Given as a filename in quotes (i.e., "subway.jpg"). Image must be in /settings/backgrounds/ folder, and will be automatically resized to fit your height and width.

"foregroundColor": Given as a hexidecimal value. Changes your caption and wave color at the same time.

"waveColor": Change wave color.

"captionColor": Change caption color.

"captionTop": Same, but for the caption. The default is 470.

"captionLeft" & "captionRight": Given as a value in pixels out of 1280 (or your custom width). Caption is always centered.

"captionFont": Use WEBSAFE fonts, in quotes. Order should be weight height 'name'. If you're changing the height, make sure to change the "captionLineHeight" and "captionLineSpacing" values as well.