try using soundcloud button

src/pages/index.astro

@@ -3,21 +3,22 @@ import Layout from "../layouts/Layout.astro"
 import "../styles/index.css"
 ---
 
-<Layout
+<Layout>
-    ><iframe
+    <div id="play">
-        id="music"
+        <iframe
-        width="100%"
+            title="SoundCloud Play Button"
-        height="300"
+            src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/soundcloud%253Atracks%253A2196321083"
-        allow="encrypted-media *;"
+        ></iframe>
-        src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/soundcloud%253Atracks%253A2196321083"
+
-    ></iframe>
+        <span class="fake-button">
-    <button id="play">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+                <path
-            <path
+                    d="M320-273v-414q0-17 12-28.5t28-11.5q5 0 10.5 1.5T381-721l326 207q9 6 13.5 15t4.5 19q0 10-4.5 19T707-446L381-239q-5 3-10.5 4.5T360-233q-16 0-28-11.5T320-273Z"
-                d="M320-273v-414q0-17 12-28.5t28-11.5q5 0 10.5 1.5T381-721l326 207q9 6 13.5 15t4.5 19q0 10-4.5 19T707-446L381-239q-5 3-10.5 4.5T360-233q-16 0-28-11.5T320-273Z"
+                ></path>
-            ></path>
+            </svg>
-        </svg>
+        </span>
-    </button>
+    </div>
+
     <section id="bar">
         <div id="bars">
             <div></div><div></div><div></div>
@@ -60,23 +61,23 @@ import "../styles/index.css"
         }
     }
 
-    const iframe = document.querySelector("#music")
+    const iframe = document.querySelector("iframe")
-    const play = document.querySelector("#play")
     const skip = document.querySelector("#skip")
     const available = document.querySelector("#available") as HTMLDivElement
 
     let phase = 1
-    let timer: ExtendableTimeout | null
+    let timer: ExtendableTimeout | null = null
 
     const getTimeout = () => 2 ** phase * 1000
 
     const message = (command: String, extra?: object) =>
         (iframe as HTMLIFrameElement)?.contentWindow?.postMessage(
             JSON.stringify({ method: command, ...extra }),
-            "*"
+            "https://w.soundcloud.com"
         )
 
     const playVideo = () => {
+        message("seekTo", { value: 0 })
         message("setVolume", { value: 30 })
         message("play")
         if (timer == null) {
@@ -86,18 +87,21 @@ import "../styles/index.css"
                 timer = null
             }, getTimeout())
         } else {
-            message("seekTo", { value: 0 })
+            // message("seekTo", { value: 0 })
             message("play")
         }
     }
 
-    iframe?.addEventListener("load", () => {
+    window.addEventListener("message", (event) => {
-        setTimeout(() => {
+        let data = JSON.parse(event.data)
-            message("play")
-        }, 300)
-    })
 
-    play?.addEventListener("click", playVideo)
+        if (data.method === "ready") {
+            message("setVolume", { value: 0 })
+            message("play")
+            message("pause")
+            message("setVolume", { value: 30 })
+        }
+    })
 
     skip?.addEventListener("click", () => {
         if (phase >= 4) return alert("FAIL!!!!")
@@ -109,7 +113,7 @@ import "../styles/index.css"
         if (timer == null) {
             playVideo()
         } else {
-            timer.extend(getTimeout())
+            timer?.extend(getTimeout())
         }
     })
 </script>

src/styles/index.css

@@ -1,11 +1,28 @@
-#music {
+iframe {
-    position: absolute;
+    width: 20px;
-    visibility: hidden;
+    height: 20px;
-    bottom: 0;
+    scale: 3;
+    border: none;
+    opacity: 0;
 }
 
 #play {
-    position: relative;
+    display: grid;
+    cursor: pointer;
+
+    &:hover {
+        filter: brightness(80%);
+    }
+
+    & > .fake-button {
+        pointer-events: none;
+    }
+
+    & > * {
+        grid-area: 1 /1;
+        justify-self: center;
+        align-self: center;
+    }
 }
 
 #bar {

src/styles/layout.css

@@ -38,15 +38,16 @@ main {
     align-items: center;
 }
 
-button {
+button,
+.fake-button {
     --border-radius: 2rem;
     position: relative;
     background: white;
     border: none;
     border-radius: var(--border-radius);
 
-    padding: 0.2rem 1rem;
+    padding: 0.2rem;
-    margin: 1rem;
+    margin: 0 1rem;
 
     display: flex;
     justify-content: center;
@@ -62,7 +63,7 @@ button {
     }
 }
 
-button::before {
+:is(button, .fake-button)::before {
     --border-size: 5px;
     content: "";
     border-radius: var(--border-radius);