3 files changed, 18 insertions(+), 1 deletions(-)

M Main.purs
M index.scss
M index.slim

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

@@ 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;

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