render

.gitignore

@@ -1 +1,2 @@
 node_modules
+dist

.tokeignore

@@ -0,0 +1 @@
+pnpm-lock.yaml

package.json

@@ -3,8 +3,10 @@
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
+  "type": "module",
   "scripts": {
-		"dev": "vite"
+    "dev": "vite",
+    "build": "vite build"
   },
   "keywords": [],
   "author": "",
@@ -13,6 +15,7 @@
     "@biomejs/biome": "1.7.2",
     "@types/three": "^0.164.0",
     "vite": "^5.2.11",
+    "vite-bundle-analyzer": "^0.9.4",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
   "dependencies": {

pnpm-lock.yaml

@@ -31,6 +31,9 @@ devDependencies:
   vite:
     specifier: ^5.2.11
     version: 5.2.11
+  vite-bundle-analyzer:
+    specifier: ^0.9.4
+    version: 0.9.4
   vite-plugin-node-polyfills:
     specifier: ^0.21.0
     version: 0.21.0(vite@5.2.11)
@@ -1379,6 +1382,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /source-map@0.7.4:
+    resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
+    engines: {node: '>= 8'}
+    dev: true
+
   /stream-browserify@3.0.0:
     resolution: {integrity: sha512-H73RAHsVBapbim0tU2JwwOiXUj+fikfiaoYAKHF3VJfA0pe2BCzkhAHBlLG6REzE+2WNZcxOXjK7lkso+9euLA==}
     dependencies:
@@ -1452,6 +1460,13 @@ packages:
       which-typed-array: 1.1.15
     dev: true
 
+  /vite-bundle-analyzer@0.9.4:
+    resolution: {integrity: sha512-a/w4ShKQEbTe7wllLXI+3D8ELgRv7iHDuWEPaXokA+FhWBXJCdtOZYIvLzvnn8vxHf+7pm1c23AeGyW/0Ge0Yw==}
+    dependencies:
+      picocolors: 1.0.0
+      source-map: 0.7.4
+    dev: true
+
   /vite-plugin-node-polyfills@0.21.0(vite@5.2.11):
     resolution: {integrity: sha512-Sk4DiKnmxN8E0vhgEhzLudfJQfaT8k4/gJ25xvUPG54KjLJ6HAmDKbr4rzDD/QWEY+Lwg80KE85fGYBQihEPQA==}
     peerDependencies:

src/index.ts

@@ -20,6 +20,8 @@ class OsuPlayer {
   beatmapSet: BeatmapSet = new BeatmapSet();
   diffsByStarRating: [number, number][] = [];
   diffs: Map<number, Beatmap> = new Map();
+  audioTimestamp: number;
+  audioBuffer: AudioBuffer;
 
   constructor(opts?: OsuPlayerOpts) {
     if (opts) this.opts = opts;
@@ -66,7 +68,18 @@ class OsuPlayer {
       }
       this.diffsByStarRating.sort((a, b) => a[0] - b[0]);
 
-      /*
+      // TODO: Debug
+      this.setBeatmap(
+        this.diffsByStarRating[this.diffsByStarRating.length - 1][1],
+      );
+    });
+
+    this.el.addEventListener("dragover", (evt) => {
+      evt.preventDefault();
+    });
+  }
+
+  showDiffSelector() {
     const listEl = document.createElement("ul");
     listEl.style.margin = "0";
     for (const [stars, id] of this.diffsByStarRating) {
@@ -87,16 +100,6 @@ class OsuPlayer {
 
     console.log([...this.beatmapSet.assets.entries()]);
     this.el?.replaceChildren(listEl);
-      */
-
-      this.setBeatmap(
-        this.diffsByStarRating[this.diffsByStarRating.length - 1][1],
-      );
-    });
-
-    this.el.addEventListener("dragover", (evt) => {
-      evt.preventDefault();
-    });
   }
 
   setBeatmap(id: number) {
@@ -111,14 +114,17 @@ class OsuPlayer {
     const beatmap = this.diffs.get(id)!;
 
     const backgroundUrl = URL.createObjectURL(beatmap.background());
+    const audioUrl = beatmap.audioFile();
+    console.log(audioUrl);
 
     const scene = new THREE.Scene();
     const camera = new THREE.OrthographicCamera(-512, 512, -384, 384, 1, 1000);
     scene.add(camera);
-
     scene.add(new THREE.AmbientLight());
 
+    const clock = new THREE.Clock();
     const loader = new THREE.TextureLoader();
+    const audioContext = new AudioContext();
 
     let backgroundPlane: THREE.Mesh;
     {
@@ -140,15 +146,46 @@ class OsuPlayer {
 
     const renderer = new THREE.WebGLRenderer({ canvas: this.canvasEl });
     const stats = new Stats();
+
     this.el?.replaceChildren(this.canvasEl, stats.dom);
 
-    function animate() {
-      requestAnimationFrame(animate);
+    const loadMusic = async () => {
+      const audioStream = audioUrl.stream();
+      const buffer = await new Response(audioStream).arrayBuffer();
+      const musicBuffer = await audioContext.decodeAudioData(buffer);
+      this.audioBuffer = musicBuffer;
+    };
 
+    const loadStuff = () => {
+      return Promise.all([loadMusic()]);
+    };
+
+    const play = () => {
+      const gainNode = audioContext.createGain();
+      gainNode.gain.value = 0.01;
+      gainNode.connect(audioContext.destination);
+
+      const audioSource = audioContext.createBufferSource();
+      audioSource.buffer = this.audioBuffer;
+      audioSource.connect(gainNode);
+      audioSource.start();
+
+      const updateObjects = () => {};
+
+      const animate = () => {
+        requestAnimationFrame(animate);
+        this.audioTimestamp = audioContext.getOutputTimestamp().contextTime;
+        updateObjects();
         renderer.render(scene, camera);
-    }
+      };
 
       animate();
+    };
+
+    loadStuff().then(() => {
+      console.log("loaded!");
+      play();
+    });
   }
 }
 

src/osu.ts

@@ -16,6 +16,12 @@ export class Beatmap {
     return this.osuInner.metadata.beatmapId;
   }
 
+  public audioFile(): Blob {
+    const filename = this.osuInner.general.audioFilename;
+    // biome-ignore lint/style/noNonNullAssertion: <explanation>
+    return this.set.assets.get(filename)!;
+  }
+
   public background(): Blob {
     // biome-ignore lint/style/noNonNullAssertion: <explanation>
     const filename = this.osuInner.events.backgroundPath!;

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler"
+  }
+}

vite.config.ts

@@ -1,7 +1,14 @@
+import { analyzer } from "vite-bundle-analyzer";
 import { defineConfig } from "vite";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [],
+  build: {
+    lib: {
+      entry: "src/index.ts",
+      name: "osuplayer",
+    },
+  },
+  plugins: [analyzer()],
 });