Teach you step by step how to write a player using Vue3

This article brings you relevant knowledge about Vue3. It mainly talks about how to write a player with Vue3. Friends who are interested can take a look at it together. I hope Helpful to everyone.

ps: Music may fail to play. The reason is that the audio link is temporary and can be replaced manually.

#TODO

Realize play/pause;
• Realize start/end time, start time and scroll bar to dynamically change with the playback;
• Realize click on the progress bar to jump to the specified playback Position;
• Click the dot to drag the scroll bar.

Page layout and

css The style is as follows

<template>
  <div>
    <audio></audio>
    <!-- 进度条 -->
    <div>
      <span>00:00</span>
      <div>
        <div>
          <div></div>
        </div>
      </div>
      <span>00:00</span>
      <!-- 播放/暂停 -->
      <div>
        播放      </div>
    </div>
  </div></template><style>
  * { 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>

Realize play/pause

Idea: Register click event for "Play" , in the click event, use the attributes and methods of

audio to determine the status of the current song, whether to play or pause, then declare an attribute to synchronize this status, and make a judgment in the template that the current song should display "Play/ pause".

Key api:

audio.paused: Whether the current player is paused

audio.play() ：Play

audio.pause()：Pause

const audioIsPlaying = ref(false); // 用于同步当前的播放状态const audioEle = ref<htmlaudioelement>(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');
});</htmlaudioelement>

Finally apply the attributes and events to the template.

<div> 
  {{ audioIsPlaying ? '暂停' : '播放'}}</div>

Realize the start/end time and start time and scroll bar to dynamically follow the dynamic changes of playback

Idea: Get the current played time and total duration, and then get the current duration/ The total duration and the percentage of the song played are the percentage of the scroll bar. By listening to the

timeupdate event of the audio element, every time the current time changes, the DOM is also updated synchronously. After the final playback is completed, the state is initialized.

Key api:

audio.currentTime: Current playback time; unit (s)

audio.duration : The total duration of the audio; unit (s)

timeupdate : currentTime This event will be triggered when it changes.

import dayjs from 'dayjs';const audioCurrentPlayTime = ref('00:00'); // 当前播放时长const audioCurrentPlayCountTime = ref('00:00'); // 总时长const pgsInnerEle = ref<htmldivelement>(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);
});</htmldivelement>

Realize clicking on the progress bar to jump to the specified playback position

Idea: register a mouse click event for the scroll bar, and obtain the current

offsetX each time it is clicked And the width of the scroll bar, use width / offsetX Finally, use the total duration * The previous quotient will get the progress we want, just update the progress bar again.

Key api:

event.offsetX: The x coordinate of the mouse pointer compared to the triggering event object.

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

Click the dot to drag the scroll bar.

Idea: Use

hook to manage this dragging function and listen to the mouse click, mouse movement, and mouse lift events of this scroll bar.

When clicked: Get the

x coordinates of the mouse in the window, the left distance of the dot from the window and the maximum right movement distance (scroll bar width - dot distance from the window of left). In order to prevent the mobile from starting calculation casually, you can set a switch at the beginning flag

When moving: Get the

x coordinates of the mouse in the window in real time minus the click time Get the x coordinates. Then make a judgment based on the maximum moving distance and don't let it go out of bounds. Finally: Total duration* (x calculated from the distance between the dot and the left of the window / length of the scroll bar) The percentage is obtained to update the scroll bar and progress when

is lifted :Reset

flag.

/**
 * @method useSongProgressDrag
 * @param audioEle
 * @param pgsWrapperEle
 * @param updateProgress 更新滚动条方法
 * @param startSongDragDot 是否开启拖拽滚动
 * @description 拖拽更新歌曲播放进度
 */const useSongProgressDrag = (
  audioEle: Ref<htmlaudioelement>,
  pgsWrapperEle: Ref<htmldivelement>,
  updateProgress: () => void,
  startSongDragDot: Ref<boolean>) => {  const audioPlayer = ref<htmldivelement>(null);  const audioDotEle = ref<htmldivelement>(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  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);
    }
  });
};</htmldivelement></htmldivelement></boolean></htmldivelement></htmlaudioelement>

Finally call this

hook

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

[Related recommendations:

vue.js video tutorial]