如何用Vue3写播放器

const audioIsPlaying = ref(false); // 用于同步当前的播放状态const audioEle = ref(null); // audio 元素/**
* @description 播放/暂停音乐
*/const togglePlayer = () => {  if (audioEle.value) {    if (audioEle.value?.paused) {
     audioEle.value.play();
     audioIsPlaying.value = true;
   }    else {
     audioEle.value?.pause();
     audioIsPlaying.value = false;
   }
 }
};onMounted(() => {  // 页面点击的时候肯定是加载完成了，这里获取一下没毛病
 audioEle.value = document.querySelector('audio');
});

 style="margin-left: 10px; color: #409eff; cursor: pointer;"
 @click="togglePlayer">
 {{ audioIsPlaying ? '暂停' : '播放'}}

实现开始/结束时间及开始时间和滚动条动态跟随播放动态变化

思路：获取当前已经播放的时间及总时长，然后再拿当前时长 / 总时长及得到歌曲播放的百分比即滚动条的百分比。通过侦听 audio 元素的 timeupdate 事件以做到每次当前时间改变时，同步把 DOM 也进行更新。最后播放完成后把状态初始化。

关键性api：

audio.currentTime：当前的播放时间；单位(s)

audio.duration：音频的总时长；单位(s)

timeupdate：currentTime 变更时会触发该事件。

import dayjs from 'dayjs';const audioCurrentPlayTime = ref('00:00'); // 当前播放时长const audioCurrentPlayCountTime = ref('00:00'); // 总时长const pgsInnerEle = ref(null);/**
* @description 更新进度条与当前播放时间
*/const updateProgress = () => {  const currentProgress = audioEle.value!.currentTime / audioEle.value!.duration;

 pgsInnerEle.value!.style.width = `${currentProgress * 100}%`;  // 设置进度时长
 if (audioEle.value)
   audioCurrentPlayTime.value = dayjs(audioEle.value.currentTime * 1000).format('mm:ss');
};/**
* @description 播放完成重置播放状态
*/const audioPlayEnded = () => {
 audioCurrentPlayTime.value = '00:00';
 pgsInnerEle.value!.style.width = '0%';
 audioIsPlaying.value = false;
};onMounted(() => {
 pgsInnerEle.value = document.querySelector('.progress-inner');  
 // 设置总时长
 if (audioEle.value)
   audioCurrentPlayCountTime.value = dayjs(audioEle.value.duration * 1000).format('mm:ss');    
 // 侦听播放中事件
 audioEle.value?.addEventListener('timeupdate', updateProgress, false);  // 播放结束 event
 audioEle.value?.addEventListener('ended', audioPlayEnded, false);
});

实现点击进度条跳转指定播放位置

思路：给滚动条注册鼠标点击事件，每次点击的时候获取当前的 offsetX 以及滚动条的宽度，用宽度 / offsetX 最后用总时长 * 前面的商就得到了我们想要的进度，再次更新进度条即可。

关键性api：

event.offsetX：鼠标指针相较于触发事件对象的 x 坐标。

/**
* @description 点击滚动条同步更新音乐进度
*/const clickProgressSync = (event: MouseEvent) => {  if (audioEle.value) {    // 保证是正在播放或者已经播放的状态
   if (!audioEle.value.paused || audioEle.value.currentTime !== 0) {      const pgsWrapperWidth = pgsWrapperEle.value!.getBoundingClientRect().width;      const rate = event.offsetX / pgsWrapperWidth;      // 同步滚动条和播放进度
     audioEle.value.currentTime = audioEle.value.duration * rate;      updateProgress();
   }
 }
};onMounted({
 pgsWrapperEle.value = document.querySelector('.progress-wrapper');  // 点击进度条 event
 pgsWrapperEle.value?.addEventListener('mousedown', clickProgressSync, false);
});// 别忘记统一移除侦听onBeforeUnmount(() => {
 audioEle.value?.removeEventListener('timeupdate', updateProgress);
 audioEle.value?.removeEventListener('ended', audioPlayEnded);
 pgsWrapperEle.value?.removeEventListener('mousedown', clickProgressSync);
});

实现点击圆点拖拽滚动条。

思路：使用 hook 管理这个拖动的功能，侦听这个滚动条的 鼠标点击、鼠标移动、鼠标抬起事件。

点击时： 获取鼠标在窗口的 x 坐标，圆点距离窗口的 left 距离及最大的右移距离（滚动条宽度 - 圆点距离窗口的 left）。为了让移动式不随便开始计算，在开始的时候可以弄一个开关 flag

移动时： 实时获取鼠标在窗口的 x 坐标减去 点击时获取的 x 坐标。然后根据最大移动距离做出判断，不要让它越界。最后： 总时长 * (圆点距离窗口的 left + 计算得出的 x / 滚动条长度) 得出百分比更新滚动条及进度

抬起时：将 flag 重置。

/**
* @method useSongProgressDrag
* @param audioEle
* @param pgsWrapperEle
* @param updateProgress 更新滚动条方法
* @param startSongDragDot 是否开启拖拽滚动
* @description 拖拽更新歌曲播放进度
*/const useSongProgressDrag = (
 audioEle: Ref,
 pgsWrapperEle: Ref,
 updateProgress: () => void,
 startSongDragDot: Ref) => {  const audioPlayer = ref(null);  const audioDotEle = ref(null);  const dragFlag = ref(false);  const position = ref({    startOffsetLeft: 0,    startX: 0,    maxLeft: 0,    maxRight: 0,
 });  /**
  * @description 鼠标点击 audioPlayer
  */
 const mousedownProgressHandle = (event: MouseEvent) => {    if (audioEle.value) {      if (!audioEle.value.paused || audioEle.value.currentTime !== 0) {
       dragFlag.value = true;

       position.value.startOffsetLeft = audioDotEle.value!.offsetLeft;
       position.value.startX = event.clientX;
       position.value.maxLeft = position.value.startOffsetLeft;
       position.value.maxRight = pgsWrapperEle.value!.offsetWidth - position.value.startOffsetLeft;
     }
   }
   event.preventDefault();
   event.stopPropagation();
 };  /**
  * @description 鼠标移动 audioPlayer
  */
 const mousemoveProgressHandle = (event: MouseEvent) => {    if (dragFlag.value) {      const clientX = event.clientX;      let x = clientX - position.value.startX;      if (x > position.value.maxRight)
       x = position.value.maxRight;      if (x < -position.value.maxLeft)
       x = -position.value.maxLeft;      const pgsWidth = pgsWrapperEle.value?.getBoundingClientRect().width;      const reat = (position.value.startOffsetLeft + x) / pgsWidth!;

     audioEle.value!.currentTime = audioEle.value!.duration * reat;      updateProgress();
   }
 };  /**
  * @description 鼠标取消点击
  */
 const mouseupProgressHandle = () => dragFlag.value = false;  onMounted(() => {    if (startSongDragDot.value) {
     audioPlayer.value = document.querySelector('.audio-player');
     audioDotEle.value = document.querySelector('.progress-dot');      // 在捕获中去触发点击 dot 事件. fix: 点击原点 offset 回到原点 bug
     audioDotEle.value?.addEventListener('mousedown', mousedownProgressHandle, true);
     audioPlayer.value?.addEventListener('mousemove', mousemoveProgressHandle, false);      document.addEventListener('mouseup', mouseupProgressHandle, false);
   }
 });  onBeforeUnmount(() => {    if (startSongDragDot.value) {
     audioPlayer.value?.removeEventListener('mousedown', mousedownProgressHandle);
     audioPlayer.value?.removeEventListener('mousemove', mousemoveProgressHandle);      document.removeEventListener('mouseup', mouseupProgressHandle);
   }
 });
};

最后调用这个 hook

// 是否显示可拖拽 dot// 可以在原点元素上增加 v-if 用来判定是否需要拖动功能const startSongDragDot = ref(true);useSongProgressDrag(audioEle, pgsWrapperEle, updateProgress, startSongDragDot);

以上就是“如何用Vue3写播放器”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。