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

若旧

最近在给公司写一套系统，很忙，今天周末写篇文章
之前给老爸下歌的时候，发现有些歌需要付费或会员才能下载

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

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

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



这就是搜索歌曲的api了



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

这是歌曲的api，根据Hash值识别对应歌曲



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

复制代码

如需转载，请标注来自好麦麦源码网

XRumerTest

Hello. And Bye.

XRumerTest

Hello. And Bye.

XRumerTest

XRumerTest ᱒ 2021-4-5 15:08
Hello. And Bye.

Hello. And Bye.

XRumerTest

Hello. And Bye.