Processing Images using the Web Audio API

on YouTube ↗04m

" summary

Loads canvas pixel data with getImageData array then feeds those numeric arrays into the Web Audio graph using Web Audio API filters as processing nodes. Low-pass filtering of color-arrays produces a visible low-pass blur across the image, high-pass yields high-pass edge extraction that isolates boundaries. Demonstrations include audible mappings (150 Hz tones, simple drum-like synthesis) and visual results that visibly blur or reveal edges, working reliably for experiments though not production-ready.

AI-written summary · about

" chapters (5)

1. 0:00Intro
2. 0:15Get Image Data
3. 0:50Web Audio
4. 1:40Filters
5. 2:22Recap

" related talks

• 33mCoding ArtMathieu Henri · Render Conference 2017
• 43mUsing a modern web to recreate 1980S horribly slow and loud loading screensRemy Sharp · FrontEnd Con 2018
• 48mMaking Realtime Audio-VisualsMathieu Henri · JSConf.Asia 2015
• 09mSynthesizing Video and Turning it into Music!Jes Wolfe · !!Con 2017
• 26mHow To Be a Web AV ArtistRuth John · CascadiaJS 2018
• 30mUsing a modern web to recreate 1980s horribly slow & loud loading screensRemy Sharp · JSConf EU 2018
• 45mArt.jsMathieu Henri · ffconf 2016
• 25mHow To Be A Web A/V ArtistRuth John · JSConf EU 2017