手把手教你用Vue3寫播放器

本篇文章給大家帶來了關於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.play()：播放
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)
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);/**
 * @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<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);
    }
  });
};
登入後複製

最後呼叫這個 hook

// 是否顯示可拖拽 dot// 可以在原點元素上增加 v-if 用來判定是否需要拖動功能const startSongDragDot = ref(true);useSongProgressDrag(audioEle, pgsWrapperEle, updateProgress, startSongDragDot);
登入後複製

【相關推薦：】

以上就是手把手教你用Vue3寫播放器的詳細內容，更多請關注TW511.COM其它相關文章！