Merge pull request #300 from Yukiniro/0ohtliie

fix: fix wrong audio data when combination
bilibili · Oct 18, 2024 · e92e86f · e92e86f
2 parents 271c953 + 7e6fe95
commit e92e86f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/.changeset/thin-phones-flow.md b/.changeset/thin-phones-flow.md
@@ -0,0 +1,5 @@
+---
+'@webav/av-cliper': patch
+---
+
+fix: wrong audio data when combination #299
diff --git a/packages/av-canvas/demo/video-editor.tsx b/packages/av-canvas/demo/video-editor.tsx
@@ -270,9 +270,11 @@ function App() {
       <button
         className="mx-[10px]"
         onClick={async () => {
-          const spr = new VisibleSprite(
-            new AudioClip((await fetch('./audio/16kHz-1chan.mp3')).body!),
-          );
+          const stream =
+            clipSource === 'local'
+              ? (await loadFile({ 'audio/*': ['.mp3', '.m4a'] })).stream()
+              : (await fetch('./audio/16kHz-1chan.mp3')).body!;
+          const spr = new VisibleSprite(new AudioClip(stream));
           await avCvs?.addSprite(spr);
           addSprite2Track('2-audio', spr, '音频');
         }}

diff --git a/packages/av-cliper/src/combinator.ts b/packages/av-cliper/src/combinator.ts
@@ -443,6 +443,7 @@ function createAVEncoder(opts: {
  */
 export function createAudioTrackBuf(adFrames: number) {
   const adDataSize = adFrames * DEFAULT_AUDIO_CONF.channelCount;
+  // pcm 数据缓存区
   const chanBuf = new Float32Array(adDataSize * 3);
   let putOffset = 0;
 
@@ -456,6 +457,7 @@ export function createAudioTrackBuf(adFrames: number) {
     let readOffset = 0;
     const adCnt = Math.floor(putOffset / adDataSize);
     const rs: AudioData[] = [];
+    // 从缓存区按指定帧数获取数据构造 AudioData
     for (let i = 0; i < adCnt; i++) {
       rs.push(
         new AudioData({
@@ -473,7 +475,8 @@ export function createAudioTrackBuf(adFrames: number) {
     chanBuf.set(chanBuf.subarray(readOffset, putOffset), 0);
     putOffset -= readOffset;
 
-    if (ts - audioTs > adDuration) {
+    // 已有音频数据不足，使用占位数据填充
+    while (ts - audioTs > adDuration) {
       rs.push(
         new AudioData({
           timestamp: audioTs,
@@ -501,11 +504,12 @@ export function createAudioTrackBuf(adFrames: number) {
         chan0 += _c0;
         chan1 += _c1;
       }
+      // 合成多个素材的音频数据写入缓存区
       chanBuf[putOffset] = chan0;
       chanBuf[putOffset + 1] = chan1;
       putOffset += 2;
     }
-    // console.log(1111, { putOffset });
+    // 消费缓存区数据，生成 AudioData
     return getAudioData(ts);
   };
 }