iT邦幫忙

0

22.music-歌曲封面

  • 分享至 

  • xImage
  •  

歌曲封面
1.更蓋封面主要是更改image的src
2.封面獲取
3.封面設置v-bind

  • 歌曲詳情獲取(以下為黑馬程序員課程提供)
    -請求地址:https://autumnfish.cn/song/detail
    -請求方法:get
    -請求參數:ids(歌曲id)
    -響應内容:歌曲詳情(包括封面信息)

設置好之後

axios.get("https://autumnfish.cn/song/detail?ids=" + musicId).then(
        function(response) {
           console.log(response);
        },
        function(err) {}
      );

我們可以獲取到
https://ithelp.ithome.com.tw/upload/images/20231010/20163468zqtwEpqzmd.png
接著獲取封面

              axios.get("https://autumnfish.cn/song/detail?ids="+musicId)
              .then(function(response){
                //console.log(response)
                console.log(response.data.songs[0].al.picUrl)
                that.musicPic = response.data.songs[0].al.picUrl;
              },function(err){})
            }
</div>
         <!-- 歌曲信息容器 -->
         <div class="player_con">
          <img src="image/player_bar.png" class="play_bar" />
          <!-- 黑胶碟片 -->
          <img src="image/disc.png" class="disc autoRotate" />
          <img  :src="musicPic" class="cover autoRotate" />
          <!-- 放上封面 -->
        </div>

就完成了封面設定
https://ithelp.ithome.com.tw/upload/images/20231010/20163468SH1I4mrOQ0.png
參考資料:
https://www.bilibili.com/video/BV1HE411e7vY/?p=33&share_source=copy_web&vd_source=85a8c5bb37dc77d30860d2b3537de967


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言