位置: 编程技术 - 正文
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 代理方法调用
设置点击播放按钮方法
设置点击播放上一首和下一首按钮方法。用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 转载请保留说明！
](https://www.jiuchutong.com/image/20240129/1706496389.jpg)
