200字范文 > 使用vue实现自己音乐播放器仿网易云移动端（audio 播放暂停上一首下一首

使用vue实现自己音乐播放器仿网易云移动端（audio 播放暂停上一首下一首

时间：2023-06-30 14:14:59

最终实现成果展示

源码地址
在线演示地址 - 网抑云音乐

1.播放暂停功能的实现

这是audio标签

<audio @timeupdate="updateTime" @canplay="getDuration" @ended="ended" :src="musicUrl" ref="audio"></audio>

这是播放和暂停图标

<div class="pause" v-show="isPlaying" @click="pauseSong"><i class="fa fa-pause"></i></div><div class="play" v-show="!isPlaying" @click="playSong"><i class="fa fa-play"></i></div>

播放和暂停事件我们通过this.$refs.audio.play()和this.$refs.audio.pause()来进行控制，并切换isPlaying的值来改变图标的显示。设置this.$refs.audio.autoplay= true可实现歌曲自动播放

中间圆形图片的旋转和暂停是通过添加类名控制：

css样式如下：

.cd.rotate img{animation: rotateIMG 15s linear infinite;}.cd.rotatePause img{animation-play-state:paused;-webkit-animation-play-state:paused; /* Safari 和 Chrome */}@keyframes rotateIMG{from {transform: rotate(0deg);}to {transform: rotate(360deg);}}

html结构如下：

<div class="cd" v-show="show" @click="show = !show" ref="cd"><img :src="playingSong.blurPicUrl" width="60%"></div>

js控制如下：

// 播放时this.$refs.cd.classList.add('rotate')if (this.$refs.cd.classList.contains('rotatePause')) this.$refs.cd.classList.remove('rotatePause')// 暂停时this.$refs.cd.classList.add('rotatePause')

2. 上一首下一首功能的实现

要实现这个功能我们就要拿到当前歌曲列表的所有数据。我请求的是网易云的接口，将数据存在vuex里面。我们只需通过切换数组索引即可达到切换歌曲。
歌曲列表是通过遍历出来的，所以我们可以给节点加上data-index属性。结果像下面这样

接下来点击的时候我们把当前data-index存到localStorage里面，之后在上一首/下一首的点击事件里 – 或者 ++进行切换,并做边界值判断代码如下：

prevSong () {// 播放上一首歌曲localStorage.curSongPlayIndex--if (localStorage.curSongPlayIndex < 0) localStorage.curSongPlayIndex = this.$store.state.songPlayList.length - 1this.playingSong = this.$store.state.songPlayList[JSON.parse(localStorage.curSongPlayIndex)]this.loadMusic() // 加载音乐地址加载歌词加载喜欢状态加载音乐评论this.autoPlaySong() // 点击之后歌曲或自动播放}

3.进度条显示时间显示进度条拖拽功能实现

3.1获取音乐总时长

在canplay钩子函数拿到总时长

getDuration () {// canplay时获取音频总时长this.duration = this.$refs.audio.durationthis.allTime = this.formatTime(this.$refs.audio.duration)},

注意：时间获取出来是秒。我们要显示的是mm:ss格式。所以this.duration存的时间是秒this.allTime存的时间是格式化之后的

formatTime函数代码如下：

formatTime (time) {if (time === 0) {this.curTime = '00:00'return}const mins = Math.floor(time / 60) < 10 ? `0${Math.floor(time / 60)}` : Math.floor(time / 60)const sec = Math.floor(time % 60) < 10 ? `0${Math.floor(time % 60)}` : Math.floor(time % 60)return `${mins}:${sec}`}

3.2拿到当前时间更新进度条

在timeupdate钩子函数获取当前播放时间

updateTime (e) {// timeupdate时获取当前播放时间const {currentTime } = e.targetthis.currentTime = currentTimethis.curTime = this.formatTime(currentTime)this.updateProgress(this.currentTime, this.duration)}

这个地方同样的this.currentTime是当前时间（秒），this.curTime是格式之后的分秒格式

下一步我们就要更新进度条了，得到当前时间和总时间的比值来更新进度条的宽度和小圆点距离左边的距离

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

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

在clickProgress方法里这样写

clickProgress (event) {// 点击进度条时更新音频时间和进度条const e = event || window.eventconst position = e.clientX - e.currentTarget.offsetLeft // 当前点击的位置const progressWidth = this.$refs.progress.offsetWidth // 进度条总宽度this.$refs.audio.currentTime = ((position / progressWidth) * this.duration) // 设置当前音频的播放时间this.updateProgress(((position / progressWidth) * this.duration), this.duration)}

这样就实现了点击进度条播放。

下面是拖拽功能的实现，使用原生的touchstarttouchmovetouchend来监听。

在touchmove时，获取小圆点拖动到距离进度条左边的距离，并实施更新进度条

touchMove(e) {// 移动的距离let moveX = e.touches[0].pageX - 83 // 83是进度条距离浏览器的距离// 进度条的宽度const progressWidth = this.$refs.progress.offsetWidthif (moveX >= progressWidth) moveX = progressWidth // 边界值判断this.$refs.audio.currentTime = ((moveX / progressWidth) * this.duration) // 实时更新播放时间this.updateProgress(((moveX / progressWidth) * this.duration), this.duration) // 更新进度条}

在touchend时播放歌曲

touchEnd(e) {this.playSong() //调用播放歌曲方法this.isPlaying = true},

4.评论区的展示

比较简单直接遍历得到的数据然后渲染就行。只是在切换歌曲时要把评论区给隐藏掉

完整代码

HTML

<template><div style="height: 100%"><div class="blur-container" :style="{ 'background-image': `url(${playingSong.blurPicUrl})` }"></div><div class="play-container"><goBack :showGoBack='showGoBack'/><div class="cd" v-show="show" @click="show = !show" ref="cd"><img :src="playingSong.blurPicUrl" width="60%"></div><div class="lyrics" v-show="!show" @click="show = !show"><div class="volume"><i class="fa fa-volume-up" v-show="!isMuted" @click.stop.prevent="muted(true)"></i><i class="fa fa-volume-off" v-show="isMuted" @click.stop.prevent="muted(false)"></i><div class="volumeRange"><input type="range" min="0" max="100" v-model="volume" step="1" @input="handleVolumeChange"></div></div><div class="lyrics-container"><ul ref="lyricUL"><li v-for="(item, i) in lyricsObjArr" :style="{color: lyricIndex === i ? 'skyblue' : '#ded9d9'}" :key="item.uid" :data-index='i' ref="lyric">{{item.lyric}}</li></ul></div></div><div class="bottom"><div class="bottom-line1"><div class="like" @click="toggleLikeMusic" v-show="!like"><i class="fa fa-heart-o"></i></div><div class="like like-yes" @click="toggleLikeMusic(false)" v-show="like"><i class="fa fa-heart"></i></div><div class="download" @click="download"><i class="fa fa-download"></i></div><div class="comment" @click="showComment"><i class="fa fa-commenting-o"></i></div></div><div class="bottom-progress"><div class="curTime">{{curTime}}</div><div class="progress" @click="clickProgress($event)" ref="progress"><div class="line" :style="{width: `${precent}`}"></div><div class="dot" :style="{left: `${precent}`}" @touchstart='dotStart' @touchmove='dotMove' @touchend='dotEnd'></div></div><div class="allTime">{{allTime}}</div></div><div class="bottom-controls"><div class="prev" @click="prevSong"><i class="fa fa-step-backward"></i></div><div class="pause" v-show="isPlaying" @click="pauseSong"><i class="fa fa-pause"></i></div><div class="play" v-show="!isPlaying" @click="playSong"><i class="fa fa-play"></i></div><div class="next" @click="nextSong"><i class="fa fa-step-forward"></i></div></div></div><audio @timeupdate="updateTime" @canplay="getDuration" @ended="ended" :src="musicUrl" id="audio" ref="audio"></audio><comment :showCommentPanel='showCommentPanel' @getMoreComment='getMoreComment' @likeComment='toggleLikeComment'/></div></div></template>