24.music-播放CD

播放CD
-监听音乐播放(v-on play
-监听音乐暂停(v-on pause
-操纵class(v-bind 对象
这个功能不用掉用到axios，只要操作class就好啦
1.当播放因乐->触发play事件
2.暂停音乐->触发pause事件

当歌曲被点选时，要让CD转动，触发时为true，暂停音乐时为false

 <audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>

    play(){          this.playing=true;        },        pause(){          this.playing=false;        }

接着v-bind绑定playing使其能成功转动

<!-- 歌曲信息容器 -->         <div class="player_con" :class="{playing:playing}">         <!--绑定playing -->          <img src="image/player_bar.png" class="play_bar" />          <!-- 黑胶碟片 -->          <img src="image/disc.png" class="disc autoRotate" />          <img  :src="musicPic" class="cover autoRotate" />          </div>

再加入CSS
1.CD转圈圈

/* 旋转动画 */@keyframes Rotate {  from {    transform: rotateZ(0);  }  to {    transform: rotateZ(360deg);  }}/* 旋转设定*/.autoRotate {  animation-name: Rotate;  animation-iteration-count: infinite;  animation-play-state: paused;  animation-timing-function: linear;  animation-duration: 5s;}/* 是否正在播放 */.player_con.playing .disc,.player_con.playing .cover {  animation-play-state: running;}

2.拨桿移动

.play_bar {  position: absolute;  left: 200px;  top: -10px;  z-index: 10;  transform: rotate(-25deg);  transform-origin: 12px 12px;  transition: 1s;}

这样就完成啦，最后就剩设置MV就完成整个music了
参考资料:
https://www.bilibili.com/video/BV1HE411e7vY/?p=35&share_source=copy_web&vd_source=85a8c5bb37dc77d30860d2b3537de967