Updated.

README.md

@@ -1,28 +1,16 @@
-# Web Audio SPectrogram
-
-This is a web audio-based spectrogram written using
-[Polymer](http://polymer-project.org).
+This is a live-input spectrogram written using [Polymer][polymer] and
+the [Web Audio API][wapi].
 
 ![Screenshot](screenshot.png)
 
-Features:
-
-- Toggle between logarithmic and linear scales.
-- FFT window size.
-- Frequency axis labels and ticks.
-
-TODO: 
+[polymer]: http://polymer-project.org
+[wapi]: http://webaudioapi.com
 
-- Also allows the spectrogram to be paused and resumed.
-- Configurable color map (correlating to amplitude).
-- Load audio files.
-- Zoom into pieces of the spectrogram for more detail.
-- Detailed analysis mode that is sample accurate but not real time.
-- Custom FFT with a bigger window.
+Having a spectrogram handy is incredibly for a lot of the work I've had
+to do recently. So I built one that satisfies my needs.
 
 
-
-# The API
+# Using the Spectrogram component
 
 Simplest possible version:
 
@@ -33,14 +21,25 @@ Enable controls:
     <g-spectrogram controls>
     </g-spectrogram>
 
-Turn on log scale, enable frequency labels and show 10 ticks.
+Pass parameters to the component:
 
     <g-spectrogram log labels ticks="10">
     </g-spectrogram>
 
+Parameters and what they do:
+
+- `controls` (boolean): shows a config component.
+- `log` (boolean): enables y-log scale (linear by default).
+- `speed` (number): how many pixels to move past for every frame.
+- `labels` (boolean): enables y-axis labels.
+- `ticks` (number): how many y labels to show.
+- `color` (boolean): turns on color mode (grayscale by default).
+- `oscillator` (boolean): enables an oscillator overlay.
 
-# Relevant links
+# Future work / features
 
-- http://taps.cs.princeton.edu/
-- http://isse.sourceforge.net/
+It would be great to add a few things to this spectrogram. If you're
+interested in contributing, please submit your changes as a pull
+request:
 
+- Improved axis labeling

g-oscillator.html

@@ -10,7 +10,13 @@
       height: 100%;
     }
   </style>
-  <canvas id="freq"></canvas>
+  <canvas id="freq" on-mousedown={{onMouseDown}}
+      on-mouseup={{onMouseUp}}
+      on-mousemove={{onMouseMove}}
+      on-mouseout={{onMouseOut}}
+      on-touchstart={{onTouchStart}}
+      on-touchend={{onTouchEnd}}
+      on-touchmove={{onTouchMove}}></canvas>
   </template>
   <script>
 // Assumes context is an AudioContext defined outside of this class.
@@ -21,12 +27,6 @@
   speed: 2,
 
   attachedCallback: function() {
-    // Listen to mouse events.
-    this.shadowRoot.addEventListener('mousedown', this.onMouseDown.bind(this));
-    this.shadowRoot.addEventListener('mouseup', this.onMouseUp.bind(this));
-    this.shadowRoot.addEventListener('mousemove', this.onMouseMove.bind(this));
-    this.shadowRoot.addEventListener('mouseout', this.onMouseOut.bind(this));
-
     this.loop();
   },
 
@@ -73,9 +73,9 @@
       // There can be only one oscillator.
       return;
     }
+    this.updatePointer(event);
     // Create an oscillator.
     this.osc_ = this.createOscillator_();
-    this.updateMouse(event);
     this.lastFreq = this.getLastFrequency();
     this.osc_.frequency.value = this.lastFreq;
   },
@@ -86,30 +86,42 @@
       this.osc_.stop(0);
       this.osc_ = null;
     }
-    this.updateMouse(null);
+    this.updatePointer(null);
     this.lastFreq = null;
   },
 
   onMouseMove: function(event) {
     console.log('mm');
     if (this.osc_) {
-      this.updateMouse(event);
+      this.updatePointer(event);
       this.lastFreq = this.getLastFrequency();
       this.osc_.frequency.value = this.lastFreq;
     }
   },
 
-  onMouseOut : function(event) {
+  onMouseOut: function(event) {
     console.log('mo');
     if (this.osc_) {
       this.osc_.stop(0);
       this.osc_ = null;
     }
-    this.updateMouse(null);
+    this.updatePointer(null);
     this.lastFreq = null;
   },
 
-  updateMouse: function(event) {
+  onTouchStart: function(event) {
+    console.log('ts');
+    if (this.osc_) {
+      return;
+    }
+    this.updatePointer(event);
+    // Create an oscillator.
+    this.osc_ = this.createOscillator_();
+    this.lastFreq = this.getLastFrequency();
+    this.osc_.frequency.value = this.lastFreq;
+  },
+
+  updatePointer: function(event) {
     event = event || {};
     this.lastMouseX = event.pageX;
     this.lastMouseY = event.pageY;

g-spectrogram.js

@@ -228,8 +228,8 @@ Polymer('g-spectrogram', {
   },
 
   getFullColor: function(value) {
-    var fromH = 0;
-    var toH = 62;
+    var fromH = 62;
+    var toH = 0;
     var percent = value / 255;
     var delta = percent * (toH - fromH);
     var hue = fromH + delta;

index.html

@@ -4,6 +4,7 @@
     <script src="bower_components/platform/platform.js"></script>
     <link rel="stylesheet" href="style.css">
     <link rel="import" href="g-spectrogram.html">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
     <g-spectrogram controls labels log oscillator></g-spectrogram>