https://github.com/kiridaruma/elm-port-test を参考にさせていただきました。
途中、省略している部分ありますが
Elm側： AudioP.jsにコンパイル
port module AudioP exposing (..)
port startSound: () -> Cmd msg
type alias Model =
{ msg: String , ..... }
type Msg
= Message String | Ans Int | ...
update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
case msg of
Message str -> ({model | msg = str}, Cmd.none)
Ans num -> ({model | ..... }, startSound() )
....
view : Model -> Html Msg
view model = ......
view : Model -> Html Msg
view model = ......
Html側：
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="AudioP.js" async></script>
<script defer>
window.addEventListener('load', () => {
const app = Elm.AudioP.init({ node: document.getElementById('target') })
const audio = document.getElementById('audio')
app.ports.startSound.subscribe(() => {
audio.currentTime = 0;
audio.play()
})
</script>
<title></title>
</head>
<body>
<div id="target"></div>
<audio id="audio" src="test.mp3"></audio>
</body>
</html>
0 件のコメント:
コメントを投稿