vue做音乐播放器完整功能 |
您所在的位置：网站首页 › 如何隐藏音乐播放器功能 › vue做音乐播放器完整功能 |
vue做音乐播放器完整功能
|
vue音乐播放器
一般音乐播放器该有的功能基本都有了，只是有些还没有完成，大部分代码 js 或者其他框架也可以用
1、播放列表 2、切歌 3、暂停/播放 4、歌词显示 5、点击歌词改变进度 6、评论（未完成） 7、收藏歌曲（未完成） 8、滑块改变进度 9、进度条改变进度 10、播放列表 11、播放模式（随机/顺序） 12、播放列表结束提醒 13、播放错误提醒 14、加载/暂停提醒 15、当前播放进度/时间显示 16、侧边小歌词显示 17、缓冲条 部分功能代码 1、解析歌词把歌词解析成【时间（秒）】+文字的数组 ①拖到滑块改变 // 滑块点击时 movebegin () { this.move = true this.clikemove = true }, // 滑块松开时 moveout () { this.move = false if (this.clikemove) { var audio = document.querySelector('#audio') let newPercent = (this.mouseStartX / this.progressLength) * 100 let a = newPercent * 0.01 * this.lenth audio.currentTime = a } this.clikemove = false }, // 滑块拖拽时 movestart (e) { if (this.move) { var left = document.querySelector('#speed') this.mouseStartX = e.clientX - left.getBoundingClientRect().left this.progressLength = this.$refs.speed.getBoundingClientRect().width let newPercent = (this.mouseStartX / this.progressLength) * 100 if (newPercent 100) { this.moveout() } } }②点击进度条改变 // 点击进度条改变进度 mousedown (e) { var audio = document.querySelector('#audio') var left = document.querySelector('#speed') this.mouseStartX = e.clientX - left.getBoundingClientRect().left this.progressLength = this.$refs.speed.getBoundingClientRect().width let newPercent = (this.mouseStartX / this.progressLength) * 100 let a = newPercent * 0.01 * this.lenth audio.currentTime = a },③点击歌词改变 // 点击歌词切换进度 onlrcplay (index) { var audio = document.querySelector('#audio') audio.currentTime = index }, 5、显示当前播放时间和总时间audio标签用到的事件 播放时间 js // 更新播放时间 updataTime (e) { this.currentTime = e.target.currentTime var audio = document.querySelector('#audio') const timeRanges = audio.buffered if (timeRanges.length !== 0) { var currenRanges = timeRanges.end(timeRanges.length - 1) } let min = parseInt(this.currentTime / 60) let sec = parseInt(this.currentTime % 60) if (min |
【本文地址】
今日新闻 |
推荐新闻 |