This web page shows a scrolling spectrogram of microphone input. You'll have to give it microphone permission and maybe reload the page to get it to work. The observablehq editor supports live...
This web page shows a scrolling spectrogram of microphone input. You'll have to give it microphone permission and maybe reload the page to get it to work.
The observablehq editor supports live editing. There's a somewhat subtle minimap in the right margin showing all the variables. You can click on any variable to display the cell with its definition. While a cell is selected, the minimap shows lines connecting it to the cells that it depends on and the cells that depend on it. (Data flows from left to right in the diagram. Up and down is based on the cell's position on the page, but cells can be in any order.)
But this demo uses d3, so I haven't quite figured out how drawing works.
This web page shows a scrolling spectrogram of microphone input. You'll have to give it microphone permission and maybe reload the page to get it to work.
The observablehq editor supports live editing. There's a somewhat subtle minimap in the right margin showing all the variables. You can click on any variable to display the cell with its definition. While a cell is selected, the minimap shows lines connecting it to the cells that it depends on and the cells that depend on it. (Data flows from left to right in the diagram. Up and down is based on the cell's position on the page, but cells can be in any order.)
But this demo uses d3, so I haven't quite figured out how drawing works.
After figuring out how it works, I realized that much of the code is unnecessary, so I rewrote it.