@jjlmoya/utils-games-development 1.49.0 → 1.51.0

package/src/tool/audioLoopPointFinder/client.ts

@@ -0,0 +1,262 @@
+import {
+  findNearestZeroCrossing,
+  samplesToSeconds,
+  formatTime,
+  parseAudioLoopMetadata,
+} from './logic';
+import {
+  dropzone,
+  browseBtn,
+  fileInput,
+  workspace,
+  canvas,
+  statDuration,
+  statSampleRate,
+  statChannels,
+  statSamples,
+  startInput,
+  endInput,
+  durationInput,
+  snapBtn,
+  playBtn,
+  stopBtn,
+  exportBtn,
+  presetFull,
+  presetIntro,
+  presetMiddleLoop,
+  statusText,
+  measureCanvasParentWidth,
+  measureCanvasBoundingRect,
+  setElementText,
+  getI18nText,
+  spawnParticle,
+} from './dom-utils';
+import { renderWaveformBars, renderWaveformOverlay } from './waveform-renderer';
+import { initAudioContext, playLoop, stopLoop, exportWav } from './audio-player';
+
+let audioBuffer: AudioBuffer | null = null;
+
+let loopStartSample = 0;
+let loopEndSample = 0;
+let totalSamples = 0;
+let isDraggingStart = false;
+let isDraggingEnd = false;
+
+function updateStats() {
+  if (!audioBuffer) return;
+  setElementText(statDuration, formatTime(audioBuffer.duration));
+  setElementText(statSampleRate, String(audioBuffer.sampleRate) + ' Hz');
+  setElementText(statChannels, String(audioBuffer.numberOfChannels));
+  setElementText(statSamples, audioBuffer.length.toLocaleString());
+}
+
+function updateInputs() {
+  if (!audioBuffer) return;
+  if (startInput) {
+    startInput.max = String(totalSamples);
+    startInput.value = String(loopStartSample);
+  }
+  if (endInput) {
+    endInput.max = String(totalSamples);
+    endInput.value = String(loopEndSample);
+  }
+  if (durationInput) {
+    const durSec = samplesToSeconds(loopEndSample - loopStartSample, audioBuffer.sampleRate);
+    durationInput.value = formatTime(durSec);
+  }
+}
+
+function drawWaveform() {
+  if (!canvas || !audioBuffer) return;
+  const width = measureCanvasParentWidth();
+  const height = 180;
+  canvas.width = width;
+  canvas.height = height;
+
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+
+  ctx.fillStyle = '#020617';
+  ctx.fillRect(0, 0, width, height);
+  renderWaveformBars(ctx, audioBuffer, width, height);
+  renderWaveformOverlay({
+    ctx,
+    loopStartSample,
+    loopEndSample,
+    totalSamples,
+    width,
+    height,
+  });
+}
+
+function decodeAudioDataPromise(ctx: AudioContext, buffer: ArrayBuffer): Promise<AudioBuffer> {
+  return new Promise((resolve, reject) => {
+    ctx.decodeAudioData(
+      buffer,
+      (decoded) => resolve(decoded),
+      (err) => reject(err)
+    );
+  });
+}
+
+function handleFile(file: File) {
+  const ctx = initAudioContext();
+  if (ctx.state === 'suspended') {
+    ctx.resume();
+  }
+  const reader = new FileReader();
+  reader.onload = async (e) => {
+    try {
+      const arrayBuf = e.target?.result as ArrayBuffer;
+      if (!ctx || !arrayBuf) return;
+      const rawBytes = new Uint8Array(arrayBuf);
+      const parsedMeta = parseAudioLoopMetadata(rawBytes);
+
+      const bufferCopy = arrayBuf.slice(0);
+      audioBuffer = await decodeAudioDataPromise(ctx, bufferCopy);
+      totalSamples = audioBuffer.length;
+
+      loopStartSample = parsedMeta.loopStart ?? 0;
+      loopEndSample = parsedMeta.loopEnd ?? totalSamples;
+
+      updateStats();
+      updateInputs();
+      drawWaveform();
+      if (workspace) workspace.style.display = 'flex';
+      setElementText(statusText, getI18nText('loaded'));
+    } catch {
+      setElementText(statusText, getI18nText('decode-error'));
+    }
+  };
+  reader.readAsArrayBuffer(file);
+}
+
+function snapToZeroCrossing() {
+  if (!audioBuffer) return;
+  const channelData = audioBuffer.getChannelData(0);
+  loopStartSample = findNearestZeroCrossing(channelData, loopStartSample);
+  loopEndSample = findNearestZeroCrossing(channelData, loopEndSample);
+  updateInputs();
+  drawWaveform();
+  setElementText(statusText, getI18nText('snapped'));
+}
+
+dropzone?.addEventListener('click', () => fileInput?.click());
+browseBtn?.addEventListener('click', (e) => {
+  e.stopPropagation();
+  fileInput?.click();
+});
+
+fileInput?.addEventListener('change', (e) => {
+  const files = (e.target as HTMLInputElement).files;
+  if (files && files[0]) handleFile(files[0]);
+});
+
+dropzone?.addEventListener('dragover', (e) => {
+  e.preventDefault();
+  dropzone?.classList.add('drag-over');
+});
+
+dropzone?.addEventListener('dragleave', () => dropzone?.classList.remove('drag-over'));
+dropzone?.addEventListener('drop', (e) => {
+  e.preventDefault();
+  dropzone?.classList.remove('drag-over');
+  const files = e.dataTransfer?.files;
+  if (files && files[0]) handleFile(files[0]);
+});
+
+startInput?.addEventListener('change', () => {
+  loopStartSample = Math.max(0, Math.min(totalSamples, parseInt(startInput.value) || 0));
+  updateInputs();
+  drawWaveform();
+});
+
+endInput?.addEventListener('change', () => {
+  loopEndSample = Math.max(0, Math.min(totalSamples, parseInt(endInput.value) || 0));
+  updateInputs();
+  drawWaveform();
+});
+
+snapBtn?.addEventListener('click', (e) => {
+  snapToZeroCrossing();
+  spawnParticle('ZERO SNAP!', e.clientX, e.clientY);
+});
+
+playBtn?.addEventListener('click', () => playLoop(audioBuffer, loopStartSample, loopEndSample, totalSamples));
+stopBtn?.addEventListener('click', () => stopLoop());
+exportBtn?.addEventListener('click', (e) => {
+  exportWav(audioBuffer, loopStartSample, loopEndSample);
+  spawnParticle('EXPORTED!', e.clientX, e.clientY);
+});
+
+presetFull?.addEventListener('click', () => {
+  loopStartSample = 0;
+  loopEndSample = totalSamples;
+  updateInputs();
+  drawWaveform();
+});
+
+presetIntro?.addEventListener('click', () => {
+  loopStartSample = Math.round(totalSamples * 0.1);
+  loopEndSample = totalSamples;
+  updateInputs();
+  drawWaveform();
+});
+
+presetMiddleLoop?.addEventListener('click', () => {
+  loopStartSample = Math.round(totalSamples * 0.25);
+  loopEndSample = Math.round(totalSamples * 0.75);
+  updateInputs();
+  drawWaveform();
+});
+
+canvas?.addEventListener('mousedown', (e) => {
+  if (!totalSamples) return;
+  const rect = measureCanvasBoundingRect();
+  if (!rect) return;
+
+  const x = e.clientX - rect.left;
+  const clickedSample = Math.round((x / rect.width) * totalSamples);
+  const startX = (loopStartSample / totalSamples) * rect.width;
+  const endX = (loopEndSample / totalSamples) * rect.width;
+
+  if (Math.abs(x - startX) < 15) {
+    isDraggingStart = true;
+  } else if (Math.abs(x - endX) < 15) {
+    isDraggingEnd = true;
+  } else {
+    if (Math.abs(clickedSample - loopStartSample) < Math.abs(clickedSample - loopEndSample)) {
+      loopStartSample = clickedSample;
+    } else {
+      loopEndSample = clickedSample;
+    }
+    updateInputs();
+    drawWaveform();
+  }
+});
+
+window.addEventListener('mousemove', (e) => {
+  if (!isDraggingStart && !isDraggingEnd) return;
+  const rect = measureCanvasBoundingRect();
+  if (!rect) return;
+
+  const x = Math.max(0, Math.min(rect.width, e.clientX - rect.left));
+  const sample = Math.round((x / rect.width) * totalSamples);
+
+  if (isDraggingStart) {
+    loopStartSample = Math.min(sample, loopEndSample - 100);
+  } else if (isDraggingEnd) {
+    loopEndSample = Math.max(sample, loopStartSample + 100);
+  }
+  updateInputs();
+  drawWaveform();
+});
+
+window.addEventListener('mouseup', () => {
+  isDraggingStart = false;
+  isDraggingEnd = false;
+});
+
+window.addEventListener('resize', () => {
+  drawWaveform();
+});

package/src/tool/audioLoopPointFinder/component.astro

@@ -0,0 +1,147 @@
+---
+import type { AudioLoopPointFinderUI } from './ui';
+import './audio-loop-point-finder.css';
+
+interface Props {
+  ui: AudioLoopPointFinderUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div
+  class="alpf-main-card"
+  id="alpf-root"
+  data-status-loaded={ui.statusLoaded}
+  data-status-decode-error={ui.statusDecodeError}
+  data-status-snapped={ui.statusSnapped}
+  data-status-looping={ui.statusLooping}
+  data-status-stopped={ui.statusStopped}
+  data-status-exported={ui.statusExported}
+  data-status-paused={ui.statusPaused}
+>
+  <div class="alpf-dropzone" id="alpf-dropzone" tabindex="0" role="button" aria-label={ui.dropzoneTitle}>
+    <svg class="alpf-dropzone-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M9 18V5l12-2v13"></path>
+      <circle cx="6" cy="18" r="3"></circle>
+      <circle cx="18" cy="16" r="3"></circle>
+    </svg>
+    <div class="alpf-dropzone-title">{ui.dropzoneTitle}</div>
+    <div class="alpf-dropzone-subtitle">{ui.dropzoneSubtitle}</div>
+    <button type="button" class="alpf-btn alpf-btn-secondary" id="alpf-browse-btn" aria-label={ui.dropzoneButton}>
+      {ui.dropzoneButton}
+    </button>
+    <input type="file" id="alpf-file-input" class="alpf-file-input" accept="audio/*" aria-label={ui.dropzoneButton} />
+  </div>
+
+  <div class="alpf-workspace" id="alpf-workspace" style="display: none;">
+    <div style="display: none;">
+      <span>{ui.title}</span>
+      <span>{ui.subtitle}</span>
+      <span>{ui.audioInfoTitle}</span>
+      <span>{ui.loopControlsTitle}</span>
+      <span>{ui.zeroCrossingLabel}</span>
+      <span>{ui.pauseLoopButton}</span>
+      <span>{ui.secondUnitLabel}</span>
+      <span>{ui.zoomLabel}</span>
+      <span>{ui.zoomInButton}</span>
+      <span>{ui.zoomOutButton}</span>
+      <span>{ui.resetZoomButton}</span>
+      <span>{ui.noFileSelected}</span>
+      <span>{ui.invalidAudioFile}</span>
+    </div>
+
+    <div class="alpf-stats-grid">
+      <div class="alpf-stat-card">
+        <span class="alpf-stat-label">{ui.durationLabel}</span>
+        <span class="alpf-stat-value" id="alpf-stat-duration">00:00.000</span>
+      </div>
+      <div class="alpf-stat-card">
+        <span class="alpf-stat-label">{ui.sampleRateLabel}</span>
+        <span class="alpf-stat-value" id="alpf-stat-samplerate">44100 Hz</span>
+      </div>
+      <div class="alpf-stat-card">
+        <span class="alpf-stat-label">{ui.channelsLabel}</span>
+        <span class="alpf-stat-value" id="alpf-stat-channels">2</span>
+      </div>
+      <div class="alpf-stat-card">
+        <span class="alpf-stat-label">{ui.totalSamplesLabel}</span>
+        <span class="alpf-stat-value" id="alpf-stat-samples">0</span>
+      </div>
+    </div>
+
+    <div class="alpf-waveform-container" id="alpf-waveform-box">
+      <canvas class="alpf-waveform-canvas" id="alpf-canvas"></canvas>
+    </div>
+
+    <div class="alpf-preset-chips">
+      <span class="alpf-label">{ui.presetsTitle}:</span>
+      <button type="button" class="alpf-chip" id="alpf-preset-full" aria-label={ui.presetFullTrack}>
+        {ui.presetFullTrack}
+      </button>
+      <button type="button" class="alpf-chip" id="alpf-preset-intro" aria-label={ui.presetIntroCut}>
+        {ui.presetIntroCut}
+      </button>
+      <button type="button" class="alpf-chip" id="alpf-preset-middle" aria-label={ui.presetMiddleLoop}>
+        {ui.presetMiddleLoop}
+      </button>
+    </div>
+
+    <div class="alpf-marker-inputs">
+      <div class="alpf-input-field">
+        <label for="alpf-start-sample-input" class="alpf-label">{ui.loopStartLabel} ({ui.sampleUnitLabel})</label>
+        <div class="alpf-input-row">
+          <input type="number" id="alpf-start-sample-input" class="alpf-input" min="0" value="0" aria-label={ui.loopStartLabel} />
+        </div>
+      </div>
+      <div class="alpf-input-field">
+        <label for="alpf-end-sample-input" class="alpf-label">{ui.loopEndLabel} ({ui.sampleUnitLabel})</label>
+        <div class="alpf-input-row">
+          <input type="number" id="alpf-end-sample-input" class="alpf-input" min="0" value="0" aria-label={ui.loopEndLabel} />
+        </div>
+      </div>
+      <div class="alpf-input-field">
+        <label for="alpf-loop-duration-input" class="alpf-label">{ui.loopDurationLabel}</label>
+        <div class="alpf-input-row">
+          <input type="text" id="alpf-loop-duration-input" class="alpf-input" readonly value="00:00.000" aria-label={ui.loopDurationLabel} />
+        </div>
+      </div>
+    </div>
+
+    <div class="alpf-toolbar">
+      <div class="alpf-controls-group">
+        <button type="button" class="alpf-btn alpf-btn-secondary" id="alpf-snap-btn" aria-label={ui.snapZeroCrossingButton}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M12 2v20M2 12h20"></path>
+          </svg>
+          {ui.snapZeroCrossingButton}
+        </button>
+        <button type="button" class="alpf-btn alpf-btn-primary" id="alpf-play-btn" aria-label={ui.playLoopButton}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M8 5v14l11-7z"></path>
+          </svg>
+          {ui.playLoopButton}
+        </button>
+        <button type="button" class="alpf-btn alpf-btn-secondary" id="alpf-stop-btn" aria-label={ui.stopLoopButton} style="display: none;">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M6 6h12v12H6z"></path>
+          </svg>
+          {ui.stopLoopButton}
+        </button>
+      </div>
+
+      <button type="button" class="alpf-btn alpf-btn-success" id="alpf-export-btn" aria-label={ui.exportWavButton}>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"></path>
+        </svg>
+        {ui.exportWavButton}
+      </button>
+    </div>
+
+    <div class="alpf-status-bar">
+      <span id="alpf-status-text">{ui.statusReady}</span>
+    </div>
+  </div>
+</div>
+
+<script src="./client.ts"></script>

package/src/tool/audioLoopPointFinder/dom-utils.ts

@@ -0,0 +1,55 @@
+export const root = document.getElementById('alpf-root');
+export const dropzone = document.getElementById('alpf-dropzone');
+export const browseBtn = document.getElementById('alpf-browse-btn');
+export const fileInput = document.getElementById('alpf-file-input') as HTMLInputElement;
+export const workspace = document.getElementById('alpf-workspace');
+export const canvas = document.getElementById('alpf-canvas') as HTMLCanvasElement;
+
+export const statDuration = document.getElementById('alpf-stat-duration');
+export const statSampleRate = document.getElementById('alpf-stat-samplerate');
+export const statChannels = document.getElementById('alpf-stat-channels');
+export const statSamples = document.getElementById('alpf-stat-samples');
+
+export const startInput = document.getElementById('alpf-start-sample-input') as HTMLInputElement;
+export const endInput = document.getElementById('alpf-end-sample-input') as HTMLInputElement;
+export const durationInput = document.getElementById('alpf-loop-duration-input') as HTMLInputElement;
+
+export const snapBtn = document.getElementById('alpf-snap-btn');
+export const playBtn = document.getElementById('alpf-play-btn');
+export const stopBtn = document.getElementById('alpf-stop-btn');
+export const exportBtn = document.getElementById('alpf-export-btn');
+
+export const presetFull = document.getElementById('alpf-preset-full');
+export const presetIntro = document.getElementById('alpf-preset-intro');
+export const presetMiddleLoop = document.getElementById('alpf-preset-middle');
+export const statusText = document.getElementById('alpf-status-text');
+
+export function measureCanvasParentWidth(): number {
+  return canvas?.parentElement?.clientWidth || 800;
+}
+
+export function measureCanvasBoundingRect(): DOMRect | null {
+  return canvas ? canvas.getBoundingClientRect() : null;
+}
+
+export function setElementText(element: HTMLElement | null, textContentValue: string) {
+  if (element) {
+    element.textContent = textContentValue;
+  }
+}
+
+export function getI18nText(keyName: string): string {
+  if (!root) return '';
+  return root.getAttribute('data-status-' + keyName) || '';
+}
+
+export function spawnParticle(particleText: string, posX: number, posY: number) {
+  if (!root) return;
+  const particleEl = document.createElement('div');
+  particleEl.className = 'alpf-particle';
+  setElementText(particleEl, particleText);
+  particleEl.style.left = posX + 'px';
+  particleEl.style.top = posY + 'px';
+  root.appendChild(particleEl);
+  setTimeout(() => particleEl.remove(), 800);
+}

package/src/tool/audioLoopPointFinder/entry.ts

@@ -0,0 +1,27 @@
+import type { GamesToolEntry, ToolLocaleContent } from '../../types';
+import type { AudioLoopPointFinderUI } from './ui';
+
+export type { AudioLoopPointFinderUI };
+export type AudioLoopPointFinderLocaleContent = ToolLocaleContent<AudioLoopPointFinderUI>;
+
+export const audioLoopPointFinder: GamesToolEntry<AudioLoopPointFinderUI> = {
+  id: 'audio-loop-point-finder',
+  icons: { bg: 'mdi:gamepad-variant', fg: 'mdi:waveform' },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};