【vue3仿网易云app】播放页面实现

效果：
首先是旋转唱片效果

从上往下看，首先是一个走马灯的音乐标题播放。
使用marquee来实现

                <div class="title">
                    <marquee  behavior="scroll" direction="left">{{playDetail.al.name}}</marquee>
                  </div>

模仿唱片的播放暂停
首先定义图片

        <div class="playContent" v-show="!isLyric">
            <img class="needle" :class="{active:!paused}" src="@/assets/img/needle-ip6.png" alt="">
            <img class="disc" src="@/assets/img/disc-ip6.png" alt="">
            <img class="playImg" :src="playDetail.al.picUrl" alt="">
        </div>

在style中定义
播放时rotate(30deg)，暂停时rotate(-10deg);

    .playContent{
        position: relative;
        width: 7.5rem;
        height: 7.5rem;
        left: 0;
        top: 1.5rem;
        .needle{
            width:2.5rem;
            height: auto;
            position: absolute; 
            left: 3.5rem;
            transform-origin: 0.3rem 0;
            transform: rotate(-10deg);
            transition: all 1s;
            z-index: 10;
        }
        .needle.active{
            width: 2.5rem;
            height: auto;
            position: absolute;
            left: 3.5rem;
            transform-origin: 0.3rem 0;
            transform: rotate(30deg);
            z-index: 10;
            transition: all 1s;
        }
        .disc{
            width: 5.5rem;
            height: auto;
            position: absolute;
            left: calc(50% - 2.75rem) ;
            top: 2.5rem;

        }
        .playImg{
            width: 3.4rem;
            height: 3.4rem;
            border-radius: 1.7rem;

            position: absolute;
            left: calc(50% - 1.7rem) ;
            top: 3.55rem;
        }
    }

然后是模拟歌词播放，第一步在store/index.js中处理歌词

  getters:{
    lyricList:function(state){
       let arr = state.lyric.split(/\n/igs).map((item,i,arr)=>{
          let min = parseInt(item.slice(1,3)) ;
          let sec = parseInt(item.slice(4,6)) ;
          let mill = parseInt(item.slice(7,10));

          
         return {
           
          min,sec,mill,
          lyric:item.slice(12,item.length),
          content:item,
          time:mill+sec*1000+min*60*1000
        }
      })
      
      arr.forEach((item,i)=>{
        if(i==0){
          item.pre = 0;
        }else{
          item.pre = arr[i-1].time //歌词等于下一句歌词的时间
        }
        
      })
      return arr
  }
  },

然后进行渲染

<div class="playLyric" v-show="isLyric" ref="playLyric">
            <p :class="{active:(currentTime*1000>=item.pre&&currentTime*1000<item.time)}" v-for="(item,i) in $store.getters.lyricList" :key="i">{{item.lyric}}</p>
            
        </div>

(currentTime1000>=item.pre&&currentTime1000<item.time)
歌曲播放的时长大于上一句歌词结束的时间并且小于下一句歌词的时间，中间就是正在播放的歌词
即时监听歌词：

    watch:{
        currentTime:function(newValue){
            let p = document.querySelector('p.active');
            let offsetTop = p.offsetTop;
            let h = this.$refs.playLyric.offsetHeight;

            this.$refs.playLyric.scrollTop = p.offsetTop;

        }
    },