konsumer
diff --git a/‎packages/bargraph/README.md
+50 b/‎packages/bargraph/README.md
+50
diff --git a/‎packages/bargraph/bargraph-demo.mp3
4.2 MB b/‎packages/bargraph/bargraph-demo.mp3
4.2 MB
diff --git a/‎packages/bargraph/index.html
+53 b/‎packages/bargraph/index.html
+53
diff --git a/‎packages/bargraph/index.js
+53 b/‎packages/bargraph/index.js
+53
@@ -0,0 +1,50 @@
+# crossaudio bargraph
+
+This allows you to draw a bargraph to a canvas.
+
+## usage
+
+Install in your web-project with `npm i @crossaudio/bargraph`. Use it in a synth, like this:
+
+Put this in your HTML:
+
+```html
+<canvas id="canvas" width="960" height="300" /><br />
+<label><span>frequency:</span> <input type="range" min="0" max="127" id="frequency"></label>
+```
+
+And this in your script:
+
+```js
+const mtof = note => 440 * Math.pow(2, (note - 69) / 12)
+
+const synth = (context, params) => {
+  const bargraph = new Bargraph(context, document.getElementById('canvas'))
+  bargraph.start()
+
+  const vco = context.createOscillator()
+  vco.frequency.value = mtof(params.frequency)
+  vco.start()
+
+  params.on('frequency', value => {
+    vco.frequency.value = mtof(value)
+  })
+
+  vco.connect(bargraph)
+  bargraph.connect(context.destination)
+}
+
+// play synth
+const params = new Params({
+  frequency: 48
+})
+play(synth, params)
+
+// hook up the UI
+const freq = document.getElementById('frequency')
+freq.onchange = e => { params.frequency = freq.value }
+```
+
+## TODO
+
+- You might also be able to use it in [node-canvas](https://github.com/Automattic/node-canvas), test, and if it works, add an example
@@ -0,0 +1,53 @@
+<head>
+  <title>@crossaudio/bargraph</title>
+  <style>
+    body {
+      width: 95%;
+      max-width: 1024px;
+      margin: auto;
+      font-family: sans-serif;
+      padding: 20px;
+    }
+    label {
+      display: block;
+    }
+    canvas {
+      width: 100%;
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <h1>@crossaudio/bargraph</h1>
+  <p>This is a simple demo of <a href="https://github.com/konsumer/crossaudio/tree/main/packages/bargraph">@crossaudio/bargraph</a>. View the source to see how it works. It uses plain javascript, but could be loaded in react, or even some native implementation of canvas. Due to browser-security, you will need to click on the page to start the analysis. The test-music is <a href="https://soundcloud.com/mokhov/midnight-love">Mokhov - Midnight Love</a></p>
+  
+  <canvas id="canvas" width="960" height="300"></canvas>
+
+<!-- use CDN to get these -->
+<script src="https://unpkg.com/@crossaudio/core@latest"></script>
+<script src="https://unpkg.com/@crossaudio/bargraph@latest"></script>
+<!-- <script src="dist/crossaudio-bargraph.umd.js"></script> -->
+
+<script>
+// these were added by script-tags, above
+const { Bargraph } = window.bargraph
+const { play } = window.core
+
+// standard synth definition
+const synth = async (context, params) => {
+  // TODO: wrap this in crossaudio
+  const audio = new Audio('bargraph-demo.mp3')
+  audio.loop = true
+  audio.play()
+  const source = context.createMediaElementSource(audio)
+
+  const bargraph = new Bargraph(context, document.getElementById('canvas'))
+  bargraph.start()
+
+  source.connect(bargraph)
+  bargraph.connect(context.destination)
+}
+
+play(synth)
+</script>
+</body>
@@ -0,0 +1,53 @@
+/* global AnalyserNode */
+
+import interpolate from 'color-interpolate'
+
+// "jet" from https://www.npmjs.com/package/colormap
+const defaultPallette = ['#000083', '#000787', '#000d8c', '#001490', '#001b94', '#002199', '#00289d', '#002fa1', '#0035a6', '#003caa', '#0047af', '#0152b3', '#015db8', '#0167bd', '#0172c2', '#027dc6', '#0288cb', '#0293d0', '#039ed5', '#03a8d9', '#03b3de', '#03bee3', '#04c9e7', '#04d4ec', '#04dff1', '#04e9f6', '#05f4fa', '#05ffff', '#14fff0', '#22ffe1', '#31ffd2', '#40ffc3', '#4fffb4', '#5dffa5', '#6cff96', '#7bff87', '#89ff78', '#98ff69', '#a7ff5a', '#b5ff4b', '#c4ff3c', '#d3ff2d', '#e2ff1e', '#f0ff0f', '#ffff00', '#fff100', '#fee300', '#fed500', '#fec600', '#feb800', '#fdaa00', '#fd9c00', '#fd8e00', '#fd8000', '#fc7100', '#fc6300', '#fc5500', '#fb4700', '#fb3900', '#fb2a00', '#fb1c00', '#fa0e00', '#fa0000', '#ec0000', '#df0000', '#d10000', '#c40000', '#b60000', '#a90000', '#9b0000', '#8e0000', '#800000']
+
+export class Bargraph extends AnalyserNode {
+  constructor (audioContext, canvas, fftSize = 256, palette = defaultPallette, backgroundColor = 'black', maxDecibels = -25, minDecibels = -60, smoothingTimeConstant = 0.5) {
+    super(audioContext, { maxDecibels, minDecibels, smoothingTimeConstant, fftSize })
+    this.canvas = canvas
+    this.canvasContext = canvas.getContext('2d')
+    this.palette = palette
+    this.backgroundColor = backgroundColor
+
+    // set this to false to stop the loop
+    this.drawing = true
+  }
+
+  start () {
+    // setup a per-animation-frame loop to keep it updated
+    this.data = new Uint8Array(this.frequencyBinCount)
+    this.colormap = interpolate(this.palette)
+
+    const draw = () => {
+      if (this.drawing) {
+        window.requestAnimationFrame(draw)
+      }
+      this.getByteFrequencyData(this.data)
+
+      this.canvasContext.fillStyle = this.backgroundColor
+      this.canvasContext.fillRect(0, 0, this.canvas.width, this.canvas.height)
+
+      const barWidth = (this.canvas.width / this.frequencyBinCount) * 2.5
+      let barHeight
+      let x = 0
+
+      for (let i = 0; i < this.frequencyBinCount; i++) {
+        const d = parseFloat(this.data[i]) / 255.0
+        barHeight = d * this.canvas.height
+        const color = this.colormap(d)
+        this.canvasContext.fillStyle = color
+        this.canvasContext.fillRect(x, this.canvas.height - barHeight, barWidth, barHeight)
+        x += barWidth + 1
+      }
+    }
+    draw()
+  }
+
+  stop () {
+    this.drawing = false
+  }
+}