Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Web Audio Experience

308 views

Published on

Presented at FITC Toronto 2017
More info at http://fitc.ca/event/to17/

Matt DesLauriers, Jam3
Overview

Explore the technology and process behind rich, web-based audio experiences. Learn about WebAudio tricks, prototyping tools, audio visualization techniques, and some novel applications of audio on the web. Learn how web audio can be used in games, WebVR, music visualizers, and other real-time and interactive media.

Objective

Take a deep dive into high quality audio on the web.

Target Audience

Creative coders, front-end developers, game designers, VR enthusiasts, interactive storytellers and digital media artists.

Five Things The Audience Will Learn:

The basics of how sound works, and how we can visualize it
How to play high quality audio with the WebAudio API
How to use real-time effects like reverb and 3D spatialization for VR
Some useful open-source tools and libraries for building audio applications
Examples of interesting audio applications built on the web

Published in: Internet
  • Be the first to comment

The Web Audio Experience

  1. 1. MATT DESLAURIERS Senior Developer at Jam3 in Toronto @mattdesl
  2. 2. HTML5 AUDIO
  3. 3. HTML5 AUDIO
  4. 4. WebAudio API — Real-time analysis, mixing, effects, synthesis — Supported in most modern browsers — Some limitations on mobile
  5. 5. WHAT CAN I DO WITH IT?
  6. 6. http://audiograph.xyz/ AUDIOGRAPH
  7. 7. AS AN INSTALLATION SHOWING AT THE DOLBY BOOTH
  8. 8. — 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
  9. 9. 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:
  10. 10. LET’S BUILD A MUSIC VISUALIZER WITH THE WEBAUDIO API
  11. 11. HOW AUDIO WORKS A REALLY FAST PRIMER
  12. 12. SOUND A WAVE OF VIBRATION IN AIR MOLECULES
  13. 13. WAVEFORM GRAPHING A SOUND WAVE IN 2D
  14. 14. WAVEFORM AMPLITUDE vs TIME
  15. 15. FREQUENCY HIGH vs LOW
  16. 16. FREQUENCY TREBLE (HIGH) vs BASS (LOW)
  17. 17. HOW DO WE USE THIS? ANALYZING TIME & FREQUENCY DATA
  18. 18. PLAYING AN MP3 WebAudio API
  19. 19. ANALYSING THE AUDIO
  20. 20. ANALYSER NODE WebAudio API
  21. 21. SO MANY CONNECTIONS
  22. 22. TIME-DOMAIN ANALYSIS WebAudio API
  23. 23. TIME-DOMAIN ANALYSIS WebAudio API AnalyserNode + Canvas2D
  24. 24. VISUALIZING A KICK DRUM
  25. 25. FREQUENCY ANALYSIS WebAudio API
  26. 26. VISUALIZING A KICK DRUM Average Frequency (Hz)
  27. 27. VISUALIZING A KICK DRUM Jam3/analyser-frequency-average
  28. 28. VISUALIZING A KICK DRUM WebAudio + analyser-frequency-average
  29. 29. A REAL DEMO http://jam3.github.io/web-audio-player/ Source: https://github.com/Jam3/web-audio-player
  30. 30. TIP: FINDING FREQUENCIES
  31. 31. SPECTRUM ANALYSER FINDING THE RIGHT FREQUENCIES https://spectrum.surge.sh/
  32. 32. SOME OF MY WORK WEBGL, CANVAS2D & WEBAUDIO
  33. 33. http://thx.com/ THX
  34. 34. http://raylight.surge.sh/ RAYLIGHT
  35. 35. http://mattdesl.github.io/polartone/ POLARTONE
  36. 36. http://mattdesl.github.io/polartone/ POLARTONE
  37. 37. POLARTONE SOON TO BE PUBLISHED!
  38. 38. AUDIO + PEN PLOTTER VISUALIZING WAVEFORMS AS CITYSCAPES
  39. 39. http://mattdesl.github.io/codevember/ OTHER DEMOS...
  40. 40. WEBAUDIO IN THE WILD VR, GAMES, TOYS, MUSIC VIDEOS & MORE
  41. 41. UNDER NEON LIGHTS https://with.in/watch/under-neon-lights/ THE CHEMICAL BROTHERS
  42. 42. https://sonicumbrella.com/ SONIC UMBRELLA A WEBVR EXPERIMENT WITH SPATIAL AUDIO
  43. 43. BECAUSE RECOLLECTION http://because-recollection.com/
  44. 44. PINK TROMBONE HUMAN SPEECH SYNTHESIS https://dood.al/pinktrombone/
  45. 45. WHALESYNTH WHAAAAAAALE SPEECH SYNTHESIS http://www.whalesynth.com/
  46. 46. LOOP-DROP APP http://loopjs.com/ BY MATT MCKEGG
  47. 47. LIBRARIES & TOOLS
  48. 48. OMNITONE SPATIAL AUDIO FOR VR https://github.com/GoogleChrome/omnitone
  49. 49. SONO WEB AUDIO LIBRARY + FX https://github.com/Stinkstudios/sono
  50. 50. WEB-AUDIO-PLAYER MINIMAL WEB AUDIO LIBRARY https://github.com/Jam3/web-audio-player
  51. 51. WEB AUDIO INSPECTOR A CHROME EXTENSION https://google.github.io/audion/
  52. 52. THANKS! QUESTIONS?

×