Comply with autoplay policy

pages/visualizer/index.html

@@ -22,6 +22,9 @@
       Funky Town - Lipps Inc.
     </option>
   </select>
+  <div class="start">
+    <button>Start</button>
+  </div>
   <script type="module" src="./main.ts"></script>
 </body>
 </html>

pages/visualizer/main.ts

@@ -28,7 +28,9 @@ const init = async () => {
   };
 
   const audio = document.getElementById('audio') as HTMLAudioElement;
+  audio.style.display = 'block';
   const select = document.getElementById('musicSelect') as HTMLSelectElement;
+  select.style.display = 'block';
 
   audio.src = audioTracks['backInBlack'];
 
@@ -238,4 +240,10 @@ const init = async () => {
   });
 };
 
-init();
+const startButton = document.querySelector('.start > button');
+
+startButton?.addEventListener('click', () => {
+  init();
+  startButton.parentElement?.remove();
+  audio.star;
+});

pages/visualizer/style.scss

@@ -1,4 +1,5 @@
 canvas {
+  background: black;
   position: absolute;
   top: 0;
   left: 0;
@@ -21,14 +22,32 @@ input {
 
 audio {
   position: absolute;
+  display: none;
   width: 300px;
   left: 16px;
   top: 16px;
 }
 
 select {
   position: absolute;
+  display: none;
   left: 16px;
   top: 80px;
   width: 300px;
 }
+
+.start {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  background: black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & > button {
+    width: 200px;
+    height: 100px;
+    font-size: 2rem;
+  }
+}