GUIDE / BUILD YOUR OWN CLIENT

Build guides — ship anywhere

Phaser is platform-agnostic. Payment + streaming live in the SDKs, so you can wrap them in any shell — browser, phone, desktop, or agent.

🌐

Web app

React/Vue/Svelte — works anywhere npm does.

📱

Progressive web app

Install to home screen. Background audio native.

🍎

iOS

Swift + WKWebView bridge. Lock-screen controls.

🖥

macOS

SwiftUI + menu-bar mini player.

Web app

The fastest path. One npm install, drop a web component, done.

App.tsx
import "@jackmorgan/phaser-player";

export function Player({ trackId }) {
  return <phaser-player track-id={trackId} theme="dark" />;
}

Progressive web app

Phaser integrates with the Media Session API — lock-screen art and transport controls just work.

manifest.webmanifest
{
  "name": "My Phaser App",
  "display": "standalone",
  "theme_color": "#6bcff5"
}

iOS app

Wrap a WKWebView with AVAudioSession for background playback.

PhaserPlayerView.swift
struct PhaserPlayerView: UIViewRepresentable {
  let trackId: String
  func makeUIView(context: Context) -> WKWebView {
    try? AVAudioSession.sharedInstance().setCategory(.playback)
    let wv = WKWebView()
    wv.loadHTMLString("<phaser-player track-id=\"" + trackId + "\"></phaser-player>", baseURL: nil)
    return wv
  }
}

macOS app

Same WKWebView trick, plus a MenuBarExtra for a mini-player.

← Back to intro