I'm just getting started with WebAudio in Elm, using hayleigh-dot-dev/elm-web-audio/1.1.1. I got the setup right, have sound, and things seems to work as intended. However, when I started using WebAudio.param to try out simple FM and AM, it doesn't connect, even when I copy the example code from the documentation.
Here is some minimal code, trying to get the FM from the example pages running:
port module Main exposing (main)
import Browser
import Html exposing (Html, div, text)
import Html.Attributes as HA
import Html.Events exposing (onClick)
import Json.Encode
import WebAudio
import WebAudio.Property
port toWebAudio : Json.Encode.Value -> Cmd msg
main : Program () Model Msg
main =
Browser.element
{ init = init
, update = update
, view = view
, subscriptions = \_ -> Sub.none
}
init : () -> ( Model, Cmd msg )
init _ =
( (), Cmd.none )
type alias Model =
()
type Msg
= StartAudio
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
StartAudio ->
( model
, audio
|> Json.Encode.list WebAudio.encode
|> toWebAudio
)
view : Model -> Html Msg
view _ =
div
[ HA.style "width" "400px"
, HA.style "height" "400px"
, HA.style "background-color" "#fae"
, onClick StartAudio
]
[ text <| "Click me to start audio" ]
audio : List WebAudio.Node
audio =
[ WebAudio.oscillator
[ WebAudio.Property.frequency 5 ]
-- Connect to the "frequency" parameter of the "carrier" node
[ WebAudio.param "carrier" "frequency" ]
, WebAudio.keyed "carrier" <|
WebAudio.oscillator []
[ WebAudio.dac ]
]
And this is how it is connected in index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Elm web audio</title>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div id="myapp"></div>
</body>
<script type="module">
import VirtualAudioContext from './elm-web-audio.js'
const ctx = new AudioContext()
const virtualCtx = new VirtualAudioContext(ctx)
const app = Elm.Main.init({
node: document.getElementById('myapp'),
flags: 43
})
app.ports.toWebAudio.subscribe((nodes) => {
virtualCtx.update(nodes)
})
</script>
</html>
I was expecting to hear some FM, but I only get a pure tone.
By the way, when getting started it was not clear to me which Elm-package to use, as there in addition to hayleigh-dot-dev/elm-web-audio/1.1.1 also appears the pd-andy/elm-web-audio/2.3.0. After some digging, it seems like they may be written by the same person, and that the latter package is deprecated; at least I got a 404 when trying to install it using "elm install pd-andy/elm-web-audio".