Merge pull request #134 from staskobzar/avwave-slider-change

[#133] fix playtime position for AVWaveform
staskobzar · Apr 8, 2023 · 586b041 · 586b041
2 parents 7a32f1f + b2cffc5
commit 586b041
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/docs/assets/index.15d6f347.js → docs/assets/index.6dda6766.js b/docs/assets/index.15d6f347.js → docs/assets/index.6dda6766.js
diff --git a/docs/index.html b/docs/index.html
@@ -8,7 +8,7 @@
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
   <title>Vue audio visual plugin demo</title>
-  <script type="module" crossorigin src="/vue-audio-visual/assets/index.15d6f347.js"></script>
+  <script type="module" crossorigin src="/vue-audio-visual/assets/index.6dda6766.js"></script>
 </head>
 
 <body>

diff --git a/src/composables/useAVWaveform.ts b/src/composables/useAVWaveform.ts
@@ -10,7 +10,7 @@ export function useAVWaveform<T extends object>(
   canvas: Ref<HTMLCanvasElement | null>,
   props: T,
   fetchOpts: CreateFetchOptions = {}
-){
+) {
   const p = new Waveform(props as PropsWaveformType)
 
   const ctx = useCanvasContext(canvas, p)
@@ -24,6 +24,12 @@ export function useAVWaveform<T extends object>(
 
   useEventListener(player, 'play', () => resume())
   useEventListener(player, 'pause', () => pause())
+  useEventListener(player, 'timeupdate', () => {
+    const audio = resolveUnref(player)
+    if (!audio) return
+    p.currentTime = audio.currentTime
+    draw(ctx, p)
+  })
   useEventListener(canvas, 'click', (e: Event) => {
     if (!p.playtimeClickable) return
     const audio = resolveUnref(player)
@@ -45,7 +51,7 @@ export function draw(canvas: Ref<CanvasRenderingContext2D | null>, p: Waveform)
     ctx.lineWidth = lw
     ctx.strokeStyle = color
     ctx.beginPath()
-    for (;x < to;x++) {
+    for (; x < to; x++) {
       ctx.moveTo(x, peaks[x][0])
       ctx.lineTo(x, peaks[x][1])
     }