From 888df8bf623d1c7e739da89dea22404feeb02d1a Mon Sep 17 00:00:00 2001 From: Stephen Paul Weber Date: Tue, 13 Oct 2020 19:27:44 -0500 Subject: [PATCH] Autoplay background music --- Main.purs | 5 ++++- index.scss | 8 ++++++++ index.slim | 6 ++++++ 3 files changed, 18 insertions(+), 1 deletion(-) diff --git a/Main.purs b/Main.purs index 1728b1e..687e3bb 100644 --- a/Main.purs +++ b/Main.purs @@ -122,6 +122,7 @@ main = unsafePartial $ do addEventListener' load (Window.toEventTarget win) $ \_ -> do Just body <- querySelector (QuerySelector "body") doc Just wallpaper <- querySelector (QuerySelector "#wallpaper") doc + Just bgmusic <- (HTMLMediaElement.fromElement =<< _) <$> querySelector (QuerySelector "#bgmusic") doc Just img <- (HTMLElement.fromElement =<< _) <$> querySelector (QuerySelector "#wallpaper > img") doc @@ -133,7 +134,9 @@ main = unsafePartial $ do clipCircle img "0" 0 0 triggerSpot doc Nothing - addEventListener' click (Element.toEventTarget body) $ \_ -> + addEventListener' click (Element.toEventTarget body) $ \_ -> do + paused <- HTMLMediaElement.paused bgmusic + when paused $ HTMLMediaElement.play bgmusic addEventListener' mousemove (Element.toEventTarget wallpaper) $ \e -> do height <- Element.clientHeight wallpaper width <- Element.clientWidth wallpaper diff --git a/index.scss b/index.scss index 37f1329..09c3bdb 100644 --- a/index.scss +++ b/index.scss @@ -60,6 +60,14 @@ body > a[href="#wallpaper"] { } } +#bgmusic { + display: none; + position: fixed; + bottom: 0; + left: 0; + width: 100%; +} + body > hgroup { position: relative; font-family: druk, sans-serif; diff --git a/index.slim b/index.slim index d9edfc2..0ea3443 100644 --- a/index.slim +++ b/index.slim @@ -24,9 +24,15 @@ html script type="text/javascript" src="index.js" body a href="#wallpaper" skip to wallpaper + audio#bgmusic controls="controls" autoplay="autoplay" loop="loop" + source src="assets/audio/bg.opus" type="audio/ogg; codecs=opus" + source src="assets/audio/bg.mp3" type="audio/mpeg" + a href="assets/audio/bg.opus" background music + hgroup h1 Post-Part h2 The Yellow Wallpaper + p= paras[0] p: span= paras[1] p= paras[2] -- 2.38.5