Browser Integration Paths

This page shows a small browser-side integration sample for this repository. It is intentionally simpler than vgm.html.

The goal here is to show two separate browser-side paths: direct chip control for experiments or programmatic audio, and VGM playback for prepared music data.

Source: docs/demos/embed.html | Related code: docs/js/genesisaudioengine.js, docs/js/vgmplayer.js

Back

Press "Init Audio" first.

What this sample covers

One-shot YM2612 direct control, one-shot PSG direct control, and simple VGM streaming playback.

It uses GenesisAudioEngine and VgmPlayer directly, without the bigger debug UI from vgm.html.

What it does not try to solve

This sample does not solve advanced game mixing, shared SFX/BGM state, or automatic coexistence between DefleMask-style BGM and free-form SFX.

Minimal flow

import ym2612ModuleFactory from "../generated/ym2612_wasm.js";
import segaPsgModuleFactory from "../generated/segapsg_wasm.js";
import { createGenesisAudioEngine } from "../js/genesisaudioengine.js";
import { VgmPlayer } from "../js/vgmplayer.js";

const engine = await createGenesisAudioEngine({
  ym2612ModuleFactory,
  segaPsgModuleFactory,
});

const player = new VgmPlayer(engine);
player.load(vgmArrayBuffer);
player.play();

Why the paths are separated

- VGM playback is good for prepared BGM data.
- Direct chip control is good for experiments, realtime input, and programmatic composition.
- If a song already uses YM2612 / PSG resources tightly, layering arbitrary SFX on top is not guaranteed to work.

Notes

- One-shot direct-control examples use AudioBufferSourceNode for readability.
- VGM playback here uses ScriptProcessorNode because it is smaller to read.
- The more advanced AudioWorklet-oriented path still lives in docs/demos/vgm.html.