資料處理
- 撰寫api.js檔案
- 處理獲取的資料
- 存盤歌曲資訊
- 獲取歌曲vkey
- 獲取歌曲
- 處理歌詞
- 獲取影像
- 喜歡或不喜歡歌曲
如果我們找到別的播放器的介面，就可以實作一個播放器，這個介面獲取不到就換介面，就是換源
撰寫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中的兩個可以實作切換播放源當sip[0]不可以就切換sip[1]試試看
獲取歌曲
我們可以用拼接的形式獲
然后生成一個音頻物件
在自己的播放器中操作
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，
未經本人允許，禁止轉載
后續會推出
前端：vue入門 vue開發小程式 等
后端： java入門 springboot入門等
服務器：mysql入門 服務器簡單指令 云服務器運行專案
python：推薦不溫卜火 一定要看哦
一些插件的使用等
大學之道亦在自身，努力學習，熱血青春
如果對編程感興趣可以加入我們的qq群一起交流：974178910
有問題可以下方留言，看到了會回復哦
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/233162.html
標籤：其他