Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Making Music with the Web Audio API (Nation.js, 2015)

Steve Kinney
November 13, 2015

Making Music with the Web Audio API (Nation.js, 2015)

When you weren't looking, someone stuck a synthesizer into your favorite web browser. The Web Audio API is widely supported and makes it easy—and more importantly, fun—to create, process, and control audio in the browser. We can spin up oscillators, adjust gain, tweak frequencies, and slap on some funky delay. Additionally, we can also take existing sounds and manipulate them to our heart's content. We can grab input from cameras and microphones and use them as we see fit. But, the fun doesn't stop there—we still have the rest of the browser's media APIs at our disposal. We'll talk a little bit about the Web Audio API. We'll explore the browser as a vehicle for creative expression. We'll fire up some audio contexts and connect some nodes. We'll also leverage the getUserMedia Web API, WebSockets, and others to build unique musical instruments that could only be possible in the web browser. We'll not only talk about the API itself, but also some of the fundamental concepts for working with audio and making music.

Steve Kinney

November 13, 2015
Tweet

More Decks by Steve Kinney

Other Decks in Technology

Transcript

  1. Making Music with
    the Web Audio API
    Steve Kinney — @stevekinney — [email protected]

    View full-size slide

  2. Hello. I'm Steve.
    @stevekinney — [email protected]

    View full-size slide

  3. http://turing.io

    View full-size slide

  4. http://github.com/stevekinney/making-music

    View full-size slide

  5. synthesizer
    web browser
    Someone put a
    .
    in your

    View full-size slide

  6. The Web Audio API.

    View full-size slide

  7. It all starts with
    some context.

    View full-size slide

  8. Source: http://commons.wikimedia.org/wiki/File:Waveforms.svg

    View full-size slide

  9. A4
    440 Hz
    A5
    880 Hz

    View full-size slide

  10. A3
    220 Hz
    A4
    440 Hz
    A5
    880 Hz

    View full-size slide

  11. B4 C5 C#5 D5 D#5 E5 F5 F#5 G5 G#5
    A4
    440 Hz
    A5
    880 Hz

    View full-size slide

  12. Note Frequency (hz)
    A 440.00
    A̅ 476.67
    B 513.33
    C 550.00
    C̅ 586.67
    D 623.33
    D̅ 660.00
    E 696.67
    F 733.33
    F̅ 770.00
    G 806.67
    G̅ 843.33
    A 880.00

    B
    C

    View full-size slide

  13. Note Frequency (hz) Frequency (hz)
    A 440.00
    A̅ 476.67
    B 513.33
    C 550.00 550.00
    C̅ 586.67 595.83
    D 623.33 641.67
    D̅ 660.00 687.50
    E 696.67 733.33
    F 733.33 779.17
    F̅ 770.00 825.00
    G 806.67 870.83
    G̅ 843.33 916.67
    A 880.00 962.50
    A̅ 1008.33
    B 1054.17
    C 1100.00

    View full-size slide

  14. http://github.com/stevekinney/octavian

    View full-size slide

  15. Emits a keyDown event

    View full-size slide

  16. Emits a keyDown event

    View full-size slide

  17. keyDown event

    View full-size slide

  18. keyDown event

    View full-size slide

  19. keyDown event

    View full-size slide

  20. synthesizer
    web browser
    Someone put a
    .
    in your

    View full-size slide

  21. synthesizer
    web browser
    Someone put a
    .
    in your

    View full-size slide

  22. Emits a facetrackingEvent

    View full-size slide

  23. 1 2 3 4 5 6 7 8 9 1011 12131415
    0
    C3
    E3
    G3
    A3
    C4
    E4
    G4
    A4
    C5
    E5
    G5
    A5

    View full-size slide

  24. Music is pretty
    awesome.

    View full-size slide

  25. The web is pretty
    awesome.

    View full-size slide

  26. Music and the web are even more
    awesome when their together.

    View full-size slide

  27. http://github.com/stevekinney/
    making-music

    View full-size slide

  28. Thank you.
    Twitter, Github, and like everything else: @stevekinney
    Slides and demos: http://github.com/stevekinney/making-music
    Be a mentor or hire our students: http://turing.io

    View full-size slide