今天小编给大家分享一下如何用vue3写播放器的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。TODO实现播放/暂停;实现开始/
今天小编给大家分享一下如何用vue3写播放器的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
TODO
实现播放/暂停;
实现开始/结束时间及开始时间和滚动条动态跟随播放动态变化;
实现点击进度条跳转指定播放位置;
实现点击圆点拖拽滚动条。
页面布局及 CSS
样式如下
<template>
<div class="song-item">
<audio src="" />
<!-- 进度条 -->
<div class="audio-player">
<span>00:00</span>
<div class="progress-wrapper">
<div class="progress-inner">
<div class="progress-dot" />
</div>
</div>
<span>00:00</span>
<!-- 播放/暂停 -->
<div style="margin-left: 10px; color: #409eff; cursor: pointer;" >
播放 </div>
</div>
</div></template><style lang="scss">
* { font-size: 14px; } .song-item { display: flex; flex-direction: column; justify-content: center; height: 100px; padding: 0 20px; transition: all ease .2s; border-bottom: 1px solid #DDD;
.audio-player { display: flex; height: 18px; margin-top: 10px; align-items: center; font-size: 12px; color: #666; .progress-wrapper { flex: 1; height: 4px; margin: 0 20px 0 20px; border-radius: 2px; background-color: #e9e9eb; cursor: pointer; .progress-inner { position: relative; width: 0%; height: 100%; border-radius: 2px; background-color: #409eff; .progress-dot { position: absolute; top: 50%; right: 0; z-index: 1; width: 10px; height: 10px; border-radius: 50%; background-color: #409eff; transfORM: translateY(-50%);
}
}
}
}
}</style>
思路:给 ”播放“ 注册点击事件,在点击事件中通过
audio
的属性及方法来判定当前歌曲是什么状态,是否播放或暂停,然后声明一个属性同步这个状态,在模板中做出判断当前应该显示 ”播放/暂停“。关键性 api:
audio.paused
:当前播放器是否为暂停状态
audio.play()
:播放
audio.pause()
:暂停
const audioIsPlaying = ref(false); // 用于同步当前的播放状态const audioEle = ref<htmlAudioElement | null>(null); // audio 元素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');
});
最后把属性及事件应用到模板中去。
<div
style="margin-left: 10px; color: #409eff; cursor: pointer;"
@click="togglePlayer">
{{ audioIsPlaying ? '暂停' : '播放'}}</div>
思路:获取当前已经播放的时间及总时长,然后再拿当前时长 / 总时长及得到歌曲播放的百分比即滚动条的百分比。通过侦听
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<HTMLDivElement | null>(null);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');
};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 坐标。
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
重置。
const useSongProgressDrag = (
audioEle: Ref<HTMLAudioElement | null>,
pgsWrapperEle: Ref<HTMLDivElement | null>,
updateProgress: () => void,
startSongDragDot: Ref<boolean>) => { const audioPlayer = ref<HTMLDivElement | null>(null); const audioDotEle = ref<HTMLDivElement | null>(null); const dragFlag = ref(false); const position = ref({ startOffsetLeft: 0, startX: 0, maxLeft: 0, maxRight: 0,
});
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();
};
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();
}
};
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写播放器”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网精选频道。
--结束END--
本文标题: 如何用Vue3写播放器
本文链接: https://www.lsjlt.com/news/350698.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0