fix: 🐛 engine example audio play

Author: xzdarcy

docs/engine/engine-basic/audioControl.ts

@@ -1,14 +1,17 @@
-import { Howl } from "howler";
-import { TimelineEngine } from "@xzdarcy/react-timeline-editor";
+import { Howl } from 'howler';
+import { TimelineEngine } from '@xzdarcy/react-timeline-editor';
 
 class AudioControl {
   cacheMap: Record<string, Howl> = {};
-  listenerMap: Record<string, {
-    time?: (data: {time: number}) => void
-    rate?: (data: {rate: number}) => void
-  }> = {};
+  listenerMap: Record<
+    string,
+    {
+      time?: (data: { time: number }) => void;
+      rate?: (data: { rate: number }) => void;
+    }
+  > = {};
 
-  start(data: { id: string; engine: TimelineEngine, src: string; startTime: number; time: number }) {
+  start(data: { id: string; engine: TimelineEngine; src: string; startTime: number; time: number }) {
     const { id, src, startTime, time, engine } = data;
     let item: Howl;
     if (this.cacheMap[id]) {
@@ -19,8 +22,10 @@ class AudioControl {
     } else {
       item = new Howl({ src, loop: true, autoplay: true });
       this.cacheMap[id] = item;
-      item.rate(engine.getPlayRate());
-      item.seek((time - startTime) % item.duration());
+      item.on('load', () => {
+        item.rate(engine.getPlayRate());
+        item.seek((time - startTime) % item.duration());
+      });
     }
 
     const timeListener = (data: { time: number }) => {
@@ -31,9 +36,9 @@ class AudioControl {
       const { rate } = data;
       item.rate(rate);
     };
-    if(!this.listenerMap[id])this.listenerMap[id] = {};
-    engine.on("afterSetTime", timeListener);
-    engine.on("afterSetPlayRate", rateListener);
+    if (!this.listenerMap[id]) this.listenerMap[id] = {};
+    engine.on('afterSetTime', timeListener);
+    engine.on('afterSetPlayRate', rateListener);
     this.listenerMap[id].time = timeListener;
     this.listenerMap[id].rate = rateListener;
   }
@@ -43,13 +48,12 @@ class AudioControl {
     if (this.cacheMap[id]) {
       const item = this.cacheMap[id];
       item.stop();
-      if(this.listenerMap[id]) {
-        this.listenerMap[id].time && engine.off("afterSetTime", this.listenerMap[id].time);
-        this.listenerMap[id].rate && engine.off("afterSetPlayRate", this.listenerMap[id].rate);
-        delete this.listenerMap[id]
+      if (this.listenerMap[id]) {
+        this.listenerMap[id].time && engine.off('afterSetTime', this.listenerMap[id].time);
+        this.listenerMap[id].rate && engine.off('afterSetPlayRate', this.listenerMap[id].rate);
+        delete this.listenerMap[id];
       }
     }
-
   }
 }
 

docs/engine/engine-standalone/audioControl.ts

@@ -1,5 +1,5 @@
-import { Howl } from 'howler';
 import { TimelineEngine } from '@xzdarcy/react-timeline-editor';
+import { Howl } from 'howler';
 
 class AudioControl {
   cacheMap: Record<string, Howl> = {};
@@ -22,8 +22,10 @@ class AudioControl {
     } else {
       item = new Howl({ src, loop: true, autoplay: true });
       this.cacheMap[id] = item;
-      item.rate(engine.getPlayRate());
-      item.seek((time - startTime) % item.duration());
+      item.on('load', () => {
+        item.rate(engine.getPlayRate());
+        item.seek((time - startTime) % item.duration());
+      });
     }
 
     const timeListener = (data: { time: number }) => {