温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何用Vue3写播放器

发布时间:2023-03-06 09:23:11 阅读:110 作者:iii 栏目:编程语言
Vue开发者专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

今天小编给大家分享一下如何用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 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)

timeupdatecurrentTime 变更时会触发该事件。

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写播放器”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×