|
最近在给公司写一套系统,很忙,今天周末写篇文章
之前给老爸下歌的时候,发现有些歌需要付费或会员才能下载
这里通过抓取酷狗的api,实现音乐的免费听免费下载(只能试听的歌曲不能完整下载)
先来张图片(很简单的界面,没做美化)
注:本人没怎么学过VUE和element-ui 只会基本的操作!!
这就是搜索歌曲的api了
里面一些参数根据名字应该都能猜出来,page就是页数,keyword就是搜索的关键字,pagesize就是一页显示多少条数据,就不一一介绍了
这是歌曲的api,根据Hash值识别对应歌曲
好了,api搞定,开始进入正事
先搭建个VUE的脚手架,然后引入element-UI
因为需要跨域,我这里使用的是jsonp插件
jsonp插件安装命令 cnpm install jsonp --save
安装成功后引入即可
js部分代码,仅供学习,要完整的私聊我吧(这篇文章主要是记录一下,写的不细,纯小白的话估计很难看懂)
- <script>
- // import axios from 'axios'
- export default {
- data () {
- return {
- input: '',
- musicArr:[],
- audioUrl:'',
- topIndex:'none'
- }
- },
- methods:{
- search(){
- if(this.input == ""){
- this.open('请输入搜索内容!');
- }else{
- this.musicArr = [];
- this.$jsonp('https://songsearch.kugou.com/song_search_v2?keyword='+this.input+'&page=1&pagesize=30&platform=WebFilter').then(res => {
- for(let i in res.data.lists){
- //用json格式存储信息
- let arr = {'FileHash':'','FileName':'','SingerName':'','img':'','play_url':'','icon':'el-icon-video-play'};
- arr.FileHash = res.data.lists[i].FileHash;
- arr.FileName = res.data.lists[i].FileName;
- arr.SingerName = res.data.lists[i].SingerName;
- //根据Hash值获取歌曲图片和播放链接
- this.$jsonp('https://wwwapi.kugou.com/yy/index.php?r=play/getdata&hash='+arr.FileHash+'&mid=e4b3cf1d536edd000c08602515fe92aa').then(data=>{
- arr.play_url = data.data.play_url;
- arr.img = data.data.img;
- })
- //追加到歌曲列表
- this.musicArr.push(arr);
- }
- })
- console.log(this.musicArr);
- }
- },
- open(msg) {
- this.$message({
- message: msg,
- type: 'warning',
- offset:'200'
- });
- },
- play(url,index){
- for(let i in this.musicArr){
- if(index != i){
- this.musicArr[i].icon = 'el-icon-video-play';
- }
- }
- this.audioUrl = url;
- this.musicArr[index].icon = 'el-icon-video-pause';
- }
- }
- }
- </script>
复制代码
如需转载,请标注来自好麦麦源码网
|
1. 本站所有资源来源收集于用户上传和网络,如有侵权请邮件联系站长!
2. 本站联系邮箱:1784605674@qq.com
3. 需要定制软件/网站/各类程序开发,联系站长QQ:1784605674
|