如何让WebAudio.param在Elm中生效？FM调制功能异常排查

问题背景 #

刚接触Elm的WebAudio，使用hayleigh-dot-dev/elm-web-audio/1.1.1版本，基础配置正常可发声，但尝试用WebAudio.param实现FM/AM调制时，即便照搬文档示例代码也无法建立参数连接，仅能听到纯音。

复现FM调制问题的最小代码 #

Elm代码（Main.elm） #

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 ]
    ]

HTML配置（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>

附加疑问：Elm WebAudio包选择 #

入门时不确定选哪个包，除了hayleigh-dot-dev/elm-web-audio/1.1.1外，还看到pd-andy/elm-web-audio/2.3.0，但执行elm install pd-andy/elm-web-audio返回404，疑似该包已废弃。

解答 #

1. FM调制无法生效的原因及修复 #

当前代码的核心问题是调制振荡器的增益过低：5Hz的低频信号振幅太小，对载波频率的偏移影响微乎其微，导致听起来和纯音无区别。同时载波未设置基础频率，默认值可能不在人耳可感知范围。

修改audio函数，调整参数如下：

audio : List WebAudio.Node
audio =
    [ WebAudio.oscillator
        [ WebAudio.Property.frequency 5
        , WebAudio.Property.gain 100  -- 提升调制信号振幅，加大频率偏移量
        ]
        [ WebAudio.param "carrier" "frequency" ]
    , WebAudio.keyed "carrier" <|
        WebAudio.oscillator
            [ WebAudio.Property.frequency 440 ]  -- 设置载波基础频率为标准A音（440Hz）
            [ WebAudio.dac ]
    ]

同时确认elm-web-audio.js文件版本与Elm包1.1.1完全匹配，避免版本不一致导致参数连接逻辑失效。

2. Elm WebAudio包选择 #

• pd-andy/elm-web-audio已废弃，仓库已被移除，因此elm install会返回404，绝对不要使用。
• hayleigh-dot-dev/elm-web-audio是当前唯一维护中的分支，功能完整且支持参数调制等高级特性，你的版本选择完全正确。

内容的提问来源于stack exchange，提问作者bcegkmqsw