The Web Audio Experience
3 likes929 views
Matt Deslauriers, a senior developer at Jam3 in Toronto, discusses the capabilities of the HTML5 Audio and Web Audio APIs, including real-time audio analysis and synthesis. He showcases his installation 'Audiograph' and various tools for audio visualization and processing, alongside links to additional projects and libraries. The document serves as an introduction to using audio web technologies for applications like music visualization and sound analysis.
The Web Audio Experience
- 2. MATT DESLAURIERS Senior Developer at Jam3 in Toronto @mattdesl
- 3. HTML5 AUDIO
- 4. HTML5 AUDIO
- 5. WebAudio API — Real-time analysis, mixing, effects, synthesis — Supported in most modern browsers — Some limitations on mobile
- 6. WHAT CAN I DO WITH IT?
- 8. AS AN INSTALLATION SHOWING AT THE DOLBY BOOTH
- 9. — WebGL (ThreeJS) — WebAudio — Lots of npm modules — 200 Color Palettes from ColourLovers.com — Dolby Digital Plus — Open source! https://github.com/mattdesl/audiograph.xyz Source Code: AUDIOGRAPH UNDER THE HOOD
- 10. DOLBY DIGITAL PLUS FORMAT — High-definition, film-quality encoding — Up to 7.1 surround sound — Online Encoding Tools by Dolby Developer — Support on latest iOS, macOS and MS Edge — It “just works” http://developer.dolby.com/ Encoding Tools:
- 11. LET’S BUILD A MUSIC VISUALIZER WITH THE WEBAUDIO API
- 12. HOW AUDIO WORKS A REALLY FAST PRIMER
- 13. SOUND A WAVE OF VIBRATION IN AIR MOLECULES
- 14. WAVEFORM GRAPHING A SOUND WAVE IN 2D
- 17. FREQUENCY TREBLE (HIGH) vs BASS (LOW)
- 18. HOW DO WE USE THIS? ANALYZING TIME & FREQUENCY DATA
- 19. PLAYING AN MP3 WebAudio API
- 24. TIME-DOMAIN ANALYSIS WebAudio API AnalyserNode + Canvas2D
- 25. VISUALIZING A KICK DRUM
- 28. VISUALIZING A KICK DRUM Average Frequency (Hz)
- 29. VISUALIZING A KICK DRUM Jam3/analyser-frequency-average
- 30. VISUALIZING A KICK DRUM WebAudio + analyser-frequency-average
- 33. SPECTRUM ANALYSER FINDING THE RIGHT FREQUENCIES https://spectrum.surge.sh/
- 34. SOME OF MY WORK WEBGL, CANVAS2D & WEBAUDIO
- 40. POLARTONE SOON TO BE PUBLISHED!
- 41. AUDIO + PEN PLOTTER VISUALIZING WAVEFORMS AS CITYSCAPES
- 43. WEBAUDIO IN THE WILD VR, GAMES, TOYS, MUSIC VIDEOS & MORE
- 44. UNDER NEON LIGHTS https://with.in/watch/under-neon-lights/ THE CHEMICAL BROTHERS
- 45. https://sonicumbrella.com/ SONIC UMBRELLA A WEBVR EXPERIMENT WITH SPATIAL AUDIO
- 47. PINK TROMBONE HUMAN SPEECH SYNTHESIS https://dood.al/pinktrombone/
- 51. OMNITONE SPATIAL AUDIO FOR VR https://github.com/GoogleChrome/omnitone
- 52. SONO WEB AUDIO LIBRARY + FX https://github.com/Stinkstudios/sono
- 53. WEB-AUDIO-PLAYER MINIMAL WEB AUDIO LIBRARY https://github.com/Jam3/web-audio-player
- 54. WEB AUDIO INSPECTOR A CHROME EXTENSION https://google.github.io/audion/