~singpolyma/post-part

888df8bf623d1c7e739da89dea22404feeb02d1a — Stephen Paul Weber 2 years ago 2200c47
Autoplay background music
3 files changed, 18 insertions(+), 1 deletions(-)

M Main.purs
M index.scss
M index.slim
M Main.purs => Main.purs +4 -1
@@ 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

M index.scss => index.scss +8 -0
@@ 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;

M index.slim => index.slim +6 -0
@@ 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]