VUE---爬虫播放器(四)---功能实现--vue3

朴灿烈づ我的快乐病毒、 2022-12-27 11:26 175阅读 0赞

### 数据处理 ###

*  编写api.js文件
 *  处理获取的数据
 *   *  存储歌曲信息
     *  获取歌曲vkey
     *  获取歌曲
     *  处理歌词
     *  获取图像
 *  喜欢或不喜欢歌曲

> 如果我们找到别的播放器的接口，就可以实现一个播放器，这个接口获取不到就换接口，就是换源

# 编写api.js文件 #

> 不是自己的接口所以没有设置axios请求拦截器

searchMusic搜索音乐

getKey 获取vkey以便于获取音频

getMp获取音乐 可以直接通过拼接vkey来实现 见 [寻找接口][Link 1]

getLyric 获取歌词

axiosFun文件(可以忽略) api.js中的axios直接为import \{axios\} from ‘axios’  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]

import {axios} from './axiosFun'
    
    export const searchMusic = (p, w) => {
      return axios.get(`api/client_search_cp?p=${p}&n=10&w=${w}`);
    };
    
    export const getKey = (id)=>{
      return axios.get(
        `/aki/musicu.fcg?data={"req":{"module":"CDN.SrfCdnDispatchServer","method":"GetCdnDispatch","param":{"guid":"0","calltype":0,"userip":""}},"req_0":{"module":"vkey.GetVkeyServer","method":"CgiGetVkey","param":{"guid":"0","songmid":["${id}"],"songtype":[0],"uin":"0","loginflag":1,"platform":"20"}},"comm":{"uin":0,"format":"json","ct":24,"cv":0}}`
      );
    }
    
    export const getMp = (url)=>{
      return axios.get(`/awe/${url}`)
    }
    
    export const getLyric = (id)=>{
      return axios.get(`/aqr/fcg_query_lyric_new.fcg?songmid=${id}`)
    }

# 处理获取的数据 #

接口说明和参数请见 接口获取

## 存储歌曲信息 ##

我们需要的是下面图中list和totalnum中的数据  
当然  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]![在这里插入图片描述][20201210202928477.png]

遍历list对每个歌曲信息进行处理 我们只需要  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 2]

albumname歌曲名字  
albummid用来获取图像  
media\_mid用来获取歌曲vkey和歌词  
singer歌手  
用一个新的数组来存储它就行

let music = JSON.parse(res.data.slice(9, -1)).data.song;
            let musics = music.list;
            this.totalNum = music.totalnum;

**解释参数**  
music对应的是返回的数据中的song  
musics代表list中的内容  
totalNum就是歌曲总量便于使用vant3的列表懒加载

> totalNum是会变化的 一般返回的是150/600但其实数量未必是这个

令命名一个数组来拼接

> singers里面未必有一个可以通过他的长度来判断或者用剩余计算符 …来赋值

musics.forEach(item => {
              let singers = "";
              singers = item.singer[0].name;
              let data = [
                {
                  name: item.albumname,
                  id: item.media_mid,
                  albumid: item.albummid,
                  singer: singers,
                  love: false
                }
              ];
              datas = datas.concat(data);
            });

这样我们就得到了一组数据 默认love为false

## 获取歌曲vkey ##

我们需要的数据是  
sip和midurlinfo中的purl

> sip+purl就是歌曲资源地址

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 3]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 4]

sip中的两个可以实现切换播放源当sip\[0\]不可以就切换sip\[1\]试试看

## 获取歌曲 ##

我们可以用拼接的形式获  
然后生成一个音频对象  
在自己的播放器中操作

new Audio(`播放地址`)

## 处理歌词 ##

歌词接口返回的数据是这样的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 5]  
base64加密的数据  
base64解码后的数据是歌词加时间戳  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 6]  
歌词解码

decodeURIComponent(
              escape(atob(JSON.parse(res.data.slice(18, -1)).lyric))
            );

我们把时间戳和歌词拆分开来做处理

时间戳可以用来判断歌词是否应该设置当前歌句变大  
也可以通过计算两句歌词之间的时间差来设置字的颜色从左到右的变化时间  
如果不设置高亮和字体变化也可以歌曲放到哪里就显示哪句歌词

给歌词所在的div设置一个样式  
1.jpg是背景图

{
      background-image: url("/1.jpg");
      position: absolute;
      top: 0;
      width: 100%;
      height: 740px;
      overflow: scroll;
      color: white;
    }

isP是当前播放时间定时器获取

动态绑定class 比如高亮变大

处理时间个滚动  
因为一开始歌曲歌词不需要滚动 所以我设置300来测试效果  
可以通过获取屏幕的高度来设置

使用$nextTic是为了立即刷新DOM，让歌词滚动效果显示出来

## 获取图像 ##

**GET**  
接口地址:https://y.gtimg.cn/music/photo\_new/T002R300x300M000$\{id\}\_1.jpg  
id为我们之前说的albummid

# 喜欢或不喜欢歌曲 #

将歌曲列表中的歌曲添加至喜欢列表存至本地缓存

<van-cell v-for="(item, index) in loveLists" :key="item" :title="item.name" size="large" :label="item.singer" style="text-align: left" @click="ready(item)" >
                  <template #right-icon>
                    
                    <van-icon :name="isLove(item.love)" color="red" size="32" @click="unlikes(item, index)" />
                    
                  </template>
                </van-cell>
    
    
    likes(item, index) {
          if (!this.musicList[index].love) {
            let loveList = localStorage.getItem("loveList");
            if (loveList === null) {
              let loveL = [];
              loveL.unshift(item);
              localStorage.setItem("loveList", JSON.stringify(loveL));
            } else {
              loveList = JSON.parse(loveList);
              loveList.unshift(item);
              localStorage.setItem("loveList", JSON.stringify(loveList));
            }
            this.musicList[index].love = !this.musicList[index].love;
          } else {
            let loveList = localStorage.getItem("loveList");
            loveList = JSON.parse(loveList);
            loveList.forEach((items, indexs) => {
              if (items.name === item.name && items.singer === item.singer) {
                loveList.splice(indexs, 1);
              }
            });
            if (!loveList[0]) {
              this.isEmptys = true;
            }
            localStorage.setItem("loveList", JSON.stringify(loveList));
            this.musicList[index].love = !this.musicList[index].love;
          }
        },

> `根据这些加上反向代理你就可以做一个爬虫播放器，但是 请勿商用`

> `本文只是讲如何寻找接口，滥用别人接口导致的后果自行负责。`

>   大家好，我是代码哈士奇，是一名软件学院网络工程的学生，因为我是“狗”，狗走千里吃肉。想把大学期间学的东西和大家分享，和大家一起进步。但由于水平有限，博客中难免会有一些错误出现，有纰漏之处恳请各位大佬不吝赐教！暂时只在csdn这一个平台进行更新，博客主页：[https://blog.csdn.net/qq\_42027681][https_blog.csdn.net_qq_42027681]。

> `未经本人允许，禁止转载`

![在这里插入图片描述][20201110144238980.gif_pic_center]

后续会推出

前端：vue入门 vue开发小程序 等  
后端： java入门 springboot入门等  
服务器：mysql入门 服务器简单指令 云服务器运行项目  
python：推荐[不温卜火][Link 2] 一定要看哦  
一些插件的使用等

大学之道亦在自身，努力学习，热血青春  
如果对编程感兴趣可以加入我们的qq群一起交流：974178910  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]

有问题可以下方留言，看到了会回复哦

[Link 1]: https://blog.csdn.net/qq_42027681/article/details/110733250
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]: /images/20221120/a5e265746b6f496eb5410d542086a9be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201210202350108.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70
[20201210202928477.png]: https://img-blog.csdnimg.cn/20201210202928477.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201210202659379.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201210204219333.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201210204237547.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201210205147212.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201210205518562.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_qq_42027681]: https://blog.csdn.net/qq_42027681
[20201110144238980.gif_pic_center]: https://img-blog.csdnimg.cn/20201110144238980.gif#pic_center
[Link 2]: https://buwenbuhuo.blog.csdn.net/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201118225427296.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70#pic_center