use soundcloud

src/pages/index.astro

@@ -3,10 +3,12 @@ import Layout from "../layouts/Layout.astro"
 import "../styles/index.css"
 ---
 
-<Layout>
-    <iframe
+<Layout
+    ><iframe
         id="music"
-        src="https://www.youtube-nocookie.com/embed/0R6WIbx8ysE?enablejsapi=1"
+        width="100%"
+        height="300"
+        src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/soundcloud%253Atracks%253A2196321083"
     ></iframe>
     <button id="play">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
@@ -62,33 +64,38 @@ import "../styles/index.css"
     const skip = document.querySelector("#skip")
     const available = document.querySelector("#available") as HTMLDivElement
 
-    var phase = 1
-    var timer: ExtendableTimeout | null
+    let phase = 1
+    let timer: ExtendableTimeout | null
 
     const getTimeout = () => 2 ** phase * 1000
 
-    const message = (command: String) =>
+    const message = (command: String, extra?: object) =>
         (iframe as HTMLIFrameElement)?.contentWindow?.postMessage(
-            JSON.stringify({
-                event: "command",
-                func: command,
-            }),
+            JSON.stringify({ method: command, ...extra }),
             "*"
         )
 
     const playVideo = () => {
-        message("playVideo")
+        message("setVolume", { value: 30 })
+        message("play")
         if (timer == null) {
             timer = new ExtendableTimeout(() => {
-                message("stopVideo")
+                message("seekTo", { value: 0 })
+                message("pause")
                 timer = null
             }, getTimeout())
         } else {
-            message("stopVideo")
-            message("playVideo")
+            message("seekTo", { value: 0 })
+            message("play")
         }
     }
 
+    iframe?.addEventListener("load", () => {
+        setTimeout(() => {
+            message("play")
+        }, 300)
+    })
+
     play?.addEventListener("click", playVideo)
 
     skip?.addEventListener("click", () => {

src/styles/index.css

@@ -1,6 +1,11 @@
 #music {
-    visibility: hidden;
     position: absolute;
+    visibility: hidden;
+    bottom: 0;
+}
+
+#play {
+    position: relative;
 }
 
 #bar {