bsky/geiger.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>🔥 Listen to the Firehose 🔥</title>
    <style>
      body {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
          "Open Sans", "Helvetica Neue", sans-serif;
        text-align: center;
        padding: 20px;
        color: #333;
      }
    </style>
  </head>
  <body>
    <h1>🔥 Listen to the Firehose 🔥</h1>
    <p>Click "Start" to begin.</p>
    <button id="start-button">Start</button>

    <script type="module">
      import debounce from "https://esm.run/debounce";
      import fnv1a from "https://esm.run/@sindresorhus/fnv1a";

      const FREQUENCIES = [261.63, 293.66, 329.63, 349.23, 392.0, 440.0, 493.88, 523.25, 587.33, 659.25];
      const keywords = new Set(window.location.hash.slice(1).split(","));
      const startButton = document.getElementById("start-button");

      let ctx;

      console.log("🔑", keywords);

      function playSound(word) {
        const hash = fnv1a(word);
        const frequency = FREQUENCIES[hash % BigInt(FREQUENCIES.length)];

        console.log("🔊", word);

        const oscillator = ctx.createOscillator();
        const gainNode = ctx.createGain();

        oscillator.frequency.value = frequency;
        oscillator.connect(gainNode);
        gainNode.connect(ctx.destination);
        oscillator.start();

        gainNode.gain.setValueAtTime(1, ctx.currentTime);
        gainNode.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.1);
        oscillator.stop(ctx.currentTime + 0.1);
      }

      playSound = debounce(playSound, 100);

      startButton.addEventListener("click", async (ev) => {
        ev.preventDefault();
        ev.target.disabled = true;

        if (!ctx) {
          ctx = new AudioContext();
        }

        const ws = new WebSocket(
          "wss://jetstream1.us-east.bsky.network/subscribe?wantedCollections=app.bsky.feed.post"
        );

        ws.onerror = (...args) => console.error("WebSocket error", ...args);
        ws.onmessage = (event) => {
          const data = JSON.parse(event.data);
          const text = data.commit?.record?.text ?? "";
          const isEnglish = data.commit?.record?.langs?.includes("en");

          if (text === "" || !isEnglish) {
            return;
          }

          const words = text.split(/\s+/);

          for (const word of words) {
            if (keywords.has(word.toLowerCase())) {
              console.log("🔥", word);

              playSound(word);
            }
          }
        };
      });
    </script>
  </body>
</html>