这篇文章主要为大家详细介绍了如何基于Vue3编写一个简单的播放器，文中的示例代码讲解详细，对我们学习Vue3有一定的帮助，需要的可以参考一下
TODO
- 实现播放/暂停；
- 实现开始/结束时间及开始时间和滚动条动态跟随播放动态变化；
- 实现点击进度条跳转指定播放位置；
- 实现点击圆点拖拽滚动条。
页面布局及 css 样式如下
00:0000:00播放
实现播放/暂停
思路：给 ”播放“ 注册点击事件，在点击事件中通过 audio 的属性及方法来判定当前歌曲是什么状态，是否播放或暂停，然后声明一个属性同步这个状态，在模板中做出判断当前应该显示 ”播放/暂停“。
关键性 api：
audio.paused：当前播放器是否为暂停状态
audio.play()：播放
audio.pause()：暂停
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'); });
最后把属性及事件应用到模板中去。
{{ 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编写一个简单的播放器的详细内容，更多关于Vue3播放器的资料请关注0133技术站其它相关文章！
以上就是基于Vue3编写一个简单的播放器的详细内容，更多请关注0133技术站其它相关文章！
