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

代码哈士奇

发布于 2021-01-26 15:05:58

7010

发布于 2021-01-26 15:05:58

文章被收录于专栏：dmhsq_csdn_blogdmhsq_csdn_blog

数据处理

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

编写api.js文件

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

searchMusic搜索音乐

getKey 获取vkey以便于获取音频

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

getLyric 获取歌词

axiosFun文件(可以忽略) api.js中的axios直接为import {axios} from ‘axios’

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中的数据

当然

遍历list对每个歌曲信息进行处理我们只需要

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就是歌曲资源地址

sip中的两个可以实现切换播放源当sip0不可以就切换sip1试试看

获取歌曲

我们可以用拼接的形式获

然后生成一个音频对象

在自己的播放器中操作

new Audio(`播放地址`)

处理歌词

歌词接口返回的数据是这样的

base64加密的数据

base64解码后的数据是歌词加时间戳

歌词解码

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

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

		let docs = [];
        let dtc = [];
        str = str.split("\n");
        str.forEach(item => {
          let strs = item.split("]");
          if (strs[1] !== "") {
            let s = strs[0];
            let min = s.slice(1, 6);
            let data = [{ time: min, doc: strs[1] }];
            docs = docs.concat(data);
          }
        });

时间戳可以用来判断歌词是否应该设置当前歌句变大

也可以通过计算两句歌词之间的时间差来设置字的颜色从左到右的变化时间

如果不设置高亮和字体变化也可以歌曲放到哪里就显示哪句歌词

给歌词所在的div设置一个样式

1.jpg是背景图

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

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

<div class="transfr" id="gunDoc">
        <p
          v-for="item in docs"
          :key="item"
          style="color: white"
          @click="chanto(item)"
        >
          <span :class="{ gop: item.time === isP }">{{ item.doc }}</span>
        </p>
</div>

动态绑定class 比如高亮变大

处理时间个滚动

因为一开始歌曲歌词不需要滚动所以我设置300来测试效果

可以通过获取屏幕的高度来设置

let vm = this;
.../处理播放和暂停，暂停清楚定时器  clearInterval(this.timer);
  this.timer = setInterval(function() {
          if (!vm.mp.duration) {
            vm.value = 0;
          } else {
            vm.value = ((vm.mp.currentTime / vm.mp.duration) * 100).toFixed(1);

            if (vm.mp.currentTime !== vm.mp.duration) {
              let doc = document.getElementById("gunDoc");
              let s1 = parseInt(vm.mp.currentTime);
              let min = "0" + parseInt(s1 / 60).toString();
              let m = s1 % 60;
              if (m < 10) {
                m = "0" + m.toString();
              } else {
                m = m.toString();
              }
              let time = min + ":" + m;
              s1 = s1.toString();
              console.log(s1);
              if (docs.search(time) !== -1) {
                console.log("卧槽");
                vm.tansnow += 18;
                console.log(vm.transforms);
                vm.isP = time;
                if (vm.tansnow > 300) {
                  vm.transforms += 18;
                  vm.$nextTick(() => {
                    doc.scrollTop = vm.transforms;
                  });
                }
              }
            } else {
              clearInterval(this.timer);
            }
            // console.log(vm.value);
          }
        }, 500);

使用$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>
                <!--                <a :href="urls" download="mp3"><van-icon name="down" /></a>-->
                <van-icon
                  :name="isLove(item.love)"
                  color="red"
                  size="32"
                  @click="unlikes(item, index)"
                />
                <!--                <van-icon name="pause-circle-o" />-->
              </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。 未经本人允许，禁止转载