(#692) Fix duration mismatch between audio and metadata (#818)

* (#692) Fix duration mismatch between audio and metadata

When an audio file is played and the duration from the passed properties
does not match the duration of the actual audio file, e.g. the duration
was rounded, the progress bar drifts outside of the total width of the
VWaveform dimensions.

On smaller width screens or larger tracks it is less noticeable but when
the audio track is small and the screen width is large that percentage
adds up to 10s or more of pixels which is where the bug crops up.

This commit fixes this issue by by using the audio context's duration
parameter and falling back to less specific sources for duration.

* #692) Set duration after audio is loaded

Before this commit the duration would be set based on the audio context
state as the page was loaded. Since the audio file is never loaded by
the time we check for the duration of the audio object, it is always
null thus defaulting to the metadata for audio duration always.

This commit adds a `durationchange` listener while initializing the
audio object and sets the duration in a new `audioDuration` property
which the computed `duration` property watches.

src/components/VAudioTrack/VAudioTrack.vue

@@ -129,6 +129,7 @@ export default defineComponent({
 
     const status = ref('paused')
     const currentTime = ref(0)
+    const audioDuration = ref(null)
 
     const initLocalAudio = () => {
       // Preserve existing local audio if we plucked it from the global active audio
@@ -138,6 +139,7 @@ export default defineComponent({
       localAudio.addEventListener('pause', setPaused)
       localAudio.addEventListener('ended', setPlayed)
       localAudio.addEventListener('timeupdate', setTimeWhenPaused)
+      localAudio.addEventListener('durationchange', setDuration)
 
       /**
        * Similar to the behavior in the global audio track,
@@ -221,6 +223,9 @@ export default defineComponent({
         }
       }
     }
+    const setDuration = () => {
+      audioDuration.value = localAudio?.duration
+    }
 
     /**
      * If we're transforming the globally active audio
@@ -243,6 +248,7 @@ export default defineComponent({
       localAudio.removeEventListener('pause', setPaused)
       localAudio.removeEventListener('ended', setPlayed)
       localAudio.removeEventListener('timeupdate', setTimeWhenPaused)
+      localAudio.removeEventListener('durationchange', setDuration)
 
       if (
         route.value.params.id == props.audio.id ||
@@ -290,7 +296,9 @@ export default defineComponent({
 
     /* Timekeeping */
 
-    const duration = computed(() => (props.audio?.duration ?? 0) / 1e3) // seconds
+    const duration = computed(
+      () => audioDuration.value ?? props.audio?.duration / 1e3 ?? 0 // seconds
+    )
 
     const message = computed(() => store.state.active.message)
 

src/components/VAudioTrack/VGlobalAudioTrack.vue

@@ -113,6 +113,7 @@ export default defineComponent({
 
     const status = ref('paused')
     const currentTime = ref(0)
+    const audioDuration = ref(null)
 
     const setPlaying = () => {
       status.value = 'playing'
@@ -133,6 +134,9 @@ export default defineComponent({
         }
       }
     }
+    const setDuration = () => {
+      audioDuration.value = activeAudio.obj.value?.duration
+    }
 
     const updateTimeLoop = () => {
       if (activeAudio.obj.value && status.value === 'playing') {
@@ -149,7 +153,9 @@ export default defineComponent({
         audio.addEventListener('pause', setPaused)
         audio.addEventListener('ended', setPlayed)
         audio.addEventListener('timeupdate', setTimeWhenPaused)
+        audio.addEventListener('durationchange', setDuration)
         currentTime.value = audio.currentTime
+        audioDuration.value = audio.duration
 
         /**
          * By the time the `activeAudio` is updated and a rerender
@@ -179,6 +185,7 @@ export default defineComponent({
           audio.removeEventListener('pause', setPaused)
           audio.removeEventListener('ended', setPlayed)
           audio.removeEventListener('timeupdate', setTimeWhenPaused)
+          audio.removeEventListener('durationchange', setDuration)
         })
       },
       { immediate: true }
@@ -189,7 +196,9 @@ export default defineComponent({
 
     /* Timekeeping */
 
-    const duration = computed(() => (props.audio?.duration ?? 0) / 1e3) // seconds
+    const duration = computed(
+      () => audioDuration.value ?? props.audio?.duration / 1e3 ?? 0
+    ) // seconds
 
     const message = computed(() => store.state.active.message)