位置: 编程技术 - 正文

vue-music关于Player播放器组件详解(vue music)

编辑:rootadmin

推荐整理分享vue-music关于Player播放器组件详解(vue music),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue音乐,vue music,vuevideoplayer,vuevideoplayer,vue实现音乐播放器,vue music,vue里的音乐会侵权吗,vue音乐播放列表,内容如对您有帮助,希望把文章链接给更多的朋友!

本文实例为大家分享了关于Player播放器组件的具体内容,供大家参考,具体内容如下

迷你播放器:

1.播放器组件会在各个页面的情况下会打开。 首先在vuex state.js 中定义全局的播放器状态

2.进入播放器页面时获取播放列表数据,改变播放状态 在music-list列表中打开

在song-list 组件中派发事件到父组件,传入当前歌曲的信息和索引

在music-list 组件中接受派发事件。

3. 如果commit 多个状态在actions 里设置

4. 在music-list 组件中 用mapActions提交 改变值

5.在palyer 中获取vuex 全局状态,赋值状态到相应位置(代码为完整代码,对照后面讲解慢慢理解)

打开播放器的状态

注意:不可在组件中直接赋值改版vuex 中的状态 this.fullScreen = false 需要通过mutations 改变,定义mutation-types 和mutations 然后 用vuex的 mapMutations 代理方法调用

vue-music关于Player播放器组件详解(vue music)

设置点击播放按钮方法

设置点击播放上一首和下一首按钮方法。用mapGetters 获取currentIndex 的值(加一或减一) 并改变,从而改变 currentSong 的状态,监听切换播放。判断播放列表界限重置。

监听audio 元素标签的canpaly 事件,当歌曲加载就绪 和 error 事件,当歌曲发生错误的时候,做用户体验,防止用户快速切换导致报错。

设置songReady 标志位 如果歌曲没有准备就绪,点击下一首的时候直接return false

进度条

audio元素监听 timeupdate 事件获取当前播放时间的 可读写属性 时间戳。用formt做格式化时间处理,(_pad 为补零函数 )

获取音频总时长 currentSong.duration

建立progress-bar 组件 接收pencent 进度参数,设置进度条宽度和小球的位置。player组件 设置计算属性percent

progress-bar 组件

设置拖动

在进度条小按钮progressBtn 上添加touchstart,touchmove,touchend 事件监听方法,事件添加 prevent 防止拖动默认浏览器行为,获取拖动的信息进行计算

在实例上创建一个touch 对象维护不同的回调之间的通讯共享状态信息。 touchstart事件方法中 ,首先设置this.touch.initated为true,表示拖动开始。 记录开始点击位置 e.touches[0].pageX 存到 touch 对象上,记录当前的进度宽度。

在touchmove 中首先判断 是否先进入了 touchstart 方法,计算得到 移动的位置 减去 点击开始的位置的 偏移量长度。 let deltax = e.touches[0].pageX - this.touch.startX

就可以 设置进度条 已有的长度加上偏移量长度。最大不能超过父级progressbar 的宽度

调用this._offset(offsetWidth) 方法设置进度条宽度

在touchend 事件方法中将 this.touch.initated 设置为false,表示拖动结束,并派发事件到player 组件将audio的currentTime 值设置为正确值,参数为pencent

在progressbar 中增加点击事件,调用this._offset(e.offsetX),并且派发事件

标签: vue music

本文链接地址:https://www.jiuchutong.com/biancheng/378927.html 转载请保留说明!

上一篇:关于angularJs清除浏览器缓存的方法(angularjs删除数组元素)

下一篇:解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题(解决在基层)

  • 过头税产生的根源
  • 以前年度费用退回怎么做账
  • 公司向个人借款不还如何处理
  • 什么经营范围可以开茶叶发票
  • 有两处收入的怎么报个税汇算清缴
  • 企业注销其他应付款可以转入未分配利润吗
  • 收到发票未付款怎么处理
  • 开票系统里红字发票怎么开
  • 金税盘坏了更换需要几天
  • 房地产企业预缴土地增值税
  • 广告公司好进吗
  • 多付的货款怎么追回
  • 影视公司招演员
  • 收回赔款会计分录
  • 工资手续费可以在发放里扣除吗
  • 企业外购的房屋建筑物是否属于非房地产企业
  • 营改增阶段
  • 发票不能开怎么回事
  • 免税发票上税率是多少
  • 所得税季报季末从业人数怎么填
  • 收到发票后怎么处理
  • 利润表中利润归还投资
  • 当无法取得对应报价时,将以即时现价报单
  • 财务费用算营业利润吗
  • 滴滴出行电子发票备注怎么写
  • 抄税和申报是一回事吗
  • 三险一金专项扣除怎么查
  • 已经计提的税金怎么做账
  • mac怎么设置不自动开机
  • 增值税专用发票上注明的价款含税吗
  • wrme.exe是什么
  • 阿查法拉亚盆地牡蛎
  • 建筑企业分项目信息采集表怎么填
  • 在Windowsserver2019环境下,配置IP地址使用
  • 生产成本和库存商品的区别
  • php测验
  • chatgpt的多种免费使用方式
  • transformer for
  • 增值税发票丢失罚款多少
  • 客运收费标准
  • 坏账损失计入损益表
  • 报税营业成本包括什么
  • 小规模申请一般纳税人的条件
  • 发票校验码的作用
  • 不动产投资应该怎么做账
  • php屏蔽ip
  • 长期挂账的应付款怎么处理
  • 餐饮个体户如何申请开票
  • 报销替票的风险是什么
  • 本月盈利本年亏损要做分录吗
  • 企业所得税实施条例第22条
  • 商誉的会计核算怎么核算
  • 其他应付款怎么冲平影响会计利润吗
  • 建筑企业的安全技术措施
  • 财政直接支付是什么科目
  • 注册资金没显示
  • 一般纳税人农业企业免企业所得吗
  • 农业免税企业开票有限额吗
  • 展厅租赁税率
  • 用友作废的凭证怎么恢复
  • 整个期间影响损耗的因素
  • 股息红利等权益性投资收益
  • sql2008数据库mdf文件 恢复
  • 为什么总让升级浏览器
  • 微软官方操作系统叫什么
  • linux dd测试
  • wdsvc.exe - wdsvc 是什么进程
  • winxp显示设置
  • ipssvc.exe - ipssvc是什么进程 有什么作用
  • cocos2dx入门
  • android的ui组件有哪些
  • shell脚本实现自动部署
  • jQuery Ajax File Upload实例源码
  • js的异步事件循环机制
  • js中unbind
  • javascript零基础入门
  • 河北电子税务局开票流程
  • 材料费增值税发票几个点
  • 民营非盈利医院能转让吗
  • 昆明市地方税务局稽查局局长
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设