Elm-web-audio: Using the Web Audio API in Elm

As many of you will know, Elm’s support for many browser APIs is limited. Ports are the go-to method of interacting with browser APIs not supported by the core library and the Web Audio API is no exception. Current solutions for Elm–Web Audio interop are largely bespoke to each application which makes it difficult to translate ideas from one codebase to another.

To that end, I’ve been working on elm-web-audio as a means of providing a standard Elm API for creating so-called virtual audio graphs. The hope being that we can spend less time re-inventing the wheel, and more time actually creating audio applications in Elm.

The API is based heavily on the current Html library, so hopefully even those that haven’t played with the Web Audio API before can get started easily with this. The WebAudio and WebAudio.Property modules are analogous to Html and Html.Attributes respectively. A simple synthesiser might look something like:

import WebAudio exposing (oscillator, gain, dac)

oscillator []
  [ gain []
    [ dac ]
  ]

The parallels to Html should be clear. We’ve created a simple chain of audio nodes: oscillator –> gain –> dac. Connecting to multiple nodes is just a matter of adding more nodes to the list:

import WebAudio exposing (oscillator, gain, dac)

oscillator []
  [ gain []
    [ dac ]
  , delay []
    [ gain []
      [ dac ]
    ]
  ]

If that sounds interesting to you, then I encourage you to check out the library: the package is published here. I’m in the process of expanding the documentation as it is fairly lacking, so feedback on anything that is unclear would be greatly appreciated. I also have a template repository that you can clone to get up and running straight away here.

There are more advanced features, like accurate scheduling for sequencing notes and loops, but this post is getting long enough as it is and I’d like people to actually use the thing not just read about it!

15 Likes

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.