«

基于Vue3怎么编写一个简单的播放器

时间：2024-8-4 06:40     作者：韩俊     分类： Javascript

本文小编为大家详细介绍“基于Vue3怎么编写一个简单的播放器”，内容详细，步骤清晰，细节处理妥当，希望这篇“基于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  >
        播放
      </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 
  
  @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);

标签: javascript vue

热门推荐

1 学习javascript面向对象 理解javascript对象
2 举例说明如何为JavaScript的方法参数设置默认值
3 深入JavaScript高级程序设计之对象、数组（栈方法，队列方法，重排序方法，迭代方法）
4 jQuery实现div随意拖动的实例代码(通用代码)
5 JS根据浏览器窗口大小实时动态改变网页文字大小的方法
6 基于jQuery的$.getScript方法去加载javaScript文档解析
7 js 数组操作代码集锦
8 JS获取表单中数据formdata的方法
9 Vue图片监听鼠标滑轮滚动怎么实现图片缩小放大功能
10 vscode中launch.json和task.json配置的方法是什么

日历

标签

hbase maven eclipse sybase PostgreSQL spring emcache oracle mongodb redis nginx golang java vue android ios mysql linux 微信小程序 css html php教程 javascript python php

搜索

最新文章

热门文章