怎么用Vue3写播放器

本文讲解"怎么用Vue3写播放器"，希望能够解决相关问题。

TODO

页面布局及 css 样式如下

思路：给 ”播放“ 注册点击事件，在点击事件中通过 audio 的属性及方法来判定当前歌曲是什么状态，是否播放或暂停，然后声明一个属性同步这个状态，在模板中做出判断当前应该显示 ”播放/暂停“。

关键性 api：

audio.paused：当前播放器是否为暂停状态

audio.play()：播放

audio.pause()：暂停

最后把属性及事件应用到模板中去。

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

关键性api：

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

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

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

 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 坐标。

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

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

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

抬起时：将 flag 重置。

       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

关于 "怎么用Vue3写播放器" 就介绍到此。希望多多支持编程宝库。

vue3中的ref、reactive怎么使用：本文讲解"vue3中的ref、reactive如何使用"，希望能够解决相关问题。 reactive()基本用法在 Vue3 中我们可以使用 reactive() 创建一个响应式 ...