44 lines
2.1 KiB
JSON
44 lines
2.1 KiB
JSON
{
|
|
"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"
|
|
}
|
|
]
|
|
} |