{
  "source": "JSON",
  "data": "BLOCK",
  "version": "0.0.1",
  "type": "freqbar",
  "language": "javascript",
  "extension": "webaudio",
  "help": "Freq Bar",
  "label": "Freq Bar",
  "color": "150:050:050:150",
  "group": "GUI",
  "codes": {
    "onload": "draw_freqbar$id$();",
    "declaration": "\n// block_$id$ = $label$\nvar block_$id$ = context.createAnalyser();\nblock_$id$.fftSize = 256;\nvar $port[input]$ = block_$id$;\n",
    "execution": "\nfunction draw_freqbar$id$(){\n    var canvas = document.getElementById(\"canvas$id$\");\n    var canvasCtx = canvas.getContext(\"2d\");\n    var bufferLength = 64;\n    var dataArray = new Uint8Array(bufferLength);\n    var bufferLengthAlt = block_$id$.frequencyBinCount;\n\n    canvasCtx.clearRect(0, 0, canvas.width, canvas.height);\n    canvasCtx.lineWidth = 2;\n    canvasCtx.strokeStyle = 'rgb(0, 0, 0)';\n\n      block_$id$.getByteFrequencyData(dataArray);\n\n      canvasCtx.clearRect(0, 0, canvas.width, canvas.height);\n      canvasCtx.beginPath();\n\n\n      var barWidth = (canvas.width / bufferLengthAlt) * 2.5;\n      var barHeight;\n      var x = 0;\n\n      for(var i = 0; i < bufferLengthAlt; i++) {\n        barHeight = dataArray[i];\n        canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';\n        canvasCtx.fillRect(x, canvas.height - barHeight/2, barWidth, barHeight/2);\n        x += barWidth + 1;\n      }\n      canvasCtx.stroke();\n      drawVisual = requestAnimationFrame(draw_freqbar$id$);\n}\n",
    "html": "\n<canvas id=\"canvas$id$\" class=\"visualizer\" width=\"$prop[width]$\" height=\"$prop[height]$\"></canvas>\n"
  },
  "properties": [
    {
      "name": "width",
      "label": "Width",
      "type": "Float",
      "lower": 0,
      "upper": 32000,
      "value": 640
    },
    {
      "name": "height",
      "label": "Height",
      "type": "Float",
      "lower": 0,
      "upper": 32000,
      "value": 240
    }
  ],
  "ports": [
    {
      "type": "mosaicode_lib_javascript_webaudio.extensions.ports.sound",
      "label": "Sound",
      "conn_type": "Input",
      "name": "input"
    }
  ]
}