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.
MATT DESLAURIERS
Senior Developer at Jam3 in Toronto
@mattdesl
HTML5 AUDIO
HTML5 AUDIO
WebAudio API
— Real-time analysis, mixing, effects, synthesis
— Supported in most modern browsers
— Some limitations on mo...
WHAT CAN I DO WITH IT?
http://audiograph.xyz/
AUDIOGRAPH
AS AN INSTALLATION
SHOWING AT THE DOLBY BOOTH
— WebGL (ThreeJS)
— WebAudio
— Lots of npm modules
— 200 Color Palettes from ColourLovers.com
— Dolby Digital Plus
— Open ...
DOLBY DIGITAL PLUS FORMAT
— High-definition, film-quality encoding
— Up to 7.1 surround sound
— Online Encoding Tools by D...
LET’S BUILD A MUSIC VISUALIZER
WITH THE WEBAUDIO API
HOW AUDIO WORKS
A REALLY FAST PRIMER
SOUND
A WAVE OF VIBRATION IN AIR MOLECULES
WAVEFORM
GRAPHING A SOUND WAVE IN 2D
WAVEFORM
AMPLITUDE vs TIME
FREQUENCY
HIGH vs LOW
FREQUENCY
TREBLE (HIGH) vs BASS (LOW)
HOW DO WE USE THIS?
ANALYZING TIME & FREQUENCY DATA
PLAYING AN MP3
WebAudio API
ANALYSING THE AUDIO
ANALYSER NODE
WebAudio API
SO MANY CONNECTIONS
TIME-DOMAIN ANALYSIS
WebAudio API
TIME-DOMAIN ANALYSIS
WebAudio API
AnalyserNode + Canvas2D
VISUALIZING A KICK DRUM
FREQUENCY ANALYSIS
WebAudio API
VISUALIZING A KICK DRUM
Average Frequency (Hz)
VISUALIZING A KICK DRUM
Jam3/analyser-frequency-average
VISUALIZING A KICK DRUM
WebAudio + analyser-frequency-average
A REAL DEMO
http://jam3.github.io/web-audio-player/
Source:
https://github.com/Jam3/web-audio-player
TIP: FINDING FREQUENCIES
SPECTRUM ANALYSER
FINDING THE RIGHT FREQUENCIES
https://spectrum.surge.sh/
SOME OF MY WORK
WEBGL, CANVAS2D & WEBAUDIO
http://thx.com/
THX
http://raylight.surge.sh/
RAYLIGHT
http://mattdesl.github.io/polartone/
POLARTONE
http://mattdesl.github.io/polartone/
POLARTONE
POLARTONE
SOON TO BE PUBLISHED!
AUDIO + PEN PLOTTER
VISUALIZING WAVEFORMS AS CITYSCAPES
http://mattdesl.github.io/codevember/
OTHER DEMOS...
WEBAUDIO IN THE WILD
VR, GAMES, TOYS, MUSIC VIDEOS & MORE
UNDER NEON LIGHTS
https://with.in/watch/under-neon-lights/
THE CHEMICAL BROTHERS
https://sonicumbrella.com/
SONIC UMBRELLA
A WEBVR EXPERIMENT WITH SPATIAL AUDIO
BECAUSE RECOLLECTION
http://because-recollection.com/
PINK TROMBONE
HUMAN SPEECH SYNTHESIS
https://dood.al/pinktrombone/
WHALESYNTH
WHAAAAAAALE SPEECH SYNTHESIS
http://www.whalesynth.com/
LOOP-DROP APP
http://loopjs.com/
BY MATT MCKEGG
LIBRARIES & TOOLS
OMNITONE
SPATIAL AUDIO FOR VR
https://github.com/GoogleChrome/omnitone
SONO
WEB AUDIO LIBRARY + FX
https://github.com/Stinkstudios/sono
WEB-AUDIO-PLAYER
MINIMAL WEB AUDIO LIBRARY
https://github.com/Jam3/web-audio-player
WEB AUDIO INSPECTOR
A CHROME EXTENSION
https://google.github.io/audion/
THANKS! QUESTIONS?
The Web Audio Experience
The Web Audio Experience
The Web Audio Experience
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
What to Upload to SlideShare
Next
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Share

The Web Audio Experience

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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?
  • myrhyme

    Dec. 30, 2017
  • EstebanAlmiron

    May. 16, 2017

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

Views

Total views

819

On Slideshare

0

From embeds

0

Number of embeds

2

Actions

Downloads

13

Shares

0

Comments

0

Likes

2

×