Click to resume audio playback.

lib/playback/context.ts → lib/playback/audio.ts

@@ -7,7 +7,7 @@ import * as Message from "./worker/message"
 import workletURL from "./worklet?url"
 
 // NOTE: This must be on the main thread
-export class Context {
+export class Audio {
 	context: AudioContext
 	worklet: Promise<AudioWorkletNode>
 
@@ -47,12 +47,4 @@ export class Context {
 	private on(_event: MessageEvent) {
 		// TODO
 	}
-
-	async resume() {
-		await this.context.resume()
-	}
-
-	async close() {
-		await this.context.close()
-	}
 }

lib/playback/backend.ts

@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />
 
 import * as Message from "./worker/message"
-import { Context } from "./context"
+import { Audio } from "./audio"
 
 import MediaWorker from "./worker?worker"
 import { RingShared } from "../common/ring"
@@ -22,7 +22,7 @@ export default class Backend {
 	#worker: Worker
 
 	// The audio context, which must be created on the main thread.
-	#context?: Context
+	#audio?: Audio
 
 	constructor(config: PlayerConfig) {
 		// TODO does this block the main thread? If so, make this async
@@ -54,7 +54,7 @@ export default class Backend {
 				ring: new RingShared(2, sampleRate / 20), // 50ms
 			}
 
-			this.#context = new Context(msg.audio)
+			this.#audio = new Audio(msg.audio)
 		}
 
 		// TODO only send the canvas if we have a video track
@@ -65,8 +65,9 @@ export default class Backend {
 		this.send({ config: msg }, msg.video.canvas)
 	}
 
-	// TODO initialize context now since the user clicked
-	play() {}
+	async play() {
+		await this.#audio?.context.resume()
+	}
 
 	init(init: Init) {
 		this.send({ init })
@@ -78,7 +79,7 @@ export default class Backend {
 
 	async close() {
 		this.#worker.terminate()
-		await this.#context?.close()
+		await this.#audio?.context.close()
 	}
 
 	// Enforce we're sending valid types to the worker

lib/playback/tsconfig.json

@@ -1,7 +1,7 @@
 {
 	"extends": "../tsconfig.json",
 	"include": ["."],
-	"exclude": ["worklet"],
+	"exclude": ["./worklet"],
 	"compilerOptions": {
 		"types": ["dom-mediacapture-transform", "dom-webcodecs"]
 	},

web/src/components/watch.tsx

@@ -35,12 +35,14 @@ export default function Watch(props: { name: string }) {
 		player.closed().then(setError).catch(setError)
 	})
 
+	const play = () => usePlayer()?.play()
+
 	// NOTE: The canvas automatically has width/height set to the decoded video size.
 	// TODO shrink it if needed via CSS
 	return (
 		<>
 			<Fail error={error()} />
-			<canvas ref={canvas} class="aspect-video w-full rounded-lg" />
+			<canvas ref={canvas} onClick={play} class="aspect-video w-full rounded-lg" />
 		</>
 	)
 }