2023年7月11日发(作者：)

使⽤vue实现⾃⼰⾳乐播放器仿⽹易云移动端（audio、播放、暂停、上⼀⾸、下⼀⾸、展⽰评。。。最终实现成果展⽰1.播放 暂停功能的实现这是audio标签这是播放和暂停图标

播放和暂停事件我们通过

this.$()和this.$()来进⾏控制，并切换isPlaying的值来改变图标的显⽰。设置this.$ay= true 可实现歌曲⾃动播放中间圆形图⽚的旋转和暂停是通过添加类名控制：css样式如下：. img{ animation: rotateIMG 15s linear infinite;}.Pause img{ animation-play-state:paused; -webkit-animation-play-state:paused; /* Safari

和 Chrome */}@keyframes rotateIMG{ from { transform: rotate(0deg); } to { transform: rotate(360deg); }}html结构如下：

js控制如下：//

播放时this.$('rotate')if (this.$ns('rotatePause')) this.$('rotatePause')//

暂停时this.$('rotatePause')2. 上⼀⾸ 下⼀⾸功能的实现要实现这个功能我们就要拿到当前歌曲列表的所有数据。我请求的是⽹易云的接⼝，将数据存在vuex⾥⾯。我们只需通过切换数组索引即可达到切换歌曲。歌曲列表是通过遍历出来的，所以我们可以给节点加上data-index属性。结果像下⾯这样接下来点击的时候我们把当前data-index存到localStorage⾥⾯，之后在上⼀⾸/下⼀⾸的点击事件⾥ – 或者 ++进⾏切换,并做边界值判断 代码如下：prevSong () { //

播放上⼀⾸歌曲 gPlayIndex-- if (gPlayIndex < 0) gPlayIndex = this.$ - 1 gSong = this.$ayList[(gPlayIndex)] sic() //

加载⾳乐地址

加载歌词

加载喜欢状态

加载⾳乐评论 aySong() //

点击之后歌曲或⾃动播放 }3.进度条显⽰ 时间显⽰ 进度条拖拽功能实现3.1获取⾳乐总时长在canplay钩⼦函数拿到总时长getDuration () { // canplay时获取⾳频总时长 on = this.$on e = Time(this.$on)},注意：时间获取出来是秒。我们要显⽰的是mm:ss格式。所以

on存的时间是秒

e存的时间是格式化之后的formatTime函数代码如下：formatTime (time) { if (time === 0) { e = '00:00' return } const mins = (time / 60) < 10 ? `0${(time / 60)}` : (time / 60) const sec = (time % 60) < 10 ? `0${(time % 60)}` : (time % 60) return `${mins}:${sec}`}3.2拿到当前时间 更新进度条在timeupdate钩⼦函数获取当前播放时间updateTime (e) { // timeupdate时获取当前播放时间 const { currentTime } = tTime = currentTime e = Time(currentTime) Progress(tTime, on)}这个地⽅同样的tTime是当前时间（秒），e是格式之后的分秒格式下⼀步我们就要更新进度条了，得到 当前时间和总时间 的⽐值 来更新进度条的宽度和⼩圆点距离左边的距离updateProgress (currentTime, duration) { //

更新进度条 t = `${((currentTime / duration) * 100).toFixed(5)}%`},

3.3进度条点击播放 拖拽播放在

clickProgress⽅法⾥这样写clickProgress (event) { //

点击进度条时

更新⾳频时间和进度条 const e = event || const position = X - Left //

当前点击的位置 const progressWidth = this.$Width //

进度条总宽度 this.$tTime = ((position / progressWidth) * on) //

设置当前⾳频的播放时间 Progress(((position / progressWidth) * on), on)}这样就实现了点击进度条播放。下⾯是拖拽功能的实现，使⽤原⽣的touchstart

touchmove

touchend来监听。在touchmove时，获取⼩圆点拖动到距离进度条左边的距离，并实施更新进度条touchMove(e) { //

移动的距离 let moveX = s[0].pageX - 83 // 83是进度条距离浏览器的距离 //

进度条的宽度 const progressWidth = this.$Width if (moveX >= progressWidth) moveX = progressWidth //

边界值判断 this.$tTime = ((moveX / progressWidth) * on) //

实时更新播放时间 Progress(((moveX / progressWidth) * on), on) //

更新进度条}在touchend时播放歌曲touchEnd(e) { ng() //调⽤播放歌曲⽅法 ing = true},4.评论区的展⽰⽐较简单 直接遍历得到的数据然后渲染就⾏。只是在切换歌曲时要把评论区给隐藏掉完整代码HTMLCSSJavaScript以上就实现了所有功能啦感谢你的耐⼼观看 点个赞吧！再收个藏吧！