请选择 进入手机版 | 继续访问电脑版
我的账户
好麦麦源码网

优质互联网资源

亲爱的游客,欢迎!

已有账号,请

如尚未注册?

【技术交流】记录element-ui+Vue.js实现抓取酷狗音乐api免费听歌

0
回复
718
查看
[复制链接]

603

主题

609

帖子

10万

积分

管理员

Rank: 24Rank: 24Rank: 24Rank: 24Rank: 24Rank: 24

最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理论坛元老

发表于 2020-5-16 14:04:15 | 显示全部楼层 |阅读模式
最近在给公司写一套系统,很忙,今天周末写篇文章
之前给老爸下歌的时候,发现有些歌需要付费或会员才能下载

这里通过抓取酷狗的api,实现音乐的免费听免费下载(只能试听的歌曲不能完整下载)

先来张图片(很简单的界面,没做美化)

注:本人没怎么学过VUE和element-ui   只会基本的操作!!

FHO$ET8K$ZH7TRD3F{B8WO5.png

这就是搜索歌曲的api了
TXC(1F1ANO${]TQW9P}L`IT.png


里面一些参数根据名字应该都能猜出来,page就是页数,keyword就是搜索的关键字,pagesize就是一页显示多少条数据,就不一一介绍了

这是歌曲的api,根据Hash值识别对应歌曲
_6TOZV[E@E5WO0XXI4WPW31.png


好了,api搞定,开始进入正事

先搭建个VUE的脚手架,然后引入element-UI
因为需要跨域,我这里使用的是jsonp插件

jsonp插件安装命令  cnpm install jsonp --save


安装成功后引入即可


js部分代码,仅供学习,要完整的私聊我吧(这篇文章主要是记录一下,写的不细,纯小白的话估计很难看懂)
  1. <script>
  2. // import axios from 'axios'
  3. export default {
  4.   data () {
  5.     return {
  6.        input: '',
  7.        musicArr:[],
  8.        audioUrl:'',
  9.        topIndex:'none'
  10.     }
  11.   },
  12.   methods:{
  13.     search(){
  14.      if(this.input == ""){
  15.         this.open('请输入搜索内容!');
  16.      }else{
  17.         this.musicArr = [];
  18.         this.$jsonp('https://songsearch.kugou.com/song_search_v2?keyword='+this.input+'&page=1&pagesize=30&platform=WebFilter').then(res => {
  19.                     for(let i in res.data.lists){
  20.                        //用json格式存储信息
  21.                         let arr = {'FileHash':'','FileName':'','SingerName':'','img':'','play_url':'','icon':'el-icon-video-play'};
  22.                         arr.FileHash = res.data.lists[i].FileHash;
  23.                         arr.FileName = res.data.lists[i].FileName;
  24.                         arr.SingerName = res.data.lists[i].SingerName;
  25.                         //根据Hash值获取歌曲图片和播放链接
  26.                         this.$jsonp('https://wwwapi.kugou.com/yy/index.php?r=play/getdata&hash='+arr.FileHash+'&mid=e4b3cf1d536edd000c08602515fe92aa').then(data=>{
  27.                           arr.play_url = data.data.play_url;
  28.                           arr.img = data.data.img;
  29.                         })
  30.                         //追加到歌曲列表
  31.                         this.musicArr.push(arr);

  32.                     }
  33.                 })
  34.                 console.log(this.musicArr);
  35.      }
  36.     },
  37.     open(msg) {
  38.           this.$message({
  39.             message: msg,
  40.             type: 'warning',
  41.             offset:'200'
  42.           });
  43.         },
  44.     play(url,index){
  45.       for(let i in this.musicArr){
  46.           if(index != i){
  47.              this.musicArr[i].icon = 'el-icon-video-play';
  48.           }
  49.       }
  50.       this.audioUrl = url;
  51.       this.musicArr[index].icon = 'el-icon-video-pause';
  52.     }
  53.   }
  54. }
  55. </script>
复制代码



如需转载,请标注来自好麦麦源码网
第一:加入vip会员,全站99.9%源码免费下载 加入地址http://www.haomaim.cn/plugin.php?id=threed_vip
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

尊贵VIP购买
关注我们
官方公众号

客服微信:liangyan6969

客服邮箱:1784605674@qq.com

周一至周五 9:00-18:00

HAOMAIM.CN

好麦麦源码网-始终坚持优质资源分享!( 皖ICP备16014583号-1 )

Powered by HAOMAIM© 2017-2020