Add music player

1 year ago · 3dd764fdc5
4 changed files with 27 additions and 4 deletions
--- a/boomer.mp3
+++ b/boomer.mp3
--- a/index.css
+++ b/index.css
@ -9,7 +9,7 @@ body {
				@@ -9,7 +9,7 @@ body {
  display: flex;
  flex-direction: column;
  position: relative;
-  top: 370px;
+  top: 428px;
  margin: 0 auto;
 }
 .wishes form {
@ -227,6 +227,13 @@ body {
				@@ -227,6 +227,13 @@ body {
  top: 0;
 }

+.audio {
+  position: absolute;
+  left: 50%;
+  margin-left: -137px;
+  top: 450px;
+}
+
 .balloon {
  height: 125px;
  width: 105px;
--- a/index.php
+++ b/index.php
@ -8,12 +8,17 @@
				@@ -8,12 +8,17 @@
 		<link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
+<script>
+  window.onload = function() {
+    var context = new AudioContext();
+  }
+  </script>
 	</head>
 <body>
 	<h1 class="title">Happy Birthday Prime!</h1>
 	<div id="balloon-container">
 	</div>
-	<div class="cake">
+  <div class="cake">
 		<div class="plate"></div>
 		<div class="layer layer-bottom"></div>
 		<div class="layer layer-middle"></div>
@ -26,7 +31,11 @@
				@@ -26,7 +31,11 @@
 				<div class="flame"></div>
 		</div>
 	</div>
-	
+	<div class="audio">
+    <audio controls>
+      <source src="boomer.mp3">
+    </audio>
+</div>

 <div class="wishes">
 	<script crossorigin src="https://unpkg.com/@memorista/client-ui@2/dist/index.bundle.js"></script>
--- a/index.scss
+++ b/index.scss
@ -8,7 +8,7 @@ body {
				@@ -8,7 +8,7 @@ body {
    display: flex;
    flex-direction: column;
    position: relative;
-    top: 370px;
+    top: 428px;
    margin: 0 auto;

    form {
@ -273,6 +273,13 @@ body {
				@@ -273,6 +273,13 @@ body {
    position: fixed;
    top:0;
  }
+
+  .audio {
+    position: absolute;
+    left: 50%;
+    margin-left: -137px;
+    top: 450px;
+  }
  
  .balloon {
    height: 125px;