vue3 获取媒体audio总时长遇到的坑

audio

我们可以用audio属性duration获取音频的总时长。
更多见MDN audio

模板

<template>
  <audio
    ref="audioRef"
    src="http://m7.music.126.net/20210703093929/04ededfb89377755b7c4678a9c84e35f/ymusic/0fd6/4f65/43ed/a8772889f38dfcb91c04da915b301617.mp3"
    controls
  >
    您的浏览器暂不支持audio
  </audio>
</template>

遇到的坑

获取audio总时长，首先我想到的是利用ref获取dom节点,在利用nextTick在dom节点挂在完毕后获取audio的属性duration。

<script>
import { nextTick, ref } from "vue";
export default {
  setup() {
    const audioRef = ref(null);
    const durationRef = ref(0);
    nextTick(() => {
      console.log(audioRef.value);
      console.log(audioRef.value.duration);
    });
    return { durationRef, audioRef };
  },
};
</script>

得到下图结果

虽然获取到了audio节点,但是它身上的属性duration确实NaN。

解决方案 利用canplay钩子函数回调中访问duration属性获得总时长

canplay 浏览器已经可以播放媒体，但是预测已加载的数据不足以在不暂停的情况下顺利将其播放到结尾（即预测会在播放时暂停以获取更多的缓冲区内容）

<template>
  <audio
    ref="audioRef"
    src="http://m7.music.126.net/20210703093929/04ededfb89377755b7c4678a9c84e35f/ymusic/0fd6/4f65/43ed/a8772889f38dfcb91c04da915b301617.mp3"
    controls
    @canplay="getDuration"
  >
    您的浏览器暂不支持audio
  </audio>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const audioRef = ref(null);
    const durationRef = ref(0);
    const getDuration = () => {
      durationRef.value = audioRef.value.duration;
      console.log(durationRef.value);
    };
    return { durationRef, audioRef, getDuration };
  },
};
</script>

结果

好了，现在就可以正确的获得音频总时长了