vue实现的网易云音乐在线播放和下载功能案例
网络编程 2021-07-04 15:50www.168986.cn编程入门
这篇文章主要介绍了vue实现的网易云音乐在线播放和下载功能,结合具体实例形式分析了网易云音乐相关接口调用与操作技巧,需要的朋友可以参考下
本文实例讲述了vue实现的网易云音乐在线播放和下载功能。分享给大家供大家参考,具体如下
效果如图:
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style lang=""> 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; } / 评论 / .ment{ height: 150px; / background-color: skyblue; / } .ment li{ display: flex; padding: 5px; } .ment li .left{ width: 120px; height: 120px; } .ment li .left img{ width: 100px; } .ment li a{ text-decoration: none; font-weight: bold; color: crimson; } </style> </head> <body> <div id="app"> <!-- 左边 --> <div id="left"> <input type="text" value="请输入你要搜索的歌名" v-model="inputValue" @keyup.enter="search"> <!-- 给li添加过渡 ;v-on:after-enter="afterEnter":钩子函数--> <transition-group name="list" tag="ul" v-on:after-enter="afterEnter"> <!-- play(item.id):把id传过去 --> <li v-for="(item, index) in musicList" :key="item.id" @dblclick="playMusic(item.id,item.album.id)" :style="{'transition-delay':index100+'ms'}" > {{item.name}}-----演唱者:{{item.artists[0].name}} </li> </transition-group> </div> <!-- 右边,播放 --> <div id="right"> <!-- 专辑页面 --> <img :src="picUrl" alt="" class="cover autoRotate" :class="{pause:isPause}"> <!-- aulay:自动播放,controls显示控件 ;@play="play"是自定义方法--> <audio :src="songUrl" aulay controls @play="play" @pause="pause" ></audio> <h3>精彩评论</h3> <div class="ment"> <ul> <!-- 遍历数组时,需要动画时才用到key --> <li v-for="(item, index) in ments" > <div class="left"> <img :src="item.user.avatarUrl" alt=""> </div> <div class="right"> <a href="#" rel="external nofollow" >{{item.user.nickname}}</a> <p>{{item.content}}</p> </div> </li> </ul> </div> </div> </div> rightv> </body> <!-- 导入vue --> <script src="https://cdn.jsdelivr./npm/vue/dist/vue.js"></script> <!-- 导入vue插件 --> <script src="https://cdn.jsdelivr./npm/vue-resource@1.5.1"></script> <script> //代码 / 音乐播放器 需求1: 搜索歌曲 发送网络请求 回调函数函数中渲染数据 有动画 需求2: 双击播放歌曲 根据id调用接口 查询数据 通过audio播放歌曲 获取专辑的信息 进而获取封面 展示给用户 需求3 播放歌曲时 封面转动 暂停播放时 封面停止转动 步骤: 1.先写动画样式,动画命名为autoRotate,因为是一直运动,所以使用animation; 2.写一个暂停的样式,命名为pause,给data添加一个isPause来存值,默认给一个false 3.添加运动和暂停的步骤是添加上面的两个类,pause要使用v-bind指令来设置属性; 4.在audio音频里添加播放和暂停的点击方法,在对应的方法里设置对应的布尔值; 需求4 点击播放歌曲 获取这首歌的评论 步骤:1.在数据中声明一个ments的空数组,用来存评论内容 2.在播放方法中写获取评论的接口 3.在响应体里将内容赋值给声明的数组 / let app = new Vue({ el: "#app", data: { inputValue: '',//输入的值 musicList: [], //存储歌列表 songUrl: '',//播放歌曲的url picUrl:'',//获取专辑信息 isPause:false,//专辑是否暂停 ments:[]//评论内容 }, methods: { // li标签过渡的事件 randomIndex: function () { return Math.floor(Math.random() this.items.length) }, add: function () { this.items.splice(this.randomIndex(), 0, this.nextNum++) }, remove: function () { this.items.splice(this.randomIndex(), 1) }, //搜索歌曲事件 search() { //调用接口 this.$http.get(`https://autumnfish./search?keywords=${this.inputValue}`).then(response => { // console.log(response); //将结果添加到musicList中 this.musicList = response.body.result.songs; }, response => { // error callback alert("出错了") }); }, // 双击播放歌曲事件,接收传过来的id playMusic(id,albumId) { //获取歌曲的url this.$http.get(`https://autumnfish./song/url?id=${id}`).then(response => { // console.log(response); //将结果添加到musicList中 this.songUrl = response.body.data[0].url; }, response => { // error callback alert("出错了") }); // 获取专辑信息 this.$http.get(`https://autumnfish./album?id=${albumId}`).then(res=>{ this.picUrl=res.body.album.blurPicUrl; }),err=>{} //获取评论内容接口 this.$http.get(`https://autumnfish./ment/music?id=${id}&limit=1`).then(res=>{ console.log(res); this.ments=res.body.hotComments; }),err=>{ alert('信息错误') } }, //钩子函数:动画执行完后去除了style属性,不去掉会卡顿 afterEnter(el){ el.style=''; }, // 专辑图片旋转事件 play(){ console.log('播放'); this.isPause=false; }, pause(){ console.log('暂停'); this.isPause=true; } }, }) </script> </html>
如果接口不能使用:请登录,重新下载开启服务器即可
希望本文所述对大家vue.js程序设计有所帮助。
编程语言
- 甘肃哪有关键词排名优化购买方式有哪些
- 甘肃SEO如何做网站优化
- 河南seo关键词优化怎么做电话营销
- 北京SEO优化如何做QQ群营销
- 来宾百度关键词排名:提升您网站曝光率的关键
- 卢龙关键词优化:提升您网站排名的策略与技巧
- 山东网站优化的注意事项有哪些
- 四川整站优化怎样提升在搜索引擎中的排名
- 疏附整站优化:提升网站性能与用户体验的全新
- 海南seo主要做什么工作售后服务要做到哪些
- 荣昌百度网站优化:提升您网站的搜索引擎排名
- 河北seo网站排名关键词优化如何做SEO
- 江西优化关键词排名推广售后保障一般有哪些
- 古浪SEO优化:提升你的网站可见性
- 西藏网站排名优化怎么把网站排名在百度首页
- 如何提升阳东百度快照排名:详尽指南