vite+vue3 实现组件控制audio时长

首先，你需要在 Vue3 中使用 `ref` 来引用 `audio` 元素，以便在组件中对其进行操作。然后，你可以使用 `mounted()` 钩子函数来监听 `audio` 元素加载完成，并在加载完成后获取其时长并将其存储在组件的数据中。最后，你可以在模板中使用 `{{}}` 语法来展示 `audio` 的时长。

以下是一个简单的示例：

<template>
  <div>
    <audio ref="audio" src="your-audio-source"></audio>
    <p>Audio duration: {{ duration }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'AudioPlayer',
  setup() {
    const audioRef = ref(null);
    const duration = ref(0);

    const setDuration = () => {
      duration.value = audioRef.value.duration;
    };

    return {
      audioRef,
      duration,
      setDuration,
    };
  },
  mounted() {
    this.audioRef.addEventListener('loadedmetadata', this.setDuration);
  },
};
</script>

在上面的示例中，我们使用 `ref` 创建了一个 `audioRef` 引用，并通过 `mounted()` 钩子函数监听了 `loadedmetadata` 事件以获取 `audio` 的时长。然后，我们将时长存储在组件的 `duration` 数据中，并在模板中使用 `{{ duration }}` 展示时长。