24.music-播放CD

vue 自學筆記

伍貳捌 2023-10-10 21:28:25 ‧ 5219 瀏覽

分享至

播放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