solutions/open-source/preview.html

preview.html: full HTML source from the open-source folder of Spatial9 Agent Skills. Free, MIT licensed code for immersive audio with the Spatial9 MCP server...

Raw file · View on GitHub · Download every file as a zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Spatial9 live render status</title>
  <style>
    body { font: 16px/1.5 system-ui, sans-serif; background: #0b0f17; color: #e5e7eb; max-width: 40rem; margin: 3rem auto; padding: 0 1rem; }
    input, button { font: inherit; padding: .5rem .75rem; border-radius: .5rem; border: 1px solid #374151; background: #111827; color: inherit; }
    button { background: #22d3ee; color: #0b0f17; border: 0; font-weight: 600; cursor: pointer; }
    #state { margin-top: 1.5rem; font-weight: 600; }
    li { margin: .5rem 0; }
  </style>
</head>
<body>
  <h1>Live render status</h1>
  <p>Enter a track id (the file name in lower case, for example <code>my-song</code>). This page updates the moment Spatial9 reports a change.</p>
  <form id="f"><input id="track" required pattern="[a-z0-9-]{1,80}" aria-label="Track id" /> <button>Follow</button></form>
  <p id="state" role="status" aria-live="polite"></p>
  <ul id="files"></ul>

  <script>
    // Server-Sent Events: one long-lived HTTP connection, the browser reconnects automatically.
    let source;
    const state = document.getElementById('state');
    const list = document.getElementById('files');

    document.getElementById('f').addEventListener('submit', (e) => {
      e.preventDefault();
      source?.close();
      list.replaceChildren();
      source = new EventSource(`/events/${encodeURIComponent(document.getElementById('track').value)}`);
      source.addEventListener('missing', () => { state.textContent = 'No track with that id yet.'; source.close(); });
      source.onmessage = (msg) => {
        const update = JSON.parse(msg.data);
        state.textContent = update.error ? `${update.state}: ${update.error}` : `Status: ${update.state}`;
        for (const file of update.files || []) {
          const li = document.createElement('li');
          li.append(file.name + ' ');                          // textContent only, never innerHTML
          if (/binaural/i.test(file.name)) {
            const audio = new Audio(file.url);                 // already binaural: plays in 3D on any headphones
            audio.controls = true;
            li.append(audio);
          } else {
            const a = document.createElement('a');
            a.href = file.url; a.textContent = 'download'; a.rel = 'noopener';
            li.append(a);
          }
          list.append(li);
        }
        if (update.final) source.close();
      };
    });
  </script>
</body>
</html>