visual-song 1.1.8 → 1.2.0

package/dist/index.js

@@ -2,6 +2,64 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useRef, useEffect, createContext, useContext, useCallback, useImperativeHandle } from 'react';
 import VSModule from './wasm_src/visualsong-core.js';
 
+// 엔진(dr_wav·dr_mp3·dr_flac)이 직접 읽는 형식. 그 밖(M4A/AAC, OGG Vorbis·Opus 등)은 브라우저
+// 디코더로 PCM 을 얻어 16비트 WAV 로 감싸 엔진에 넘긴다. 코덱은 브라우저가 가진 것을 쓰므로
+// 엔진에 디코더를 넣지 않아도 되고 라이선스 문제도 없다. 브라우저가 못 풀면 엔진이 거절하던 대로 실패한다.
+const ENGINE_FORMAT = /\.(wav|mp3|flac)$/i;
+const DECODE_SAMPLE_RATE = 44100;
+function isEngineFormat(fileName) {
+    return ENGINE_FORMAT.test(fileName);
+}
+// 엔진은 모노·스테레오 WAV 를 받는다. 3채널 이상이면 앞의 두 채널만 쓴다.
+function encodeWav(buffer) {
+    const channels = Math.min(2, buffer.numberOfChannels);
+    const dataBytes = buffer.length * channels * 2;
+    const bytes = new Uint8Array(44 + dataBytes);
+    const view = new DataView(bytes.buffer);
+    const writeText = (offset, text)=>{
+        for(let index = 0; index < text.length; index += 1){
+            view.setUint8(offset + index, text.charCodeAt(index));
+        }
+    };
+    writeText(0, "RIFF");
+    view.setUint32(4, 36 + dataBytes, true);
+    writeText(8, "WAVE");
+    writeText(12, "fmt ");
+    view.setUint32(16, 16, true);
+    view.setUint16(20, 1, true);
+    view.setUint16(22, channels, true);
+    view.setUint32(24, buffer.sampleRate, true);
+    view.setUint32(28, buffer.sampleRate * channels * 2, true);
+    view.setUint16(32, channels * 2, true);
+    view.setUint16(34, 16, true);
+    writeText(36, "data");
+    view.setUint32(40, dataBytes, true);
+    const data = Array.from({
+        length: channels
+    }, (_, index)=>buffer.getChannelData(index));
+    let offset = 44;
+    for(let frame = 0; frame < buffer.length; frame += 1){
+        for (const channel of data){
+            const sample = Math.round((channel[frame] ?? 0) * 32768);
+            view.setInt16(offset, Math.max(-32768, Math.min(32767, sample)), true);
+            offset += 2;
+        }
+    }
+    return bytes;
+}
+async function decodeToWav(encoded) {
+    const scope = globalThis;
+    const Context = scope.OfflineAudioContext ?? scope.webkitOfflineAudioContext;
+    if (!Context) throw new Error("This browser cannot decode this audio format.");
+    const context = new Context(2, 1, DECODE_SAMPLE_RATE);
+    // 예전 Safari 는 콜백 형식만 지원한다
+    const audio = await new Promise((resolve, reject)=>{
+        const pending = context.decodeAudioData(encoded, resolve, reject);
+        if (pending && typeof pending.then === "function") pending.then(resolve, reject);
+    });
+    return encodeWav(audio);
+}
+
 const _generateUID = ()=>{
     return Date.now().toString(36) + Math.random().toString(36).substring(2);
 };
@@ -81,13 +139,26 @@ function useVisualSongAudio(file, useSinWave = false) {
         file,
         useSinWave
     ]);
+    // 마지막으로 고른 파일만 엔진에 넘긴다. 브라우저 디코딩이 늦게 끝나 새 파일을 덮지 않게 한다.
+    const loadSerialRef = useRef(0);
     const internalLoadAudioFile = (file)=>{
         if (!module) return;
+        const serial = ++loadSerialRef.current;
+        const isCurrent = ()=>loadSerialRef.current === serial;
         const reader = new FileReader();
         reader.onload = (e)=>{
-            if (!e.target) return;
+            if (!e.target || !isCurrent()) return;
             const arrayBuffer = e.target.result;
-            module.loadAudioFileFromMemory(file.name, new Uint8Array(arrayBuffer));
+            if (isEngineFormat(file.name)) {
+                module.loadAudioFileFromMemory(file.name, new Uint8Array(arrayBuffer));
+                return;
+            }
+            // M4A·OGG 등은 브라우저 디코더로 풀어 WAV 로 넘긴다(audioDecode.ts). decodeAudioData 는 버퍼를 떼어 가므로 사본을 준다.
+            void decodeToWav(arrayBuffer.slice(0)).then((wav)=>{
+                if (isCurrent()) module.loadAudioFileFromMemory(`${file.name}.wav`, wav);
+            }).catch(()=>{
+                if (isCurrent()) module.loadAudioFileFromMemory(file.name, new Uint8Array(arrayBuffer));
+            });
         };
         reader.readAsArrayBuffer(file);
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "visual-song",
-  "version": "1.1.8",
+  "version": "1.2.0",
   "description": "visual-song core library",
   "author": "kunyoungparkk (rjsdud3263@gmail.com)",
   "license": "MIT",