返回顶部
首页 > 资讯 > 精选 >如何用Vue3写播放器
  • 186
分享到

如何用Vue3写播放器

2023-07-05 09:07:06 186人浏览 泡泡鱼
摘要

今天小编给大家分享一下如何用vue3写播放器的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。TODO实现播放/暂停;实现开始/

今天小编给大家分享一下如何用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 元素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);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');
};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 坐标。

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 重置。

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

--结束END--

本文标题: 如何用Vue3写播放器

本文链接: https://www.lsjlt.com/news/350698.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何用Vue3写播放器
    今天小编给大家分享一下如何用Vue3写播放器的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。TODO实现播放/暂停;实现开始/...
    99+
    2023-07-05
  • 手把手教你用Vue3写播放器
    TODO实现播放/暂停;实现开始/结束时间及开始时间和滚动条动态跟随播放动态变化;实现点击进度条跳转指定播放位置;实现点击圆点拖拽滚动条。页面布局及 css 样式如下<template> <div class=&quo...
    99+
    2023-05-14
    vue3
  • 基于Vue3编写一个简单的播放器
    目录TODO实现播放/暂停实现开始/结束时间及开始时间和滚动条动态跟随播放动态变化实现点击进度条跳转指定播放位置实现点击圆点拖拽滚动条TODO 实现播放/暂停;实现开始/结束时间及开...
    99+
    2023-03-02
    Vue3实现播放器 Vue3播放器 Vue播放器
  • vue3如何使用Facebook嵌入式视频播放器API
    本篇内容主要讲解“vue3如何使用Facebook嵌入式视频播放器API”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue3如何使用Facebook嵌入式视频播放器API”吧!正文Facebo...
    99+
    2023-07-06
  • 如何使用Vue3+TS实现语音播放组件
    这篇文章主要介绍如何使用Vue3+TS实现语音播放组件,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!该功能将使用vue3 + TS来实现语音播放组件,使用什么技术不重要,重要的是看懂了核心逻辑后,通过原生js、rea...
    99+
    2023-06-29
  • 如何利用Python编写本地音乐播放器
    这篇文章主要为大家展示了“如何利用Python编写本地音乐播放器”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何利用Python编写本地音乐播放器”这篇文章吧。先上完整代码:修改文件夹路径即可...
    99+
    2023-06-29
  • windows自带播放器不能播放如何解决
    如果 Windows 自带的播放器无法播放视频或音频文件,可以尝试以下解决方法:1. 确保文件格式受支持:Windows Media...
    99+
    2023-09-20
    windows
  • windows播放器无法播放视频如何解决
    如果你在Windows播放器中遇到无法播放视频的问题,可以尝试以下解决方案:1. 确保视频文件格式支持:检查视频文件的格式是否受到W...
    99+
    2023-09-07
    windows
  • win10自带播放器无法播放如何解决
    如果Windows 10自带的播放器无法播放某个视频文件,可以尝试以下解决方法:1. 确保视频文件没有损坏:尝试在其他播放器上打开该...
    99+
    2023-10-08
    win10
  • 如何让用Python写一个语音播放软件
    如何让用Python写一个语音播放软件,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。单位经常使用广播进行临时事项的通知(将文字转换为语音然后通过功放广播),但是市面上多数语...
    99+
    2023-06-17
  • 怎么写一个vue播放器
    随着互联网的迅速发展,音视频播放成为了人们日常生活中不可或缺的一部分。为了让用户能够更加方便地播放音视频内容,开发一个高质量的播放器已经成为了许多开发者的梦想。本文将讨论如何使用Vue框架来构建一个前端音视频播放器。确定需求和功能在开发一个...
    99+
    2023-05-24
  • javascript如何播放
    JavaScript是一种流行的编程语言,它是Web开发中不可或缺的一部分。除了它的广泛用途,JavaScript对于添加交互性和动态性到网页上也非常有用。而其中最重要的的元素之一就是多媒体,包括音频和视频。本文将介绍如何使用JavaScr...
    99+
    2023-05-17
  • 利用Python编写本地音乐播放器
    先上完整代码: 修改文件夹路径即可运行 # -*- encoding: utf-8 -*- ''' @Description:       : @Date     :2022/03/...
    99+
    2024-04-02
  • 使用JavaScript编写一个音乐播放器
    这篇文章主要介绍了使用JavaScript编写一个音乐播放器,此处通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考价值,需要的朋友可以参考下:JavaScript是什么JavaScript是一种直译式的脚本语言,其解释器被...
    99+
    2023-06-06
  • vue3怎么使用Facebook嵌入式视频播放器API
    正文Facebook 嵌入式视频播放器 API是 JavaScript 版 Facebook SDK 提供的客户端功能。可以在自己网站上播放Facebook视频。开始使用先引入 Facebook SDK<script async de...
    99+
    2023-05-14
    API Facebook Vue3
  • 小程序开发中如何使用后台播放器播放音乐
    本文将为大家详细介绍“小程序开发中如何使用后台播放器播放音乐”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“小程序开发中如何使用后台播放器播放音乐”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容...
    99+
    2023-06-26
  • 网页上如何实现播放mp3或flash等播放器
    这篇文章主要为大家展示了“网页上如何实现播放mp3或flash等播放器”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“网页上如何实现播放mp3或flash等播放器”这篇文章吧。代码如下:<o...
    99+
    2023-06-08
  • vue3中实现音频播放器APlayer的方法
    目录前言:         官方:      &nb...
    99+
    2022-11-13
    vue3音频播放器APlayer vue3音频播放器
  • 电脑自带播放器无法播放视频如何解决
    这篇文章主要介绍“电脑自带播放器无法播放视频如何解决”,在日常操作中,相信很多人在电脑自带播放器无法播放视频如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”电脑自带播放器无法播放视频如何解决”的疑惑有所...
    99+
    2023-06-27
  • 如何使用phonegap播放音频
    小编给大家分享一下如何使用phonegap播放音频,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!实例如下:<!DOCTYP...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作