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

010_Vue⾳乐播放器（播放器组件）不满意之前的页⾯结构，所以我重构了⼀下，以作为⽗级组件，recommend组件、singer组件、rank组件和search组件作为⼦路由⾃建都归类到tab组件中。 组件，放置在组件下，这个组件⼀直存在，不过由于v-show="isShow"的关系，vuex中的playList没有数据，所以隐藏掉了，然后根据fullScreen数据，来判断是展⽰正常播放器还是迷你播放器。根据传⼊的 percent（百分⽐，由currentTime和duration计算⽽来）播放时间百分⽐效果页接下来通过⼀系列touch事件实现拖拽按钮调整播放位置的操作⾸先 touchstart 事件 ，将 拖拽 标识变量initiated变量置为true，根据event对象的touches[0].pageX得到touchstart的起始位置startX，存⼊对象，然后由已播放进度条的宽度得到按钮的偏移量 left。在touchmove事件中，⾸先判断是否 拖拽初始化，未初始化则return，然后通过移动后的touches[0].pageX起始坐标减去记录的起始坐标startX得出移动偏移量deltaX， + deltaX 得出 拖动后的位置，然后跟 this.$Width - 16 （进度条最⼤值）⽐较，⼩于它则取得出的拖动width，⼤于则取this.$Width - 16（进度条末尾），然后将拖动的距离作为参数调⽤_offset函数，在函数中对 进度条 和 按钮的位置进⾏设置，实现偏移效果。上⾯只是实现拖动，歌曲实际播放位置并没有改变，在touchend事件中，修改初始化值为false调⽤triggerPercent函数，将进度条偏移的百分⽐作为参数抛出percent函数给⽗组件处理。根据进度百分⽐，设置audio的currentTime的值来进⾏歌曲播放位置的改变。效果页

修改播放模式（顺序播放，单曲循环，随机播放）mapGetters引⼊mode和sequenceList数据给播放模式绑定样式和事件洗牌函数 /*洗牌函数的封装*/ getRandom(min, max) { return (() * (max - min + 1) + min); }, shuffle(arr) { //不修改原数组 let _arr = (); for (let i = 0; i < _; i++) { let j = dom(0, i); let t = _arr[i]; _arr[i] = _arr[j]; _arr[j] = t; } return _arr; }⾄此，可以通过点击播放模式来切换歌单，且保持当前歌曲的播放状态。

根据audio派发的ended事件，对歌曲播放完毕后进⾏处理 点击进度条按钮的bug当点击到进度条按钮本⾝时，由于获取的节点对象错误，导致进度条进度移动的错误

歌词的显⽰将歌词部分（由currentSongInfo中取得）插⼊到Scroll组件中，以进⾏滚动，并根据currentShow来表⽰当前应当显⽰图⽚还是歌词部分。其中，歌词部分使⽤Lyric函数进⾏处理（由cnpm install lyric-parser --save安装）此时歌词即能随着歌曲滚动。头像和歌词部分左右滑动切换 //图像/歌词滑动切换的效果 middleTouchStart(e) { ted = true; //初始化 const touch = s[0]; = ; = ; }, middleTouchMove(e) { if (!ted) { return; } const touch = s[0]; const deltaX = - ; const deltaY = - ; if ((deltaY) > (deltaX)) { //纵轴上的偏移⼤于横轴上的位移，认为是纵向滚动，不切换 return; } const left = tShow === "img" ? 0 : -idth; //为图像则不偏移，为歌词则向左移。 const offsetWidth = ( 0, (-idth, left + deltaX) ); t = (offsetWidth / idth); //得到滑动的⽐例 this.$ist.$orm = `translate3d(${offsetWidth}px,0,0)`; //vue组件⽆法直接访问节点，使⽤$el this.$ist.$orm = `transformDuration:300ms`; this.$y = 1 - t; this.$orm = `transformDuration:300ms`; }, middleTouchEnd() { let offsetWidth; let opacity; //从右向左滑 if (tShow == "img") { //滑动距离⼤于10% if (t > 0.1) { offsetWidth = -idth; opacity= 0; this.$y = opacity; this.$orm = `transformDuration:300ms`; tShow = "lyric"; //同时改变当前显⽰状态 } else { offsetWidth = 0; opacity= 1; this.$y = opacity; this.$orm = `transformDuration:300ms`; } } //从左向右滑 else { if (t < 0.9) { offsetWidth = 0; opacity= 1; this.$y = opacity; this.$y = opacity; this.$orm = `transformDuration:300ms`; tShow = "img"; } else { offsetWidth = -idth; opacity= 0; this.$y = opacity; this.$orm = `transformDuration:300ms`; } } this.$ist.$orm = `translate3d(${offsetWidth}px,0,0)`; //vue组件⽆法直接访问节点，使⽤$el ted = false }样式 .middle { width: 202vw; .middle-l { width: 100vw; vertical-align: top; display: inline-block; transition: all 1s; .cd-wrapper { .cd { .image { width: 17rem; border: 2px solid gray; border-radius: 50%; animation: imgRotate 20s linear infinite; } } } } .middle-r { width: 100vw; display: inline-block; transition: all 1s; .lyric-wrapper { .text { line-height: 2; color: rgba(255, 255, 255, 0.5); font-size: 1rem; } // 当前⾏歌词⾼亮 .currentLine { font-size: 1.2rem; color: rgba(255, 255, 255, 1); } } } .wrapper { height: 63vh !important; } }此时图像和歌词能够左右切换。循环播放时歌词偏移回初始位置歌曲播放/暂停时 ，歌词滚动状态的改变拖动进度条，根据百分⽐，修改歌词的偏移位置效果图

酷狗API歌曲数据请求有次数限制，当天次数限制时，弹出提⽰框后跳回歌单详情页。效果页：