osu-beatmap-renderer 0.1.0

package/src/Bezier.js

@@ -0,0 +1,89 @@
+import { PathPoint } from './PathPoint.js';
+
+export class Bezier {
+    constructor() {
+        this.arrPn = [];
+        this.mu = 0;
+        this.resultPoint = new PathPoint();
+        this.initResultPoint();
+        this.arcLength = 0;
+        this.arcLengthTable = [];
+    }
+
+    setBezierN(arrPn) {
+        this.arrPn = arrPn.slice();
+        this.calculateArcLength();
+    }
+
+    bezierCalc() {
+        let k, kn, nn, nkn;
+        let blend, muk, munk;
+        const n = this.arrPn.length - 1;
+
+        this.initResultPoint();
+        muk = 1;
+        munk = Math.pow(1 - this.mu, n);
+        for (k = 0; k <= n; k++) {
+            nn = n;
+            kn = k;
+            nkn = n - k;
+            blend = muk * munk;
+            muk *= this.mu;
+            munk /= (1 - this.mu);
+            while (nn >= 1) {
+                blend *= nn;
+                nn--;
+                if (kn > 1) {
+                    blend /= kn;
+                    kn--;
+                }
+                if (nkn > 1) {
+                    blend /= nkn;
+                    nkn--;
+                }
+            }
+            this.resultPoint.x += this.arrPn[k].x * blend;
+            this.resultPoint.y += this.arrPn[k].y * blend;
+        }
+    }
+
+    initResultPoint() {
+        this.resultPoint.x = 0.0;
+        this.resultPoint.y = 0.0;
+    }
+
+    setMu(mu) {
+        this.mu = mu;
+    }
+
+    getResult() {
+        return this.resultPoint;
+    }
+
+    calculateArcLength() {
+        this.arcLength = 0;
+        this.arcLengthTable = [];
+        let prevPoint = this.arrPn[0];
+        for (let t = 0; t <= 1; t += 0.01) {
+            this.setMu(t);
+            this.bezierCalc();
+            const currPoint = this.getResult();
+            const segmentLength = Math.sqrt(Math.pow(currPoint.x - prevPoint.x, 2) + Math.pow(currPoint.y - prevPoint.y, 2));
+            this.arcLength += segmentLength;
+            this.arcLengthTable.push({ t, length: this.arcLength });
+            prevPoint = { ...currPoint };
+        }
+    }
+
+    getMuForArcLength(targetLength) {
+        for (let i = 0; i < this.arcLengthTable.length - 1; i++) {
+            const curr = this.arcLengthTable[i];
+            const next = this.arcLengthTable[i + 1];
+            if (targetLength >= curr.length && targetLength <= next.length) {
+                const ratio = (targetLength - curr.length) / (next.length - curr.length);
+                return curr.t + ratio * (next.t - curr.t);
+            }
+        }
+        return 1;
+    }
+}

package/src/HitsoundPlayer.js

@@ -0,0 +1,364 @@
+import {
+  DEFAULT_BUNDLED_ASSET_BASE,
+  HITSOUND_SAMPLE_FILES,
+} from "./bundledAssetUrls.js";
+
+function lowerBound(arr, target) {
+  let left = 0;
+  let right = arr.length;
+  while (left < right) {
+    const mid = (left + right) >> 1;
+    if (arr[mid] < target) {
+      left = mid + 1;
+    } else {
+      right = mid;
+    }
+  }
+  return left;
+}
+
+function fileBaseName(file) {
+  return file.replace(/\.[^/.]+$/, "");
+}
+
+export class HitsoundPlayer {
+  constructor({
+    hitsoundVolume = 0.3,
+    schedulerIntervalMs = 20,
+    schedulerLookaheadMs = 120,
+    assetBaseUrl = DEFAULT_BUNDLED_ASSET_BASE,
+  } = {}) {
+    this.hitsoundVolume = hitsoundVolume;
+    this.assetBaseUrl = assetBaseUrl.replace(/\/$/, "");
+
+    this.schedulerIntervalMs = schedulerIntervalMs;
+    this.schedulerLookaheadMs = schedulerLookaheadMs;
+
+    this.audioContext = null;
+    this.hitsoundBuffers = new Map();
+
+    this.schedulerTimer = null;
+    this.hitsoundEvents = [];
+    this.hitsoundEventTimes = [];
+    this.hitsoundEventCursor = 0;
+
+    this.activeScheduledSources = new Set();
+
+    this.isPlayingRef = () => false;
+    this.getTransportCurrentTimeMsRef = () => 0;
+  }
+
+  async init() {
+    try {
+      this.audioContext = new (window.AudioContext ||
+        window.webkitAudioContext)();
+
+      await Promise.all(
+        HITSOUND_SAMPLE_FILES.map(async (file) => {
+          const name = fileBaseName(file);
+          const url = `${this.assetBaseUrl}/${file}`;
+          const response = await fetch(url);
+          if (!response.ok) {
+            throw new Error(`Hitsound fetch failed ${response.status}: ${url}`);
+          }
+          const arrayBuffer = await response.arrayBuffer();
+          const audioBuffer = await this.audioContext.decodeAudioData(
+            arrayBuffer.slice(0),
+          );
+          this.hitsoundBuffers.set(name, audioBuffer);
+        }),
+      );
+    } catch (_error) {
+      this.hitsoundBuffers.clear();
+    }
+  }
+
+  destroy() {
+    this.stopScheduler();
+    this.clearScheduledSources();
+
+    if (this.audioContext) {
+      this.audioContext.close().catch(() => {});
+      this.audioContext = null;
+    }
+
+    this.hitsoundBuffers.clear();
+    this.hitsoundEvents = [];
+    this.hitsoundEventTimes = [];
+    this.hitsoundEventCursor = 0;
+  }
+
+  setVolume(volume) {
+    const v = Math.max(0, Math.min(1, Number(volume) || 0));
+    this.hitsoundVolume = v;
+  }
+
+  buildHitsoundEvents(
+    hitObjectEntries,
+    { getCachedTimingPoint, getSliderDurationCached, getHitObjectEndTime },
+  ) {
+    this.hitsoundEvents = [];
+
+    for (const [hitTime, hitObject] of hitObjectEntries) {
+      const timingPoint = getCachedTimingPoint(hitTime);
+      if (!timingPoint) continue;
+
+      if (hitObject.type.includes("Slider")) {
+        const sliderDuration = getSliderDurationCached(hitObject, hitTime);
+        const sliderInfo = hitObject.sliderInfo;
+        const repeat = Number(sliderInfo?.sliderRepeat || 1);
+
+        this.hitsoundEvents.push(
+          this.resolveSliderEdgeEvent(
+            hitObject,
+            timingPoint,
+            hitTime,
+            0,
+            hitTime,
+          ),
+        );
+        for (let i = 1; i < repeat; i++) {
+          const repeatTime = hitTime + (sliderDuration * i) / repeat;
+          this.hitsoundEvents.push(
+            this.resolveSliderEdgeEvent(
+              hitObject,
+              timingPoint,
+              hitTime,
+              i,
+              repeatTime,
+            ),
+          );
+        }
+        const endTime = hitTime + sliderDuration;
+        this.hitsoundEvents.push(
+          this.resolveSliderEdgeEvent(
+            hitObject,
+            timingPoint,
+            hitTime,
+            repeat,
+            endTime,
+          ),
+        );
+      } else if (hitObject.type.includes("Spinner")) {
+        this.hitsoundEvents.push(
+          this.resolveSpinnerEndEvent(
+            hitObject,
+            timingPoint,
+            hitTime,
+            getHitObjectEndTime,
+          ),
+        );
+      } else {
+        this.hitsoundEvents.push(
+          this.resolveCircleEvent(hitObject, timingPoint, hitTime),
+        );
+      }
+    }
+
+    this.hitsoundEvents = this.hitsoundEvents
+      .filter((e) => e && Number.isFinite(e.time))
+      .sort((a, b) => a.time - b.time);
+
+    this.hitsoundEventTimes = this.hitsoundEvents.map((e) => e.time);
+    this.hitsoundEventCursor = 0;
+  }
+
+  startScheduler({ isPlaying, getTransportCurrentTimeMs }) {
+    if (this.schedulerTimer) return;
+
+    this.isPlayingRef = isPlaying;
+    this.getTransportCurrentTimeMsRef = getTransportCurrentTimeMs;
+
+    this.tickScheduler();
+    this.schedulerTimer = window.setInterval(
+      () => this.tickScheduler(),
+      this.schedulerIntervalMs,
+    );
+  }
+
+  stopScheduler() {
+    if (!this.schedulerTimer) return;
+    window.clearInterval(this.schedulerTimer);
+    this.schedulerTimer = null;
+  }
+
+  tickScheduler() {
+    if (
+      !this.isPlayingRef() ||
+      !this.audioContext ||
+      this.hitsoundEvents.length === 0
+    )
+      return;
+    if (this.audioContext.state === "suspended") return;
+
+    const transportNow = this.getTransportCurrentTimeMsRef();
+    const scheduleUntil = transportNow + this.schedulerLookaheadMs;
+
+    while (this.hitsoundEventCursor < this.hitsoundEvents.length) {
+      const event = this.hitsoundEvents[this.hitsoundEventCursor];
+      if (event.time > scheduleUntil) break;
+
+      if (event.time >= transportNow - 25) {
+        const when =
+          this.audioContext.currentTime +
+          Math.max(0, (event.time - transportNow) / 1000);
+        this.playHitsoundAt(
+          event.normalSet,
+          event.additionSet,
+          event.hitsound,
+          when,
+        );
+      }
+
+      this.hitsoundEventCursor += 1;
+    }
+  }
+
+  resetFromCurrentTime(currentTime) {
+    this.clearScheduledSources();
+    this.hitsoundEventCursor = lowerBound(this.hitsoundEventTimes, currentTime);
+  }
+
+  clearScheduledSources() {
+    for (const source of this.activeScheduledSources) {
+      try {
+        source.stop();
+      } catch (_e) {
+        // No-op if source already ended.
+      }
+    }
+    this.activeScheduledSources.clear();
+  }
+
+  playHitsoundAt(normalset, additionSet, hitsound, when) {
+    const normal = Number.parseInt(normalset, 10);
+    let addition = Number.parseInt(additionSet, 10);
+    const soundMask = Number.parseInt(hitsound, 10);
+    if (Number.isNaN(normal) || Number.isNaN(soundMask)) return;
+
+    if (normal === 1) this.playHitsoundBufferAt("normal-hitnormal", when);
+    if (normal === 2) this.playHitsoundBufferAt("soft-hitnormal", when);
+    if (normal === 3) this.playHitsoundBufferAt("drum-hitnormal", when);
+
+    if (addition === 0) addition = normal;
+    if (addition === 1) {
+      if (soundMask & 2) this.playHitsoundBufferAt("normal-hitwhistle", when);
+      if (soundMask & 4) this.playHitsoundBufferAt("normal-hitfinish", when);
+      if (soundMask & 8) this.playHitsoundBufferAt("normal-hitclap", when);
+    }
+    if (addition === 2) {
+      if (soundMask & 2) this.playHitsoundBufferAt("soft-hitwhistle", when);
+      if (soundMask & 4) this.playHitsoundBufferAt("soft-hitfinish", when);
+      if (soundMask & 8) this.playHitsoundBufferAt("soft-hitclap", when);
+    }
+    if (addition === 3) {
+      if (soundMask & 2) this.playHitsoundBufferAt("drum-hitwhistle", when);
+      if (soundMask & 4) this.playHitsoundBufferAt("drum-hitfinish", when);
+      if (soundMask & 8) this.playHitsoundBufferAt("drum-hitclap", when);
+    }
+  }
+
+  playHitsoundBufferAt(key, when) {
+    if (!this.audioContext || !this.hitsoundBuffers.has(key)) return;
+
+    const source = this.audioContext.createBufferSource();
+    const gain = this.audioContext.createGain();
+    gain.gain.value = this.hitsoundVolume;
+
+    source.buffer = this.hitsoundBuffers.get(key);
+    source.connect(gain);
+    gain.connect(this.audioContext.destination);
+
+    source.onended = () => {
+      this.activeScheduledSources.delete(source);
+    };
+
+    this.activeScheduledSources.add(source);
+    source.start(when);
+  }
+
+  resolveCircleEvent(hitObject, timingPoint, hitTime) {
+    const extrasParts = this.getDelimitedParts(hitObject?.extras, ":");
+    const rawNormalSet = extrasParts[0];
+    const rawAdditionSet = extrasParts[1];
+
+    const normalSet =
+      rawNormalSet && rawNormalSet !== "0"
+        ? rawNormalSet
+        : String(timingPoint.sampleSet || 1);
+    const additionSet =
+      rawAdditionSet && rawAdditionSet !== "0" ? rawAdditionSet : normalSet;
+    return {
+      time: hitTime,
+      normalSet,
+      additionSet,
+      hitsound: String(hitObject.hitSound || "0"),
+    };
+  }
+
+  resolveSliderEdgeEvent(
+    hitObject,
+    timingPoint,
+    _hitTime,
+    edgeIndex,
+    eventTime,
+  ) {
+    const sliderInfo = hitObject.sliderInfo;
+    if (sliderInfo?.edgeSounds && sliderInfo?.edgeSets) {
+      const edgeSounds = this.getDelimitedParts(sliderInfo.edgeSounds, "|");
+      const edgeSets = this.getDelimitedParts(sliderInfo.edgeSets, "|");
+      const hitsound = edgeSounds[edgeIndex] || "0";
+      const edgeSetParts = this.getDelimitedParts(
+        edgeSets[edgeIndex] || "0:0",
+        ":",
+      );
+      const normalSet =
+        edgeSetParts[0] === "0"
+          ? String(timingPoint.sampleSet || 1)
+          : edgeSetParts[0] || String(timingPoint.sampleSet || 1);
+      const additionSet =
+        edgeSetParts[1] === "0" ? normalSet : edgeSetParts[1] || normalSet;
+      return { time: eventTime, normalSet, additionSet, hitsound };
+    }
+
+    const set = String(timingPoint.sampleSet || 1);
+    return { time: eventTime, normalSet: set, additionSet: set, hitsound: "0" };
+  }
+
+  resolveSpinnerEndEvent(hitObject, timingPoint, hitTime, getHitObjectEndTime) {
+    const spinnerEndTime = getHitObjectEndTime(hitObject, hitTime);
+    const extras = hitObject?.extras;
+    const hitSampleRaw = Array.isArray(extras) ? extras[1] : null;
+    const hitSampleParts = this.getDelimitedParts(hitSampleRaw, ":");
+
+    const rawNormalSet = hitSampleParts[0];
+    const rawAdditionSet = hitSampleParts[1];
+
+    const normalSet =
+      rawNormalSet && rawNormalSet !== "0"
+        ? rawNormalSet
+        : String(timingPoint.sampleSet || 1);
+    const additionSet =
+      rawAdditionSet && rawAdditionSet !== "0" ? rawAdditionSet : normalSet;
+
+    return {
+      time: spinnerEndTime,
+      normalSet,
+      additionSet,
+      hitsound: String(hitObject.hitSound || "0"),
+    };
+  }
+
+  getDelimitedParts(value, delimiter) {
+    if (typeof value === "string") {
+      return value.split(delimiter);
+    }
+    if (Array.isArray(value)) {
+      return value.map((item) => String(item ?? ""));
+    }
+    if (value == null) {
+      return [];
+    }
+    return String(value).split(delimiter);
+  }
+}

package/src/PathPoint.js

@@ -0,0 +1,10 @@
+export class PathPoint {
+    constructor(x = 0, y = 0) {
+        this.x = x;
+        this.y = y;
+    }
+
+    static compare(point1, point2) {
+        return point1.x === point2.x && point1.y === point2.y;
+    }
+}

package/src/SliderMath.js

@@ -0,0 +1,145 @@
+import * as PIXI from 'pixi.js';
+import { PathPoint } from './PathPoint.js';
+import { Bezier } from './Bezier.js';
+import { getCircleCenter } from './utils.js';
+
+export function getReverseArrowAngle(sliderInfo) {
+  const anchorPositions = sliderInfo.anchorPositions;
+  const endPos = sliderInfo.sliderEndPos;
+  if (!anchorPositions || anchorPositions.length < 2 || !endPos) {
+    return 0;
+  }
+  const secondLastPoint = anchorPositions[Math.max(0, anchorPositions.length - 2)];
+  return Math.atan2(secondLastPoint.y - endPos.y, secondLastPoint.x - endPos.x) + Math.PI;
+}
+
+export function bezierCurve(sliderInfo, layout) {
+  const anchorPositions = sliderInfo.anchorPositions;
+  if (!sliderInfo.adjusted) {
+    adjustAnchorPositions(anchorPositions, layout);
+    sliderInfo.adjusted = true;
+  }
+
+  const sliderTotalLength = Number(sliderInfo.sliderLength) * layout.gridUnit;
+  let totalLength = 0;
+
+  let arrPn = [new PathPoint(anchorPositions[0].x, anchorPositions[0].y)];
+  let bezier = new Bezier();
+  const sliderPath = new PIXI.Graphics();
+  sliderPath.moveTo(anchorPositions[0].x, anchorPositions[0].y);
+
+  for (let i = 1; i < anchorPositions.length; i++) {
+    const prevPos = anchorPositions[i - 1];
+    const currPos = anchorPositions[i];
+    if (i === anchorPositions.length - 1 || PathPoint.compare(prevPos, currPos)) {
+      if (i === anchorPositions.length - 1) {
+        arrPn.push(new PathPoint(anchorPositions[i].x, anchorPositions[i].y));
+      }
+      bezier.setBezierN(arrPn);
+
+      const muGap = 10 / Math.max(1, sliderTotalLength);
+      const startP = new PathPoint();
+      const endP = new PathPoint();
+
+      for (let mu = 0; mu <= 1; mu += muGap) {
+        startP.x = bezier.getResult().x;
+        startP.y = bezier.getResult().y;
+
+        bezier.setMu(mu);
+        bezier.bezierCalc();
+
+        endP.x = bezier.getResult().x;
+        endP.y = bezier.getResult().y;
+
+        sliderInfo.sliderEndPos = startP;
+        if (Number.isFinite(endP.x) && Number.isFinite(endP.y)) {
+          sliderPath.lineTo(endP.x, endP.y);
+          sliderInfo.sliderEndPos = endP;
+        }
+
+        if (mu === 0) continue;
+        totalLength += Math.hypot(startP.x - endP.x, startP.y - endP.y);
+
+        if (totalLength >= sliderTotalLength) break;
+      }
+
+      arrPn = [];
+      bezier = new Bezier();
+
+      if (i < anchorPositions.length - 1) {
+        arrPn.push(new PathPoint(prevPos.x, prevPos.y));
+      } else {
+        arrPn.push(new PathPoint(currPos.x, currPos.y));
+      }
+    }
+
+    arrPn.push(new PathPoint(anchorPositions[i].x, anchorPositions[i].y));
+  }
+
+  return sliderPath;
+}
+
+export function perfectCurve(sliderInfo, layout) {
+  const anchorPositions = sliderInfo.anchorPositions;
+  if (!sliderInfo.adjusted) {
+    adjustAnchorPositions(anchorPositions, layout);
+    sliderInfo.adjusted = true;
+  }
+
+  const sliderTotalLength = Number(sliderInfo.sliderLength) * layout.gridUnit;
+  let totalLength = 0;
+  const sliderPath = new PIXI.Graphics();
+  sliderPath.moveTo(anchorPositions[0].x, anchorPositions[0].y);
+
+  const circleCenter = getCircleCenter(anchorPositions[0], anchorPositions[1], anchorPositions[2]);
+  const radius = Math.hypot(circleCenter.x - anchorPositions[0].x, circleCenter.y - anchorPositions[0].y);
+
+  const angleA = Math.atan2(anchorPositions[0].y - circleCenter.y, anchorPositions[0].x - circleCenter.x);
+  const angleC = Math.atan2(anchorPositions[2].y - circleCenter.y, anchorPositions[2].x - circleCenter.x);
+
+  const yDeltaA = anchorPositions[1].y - anchorPositions[0].y;
+  const xDeltaA = anchorPositions[1].x - anchorPositions[0].x;
+  const yDeltaB = anchorPositions[2].y - anchorPositions[1].y;
+  const xDeltaB = anchorPositions[2].x - anchorPositions[1].x;
+
+  const anticlockwise = xDeltaB * yDeltaA - xDeltaA * yDeltaB > 0;
+
+  const startAngle = angleA;
+  let endAngle = angleC;
+  if (!anticlockwise && endAngle - startAngle < 0) endAngle += Math.PI * 2;
+  if (anticlockwise && endAngle - startAngle > 0) endAngle -= Math.PI * 2;
+
+  const angleStep = (endAngle - startAngle) / 100;
+
+  let prevX;
+  let prevY;
+
+  for (let i = 0; i <= 100; i++) {
+    const angle = startAngle + angleStep * i;
+    const x = circleCenter.x + radius * Math.cos(angle);
+    const y = circleCenter.y + radius * Math.sin(angle);
+    sliderPath.lineTo(x, y);
+
+    if (i !== 0) {
+      totalLength += Math.hypot(x - prevX, y - prevY);
+      if (totalLength >= sliderTotalLength) {
+        prevX = x;
+        prevY = y;
+        break;
+      }
+    }
+
+    prevX = x;
+    prevY = y;
+  }
+
+  sliderInfo.sliderEndPos = { x: prevX, y: prevY };
+  return sliderPath;
+}
+
+function adjustAnchorPositions(anchorPositions, layout) {
+  for (const anchor of anchorPositions) {
+    anchor.x = layout.topLeftX + anchor.x * layout.gridUnit;
+    anchor.y = layout.topLeftY + anchor.y * layout.gridUnit;
+  }
+}

package/src/bundledAssetUrls.js

@@ -0,0 +1,22 @@
+/**
+ * Default host for built-in skin textures and hitsound samples (repo `assets/`).
+ * @see https://github.com/inix1257/osu-beatmap-renderer/tree/main/assets
+ */
+export const DEFAULT_BUNDLED_ASSET_BASE =
+  "https://raw.githubusercontent.com/inix1257/osu-beatmap-renderer/main/assets";
+
+/** @type {readonly string[]} */
+export const HITSOUND_SAMPLE_FILES = [
+  "normal-hitnormal.wav",
+  "normal-hitwhistle.wav",
+  "normal-hitfinish.wav",
+  "normal-hitclap.wav",
+  "soft-hitnormal.wav",
+  "soft-hitwhistle.wav",
+  "soft-hitfinish.wav",
+  "soft-hitclap.wav",
+  "drum-hitnormal.wav",
+  "drum-hitwhistle.wav",
+  "drum-hitfinish.wav",
+  "drum-hitclap.wav",
+];

package/src/index.js

@@ -0,0 +1,7 @@
+export { BeatmapEngine } from "./BeatmapEngine.js";
+export { parseOsuText, fetchAndParseOsu } from "./parser.js";
+export {
+  getGlobalAudioOffsetMs,
+  setGlobalAudioOffsetMs,
+  subscribeGlobalAudioOffset,
+} from "./AudioTimingConfig.js";