찾다

집  >  기사  >  웹 프론트엔드  >  Vue3를 사용하여 플레이어를 작성하는 방법을 단계별로 가르쳐주세요.

Vue3를 사용하여 플레이어를 작성하는 방법을 단계별로 가르쳐주세요.

藏色散人
藏色散人앞으로
2023-03-03 15:53:432283검색

이 기사는 Vue3에 대한 관련 지식을 제공합니다. 주로 Vue3로 플레이어를 작성하는 방법에 대해 설명합니다. 관심 있는 친구들은 아래를 살펴보는 것이 모든 사람에게 도움이 되기를 바랍니다.

ps: 음악이 재생되지 않을 수 있습니다. 그 이유는 오디오 링크가 임시적이므로 수동으로 교체할 수 있기 때문입니다.

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>

재생/일시 정지 구현

css 样式如下
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');
});

实现播放/暂停

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

关键性 api：

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

audio.play()：播放

audio.pause()：暂停

<div 
  style="margin-left: 10px; color: #409eff; cursor: pointer;"
  @click="togglePlayer"> 
  {{ audioIsPlaying ? '暂停' : '播放'}}</div>

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

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);
});

实现开始/结束时间及开始时间和滚动条动态跟随播放动态变化

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

关键性api：

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

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

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

/**
 * @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);
});

实现点击进度条跳转指定播放位置

思路：给滚动条注册鼠标点击事件，每次点击的时候获取当前的 offsetX 以及滚动条的宽度，用宽度 / offsetX 最后用总时长 * 前面的商就得到了我们想要的进度，再次更新进度条即可。

关键性api：

event.offsetX：鼠标指针相较于触发事件对象的 x 坐标。

/**
 * @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 管理这个拖动的功能，侦听这个滚动条的 鼠标点击、鼠标移动、鼠标抬起事件。

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

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

抬起时：将 flag 重置。

// 是否显示可拖拽 dot// 可以在原点元素上增加 v-if 用来判定是否需要拖动功能const startSongDragDot = ref(true);useSongProgressDrag(audioEle, pgsWrapperEle, updateProgress, startSongDragDot);

最后调用这个 hook

아이디어: 클릭 이벤트를 등록하세요 "Play", 클릭 이벤트에서 audio의 속성과 메서드를 사용하여 현재 노래의 상태(재생 중인지 일시 중지되었는지)를 확인한 다음 이 상태를 동기화하는 속성을 선언하고 현재 노래가 "재생/일시 중지"를 표시해야 한다는 템플릿의 판단입니다.

핵심 API:

audio.paused: 현재 플레이어가 일시 중지되었는지 여부
🎜audio.play(): 재생 중 🎜🎜audio.pause () : Pause🎜🎜rrreee🎜마지막으로 템플릿에 속성과 이벤트를 적용합니다. 🎜rrreee

시작/종료 시간, 시작 시간 및 스크롤 막대를 실현하여 재생 역학을 동적으로 따르십시오.

🎜🎜아이디어: 현재 재생 시간과 총 지속 시간을 가져오고 그런 다음 현재 기간/총 기간을 가져오고 노래 재생 비율(스크롤 막대의 비율)을 가져옵니다. audio 요소의 timeupdate 이벤트를 수신하면 현재 시간이 변경될 때마다 DOM도 동기적으로 업데이트됩니다. 최종 재생이 완료된 후 상태가 초기화됩니다. 🎜🎜핵심 API: 🎜🎜audio.currentTime: 현재 재생 시간, 단위(초) 🎜🎜audio.duration: 총 오디오 지속 시간, 단위(초) 🎜🎜timeupdate: 이 이벤트는 currentTime이 변경될 때 트리거됩니다. 🎜🎜rrreee

진행 막대를 클릭하여 지정된 재생 위치로 이동

🎜🎜아이디어: 스크롤 막대에 대한 마우스 클릭 이벤트를 등록하고 현재 offsetX를 클릭할 때마다 및 스크롤 막대의 너비, width / offsetX를 사용하고 마지막으로 총 기간 *을 사용하여 원하는 진행률을 얻고 진행률만 업데이트합니다. 다시 바. 🎜🎜Key API: 🎜🎜event.offsetX: 트리거 이벤트 개체와 비교한 마우스 포인터의 x 좌표입니다. 🎜🎜rrreee

스크롤 막대를 드래그하려면 점을 클릭하세요.

🎜🎜아이디어: 후크를 사용하여 이 드래그 기능을 관리하고 이 스크롤 막대의 마우스 클릭, 마우스 이동 및 마우스 리프트 이벤트를 듣습니다. 🎜🎜클릭 시: 창에서 마우스의 x 좌표, 점과 창의 왼쪽 사이의 거리, 오른쪽 최대 이동 거리(폭 스크롤 막대 - 점과 창 사이의 거리) 왼쪽). 모바일이 무심코 계산을 시작하는 것을 방지하기 위해 처음에 스위치 플래그를 설정할 수 있습니다🎜🎜이동할 때: 창에서 마우스의 x 좌표를 가져옵니다. 의 x 좌표를 실시간으로 뺀 값입니다. 그런 다음 최대 이동 거리를 기준으로 판단하고 범위를 벗어나지 않도록 하십시오. 마지막으로: 총 기간 * (창의 왼쪽으로부터의 점 거리 + 계산된 x / 스크롤 막대 길이) 스크롤 막대를 업데이트하고 들어올릴 때 진행🎜🎜을 업데이트하기 위해 백분율을 얻습니다. :플래그를 재설정합니다. 🎜🎜rrreee🎜마지막으로 이 hook를 호출하세요🎜rrreee🎜[관련 권장사항: 🎜vue.js 비디오 튜토리얼🎜]🎜🎜

위 내용은 Vue3를 사용하여 플레이어를 작성하는 방법을 단계별로 가르쳐주세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
이 기사는 juejin.im에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：vue3의 포괄적인 참조 및 반응성 목록다음 기사：vue3의 포괄적인 참조 및 반응성 목록

관련 기사

더보기