【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;

        }
    },
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值