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

这篇文章主要介绍了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; /* height: 35px; */ 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 { /* position: absolute; left: 50%; transform: translateX(-50%) translateY(46px); */ display: block; margin: 0 auto; } /* li标签过渡的样式 */ .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; /* transform: translateX(-50%) translateY(10px); */ } /* 动画 */ @keyframes autoRotate{ to{ transform: rotateZ(360deg); } } /* 动画播放样式 */ .autoRotate{ /* 动画名,一直播放iteration(一直重复),匀速(timing)，时间2s(duration),状态(running) */ 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; /* background-color: skyblue; */ } .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程序设计有所帮助。

以上就是vue实现的网易云音乐在线播放和下载功能案例的详细内容，更多请关注本站其它相关文章！