vue实现的网易云音乐在线播放和下载功能案例

本文实例讲述了vue实现的网易云音乐在线播放和下载功能。分享给大家供大家参考，具体如下：

效果如图:

完整代码:

  
  
  
  
  
    html,
    body {
      height: 100%;
      padding: 0;
      margin: 0;
    }
    #app {
      height: 100%;
      display: flex;
    }
    #app>#left {
      flex: 1;
      background-color: skyblue;
      text-align: center;
      
      overflow: scroll;
    }
    #app>#right {
      flex: 1;
      background-color: orange;
    }
    ul {
      list-style: none;
      padding: 0;
    }
    input {
      width: 469px;
      height: 56px;
      margin: 10px auto;
      border-radius: 10px;
      outline: none;
      font-size: 24px;
      border: 0;
      padding-left: 15px;
    }
    #left li {
      width: 451px;
      
      margin: 0 auto;
      font-weight: 700;
      border: 2px solid black;
      line-height: 35px;
      color: white;
      background-color: cadetblue;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      max-height: 35px;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    #left li:hover {
      cursor: pointer;
      background-color: greenyellow;
      color: red;
    }
    #right {
      position: relative;
      overflow: scroll;
    }
    audio {
      
      display: block;
      margin: 0 auto;
    }
    
    .list-item {
      display: inline-block;
      margin-right: 10px;
    }
    .list-enter-active,
    .list-leave-active {
      transition: all 1s;
    }
    .list-enter,
    .list-leave-to{
      opacity: 0;
      transform: translateX(100px);
    }
    
    .cover{
      width: 260px;
      height: 260px;
      border-radius: 50%;
      display: block;
      margin: 10px auto;
      
    }
    
    @keyframes autoRotate{
      to{
 transform: rotateZ(360deg);
      }
    }
    
    .autoRotate{
      
      animation-name:autoRotate;
      animation-iteration-count:infinite;
      animation-timing-function: linear;
      animation-duration:2s;
      animation-play-state:running;
    }
    
    .pause{
      animation-play-state:paused;
    }
    
    .comment{
      height: 150px;
      
    }
    .comment li{
      display: flex;
      padding: 5px;
    }
    .comment li .left{
      width: 120px;
      height: 120px;
    }
    .comment li .left img{
      width: 100px;
    }
    .comment li a{
      text-decoration: none;
      font-weight: bold;
      color: crimson;
    }
  


  
    
    
      
 
 
 
 

   {{item.name}}-----演唱者:{{item.artists[0].name}}
 
 
    
    
    
      
      
      
      
      精彩评论
      
   

     

  
    
  
  
    {{item.user.nickname}}
    
{{item.content}}
  

   
      
    
  
  rightv>

如果接口不能使用:请登录https://github.com/huanggengzhong/NeteaseCloudMusicApi,重新下载开启服务器即可

希望本文所述对大家vue.js程序设计有所帮助。