這篇文章為大家帶來了關於Vue3的相關知識，其中主要跟大家聊一聊怎麼用Vue3寫個播放器，感興趣的朋友下面一起來看一下吧，希望對大家有幫助。
ps：音樂可能播放失敗。原因是 audio 的連結是臨時的，手動替換下即可。
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.pause()：暫停最後把屬性及事件應用到模板中去。const audioIsPlaying = ref(false); // 用于同步当前的播放状态const audioEle = ref<HTMLAudioElement | null>(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'); });登入後複製實現開始/結束時間及開始時間和捲軸動態跟隨播放動態變化<div style="margin-left: 10px; color: #409eff; cursor: pointer;" @click="togglePlayer"> {{ audioIsPlaying ? '暂停' : '播放'}}</div>登入後複製audio
想法：取得目前已播放的時間及總時長，然後再拿當前時長/總長度及得到歌曲播放的百分比即滾動條的百分比。透過偵聽元素的
timeupdate事件以做到每次目前時間改變時，同步把 DOM 也更新。最後播放完成後把狀態初始化。關鍵性api：
audio.currentTime：目前的播放時間；單位(s)
以及滾動條的寬度，用寬度/
timeupdate：currentTime變更時會觸發該事件。實現點擊進度條跳轉指定播放位置import dayjs from 'dayjs';const audioCurrentPlayTime = ref('00:00'); // 当前播放时长const audioCurrentPlayCountTime = ref('00:00'); // 总时长const pgsInnerEle = ref<HTMLDivElement | null>(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
想法：給滾動條註冊滑鼠點擊事件，每次點擊的時候獲取當前的
座標。然後根據最大移動距離做出判斷，不要讓它越界。最後： 總時長* (圓點距離視窗的關鍵性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#移動時： 即時取得滑鼠在視窗的
xx# 座標減去點擊時取得的
left 計算得出的x
抬起時：將flag
重置。
/**
* @method useSongProgressDrag
* @param audioEle
* @param pgsWrapperEle
* @param updateProgress 更新滚动条方法
* @param startSongDragDot 是否开启拖拽滚动
* @description 拖拽更新歌曲播放进度
*/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,
}); /**
* @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);
}
});
};// 是否显示可拖拽 dot// 可以在原点元素上增加 v-if 用来判定是否需要拖动功能const startSongDragDot = ref(true);useSongProgressDrag(audioEle, pgsWrapperEle, updateProgress, startSongDragDot);
以上是手把手教你用Vue3寫播放器的詳細內容。更多資訊請關注PHP中文網其他相關文章！
