procesamiento de datos
Si encontramos la interfaz de otro reproductor, podemos implementar un reproductor, si esta interfaz no está disponible, cambiaremos la interfaz, es decir, cambiaremos la fuente.
Escribir archivo api.js
No es su propia interfaz, por lo que no hay un conjunto de interceptor de solicitudes de axios
searchMusic búsqueda de música
getKey Obtenga vkey para acceder fácilmente al audio
getMp obtiene música directamente para ver lo logrado al empalmar la interfaz de aspecto vkey
getLyric Obtener letras
archivo axiosFun (se puede ignorar) axios en api.js se importa directamente {axios} desde '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}`)
}
Procesar los datos adquiridos
Para obtener la descripción y los parámetros de la interfaz, consulte la interfaz para obtener
Almacenar información de la canción
Lo que necesitamos son los datos en list y totalnum en la siguiente figura.
Por supuesto
Recorre la lista para procesar la información de cada canción que solo necesitamos
albumname nombre de la canción albummid se usa para obtener la imagen
media_mid se usa para obtener la canción vkey y la letra
cantante cantante
Usa una nueva matriz para almacenarla
let music = JSON.parse(res.data.slice(9, -1)).data.song;
let musics = music.list;
this.totalNum = music.totalnum;
El parámetro de explicación
music corresponde a las
músicas de la canción en los datos devueltos, que representan el contenido de la lista.
TotalNum es el número total de canciones , lo cual es conveniente para la carga diferida de la lista de vant3
El totalNum cambiará y generalmente devuelve 150/600, pero de hecho el número puede no ser este
Dejemos nombrar una matriz para concatenar
No necesariamente uno de los cantantes puede ser juzgado por su longitud o asignado con la calculadora restante ...
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);
});
De esta forma obtenemos un conjunto de datos, el amor predeterminado es falso
Obtener la canción vkey
Los datos que necesitamos son
purl in sip y midurlinfo
sip + purl es la dirección del recurso de la canción
Dos de sip pueden cambiar la fuente de reproducción. Cuando no sea posible sip [0], cambie sip [1] para probar
Obtener canciones
Podemos conseguirlo en forma de empalme
y luego generar un objeto de audio para
operar en nuestro propio reproductor
new Audio(`播放地址`)
Procesando letras
Los datos devueltos por la interfaz de letras son
datos cifrados en base64. Los
datos decodificados en Base64 son letras más marca de tiempo.
Decodificación de letras
decodeURIComponent(
escape(atob(JSON.parse(res.data.slice(18, -1)).lyric))
);
Separamos la marca de tiempo y la letra para procesar
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);
}
});
La marca de tiempo se puede usar para juzgar si la letra debe configurarse para que sea más grande en la canción actual.
También se puede configurar calculando la diferencia de tiempo entre las dos letras para configurar el tiempo de cambio del color de la palabra de izquierda a derecha.
Si no configura el resaltado y los cambios de fuente, también puede reproducir la canción. Muestra qué letras vayas donde vayas
Establece un estilo para el div donde se encuentran las letras.
1.jpg es la imagen de fondo
{
background-image: url("/1.jpg");
position: absolute;
top: 0;
width: 100%;
height: 740px;
overflow: scroll;
color: white;
}
isP es la adquisición del temporizador de tiempo de reproducción actual
<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>
Vincular clases dinámicamente, como resaltar para agrandar
Tiempo de procesamiento y desplazamiento.
Debido a que la letra de la canción no necesita desplazarse al principio, configuré 300 para probar el efecto. Se
puede establecer obteniendo la altura de la pantalla.
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);
Usar $ nextTic es actualizar el DOM inmediatamente, de modo que se muestre el efecto de desplazamiento de la letra
Obtener la imagen
OBTENGA la
dirección de la interfaz: https://y.gtimg.cn/music/photo_new/T002R300x300M000${id}_1.jpg
id es el albummid que mencionamos anteriormente
Me gusta o no me gustan las canciones
Agregue las canciones en la lista de canciones a la lista de favoritos y guárdelas en el caché local
<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;
}
},
根据这些加上反向代理你就可以做一个爬虫播放器，但是 请勿商用
本文只是讲如何寻找接口，滥用别人接口导致的后果自行负责。
Hola a todos, soy un code husky, un estudiante de ingeniería de redes en la Facultad de Software, porque soy un "perro" y puedo comer carne a miles de kilómetros. Quiero compartir lo que aprendí en la universidad y progresar con todos. Sin embargo, debido al nivel limitado, inevitablemente habrá algunos errores en el blog. Si hay alguna omisión, ¡házmelo saber! Por el momento, solo actualice en la plataforma csdn, la página de inicio del blog: https://blog.csdn.net/qq_42027681 .
未经本人允许，禁止转载
Se lanzará más tarde
Front-end: vue entrada vue subprograma de desarrollo, etc.
Back-end: entrada java entrada springboot, etc.
Servidor: servidor de entrada MySQL instrucciones simples servidor en la nube para ejecutar el proyecto
python: recomendado no calentar, asegúrese de ver
el uso de algunos complementos, etc.
El camino de la universidad también está en uno mismo, estudiar mucho, juventud
con pasión. Si te interesa la programación, puedes unirte a nuestro grupo qq para comunicarnos juntos: 974178910
Si tiene alguna pregunta, puede dejar un mensaje a continuación, le responderé si lo ve