网易云音乐解析
// ==UserScript==
// @name 网易云解析·凉
// @namespace http://tampermonkey.net/
// @version 1.3
// @description 网易云音乐解析
// @author wangkaixuan
// @match https://music.163.com/song*
// @icon https://www.google.com/s2/favicons?sz=64&domain=163.com
// @license Apache
// @grant GM_xmlhttpRequest
// ==/UserScript==
//界面设计
var title=""
var url="";
var shape = true;
const div = document.createElement('div');
const divs = document.createElement('div');
const span = document.createElement('span');
const button = document.createElement('button');
button.textContent = "が";
span.textContent="获取中..";
const audio = document.createElement('audio');
audio.controls = true;
audio.loop = true;
const text = document.createTextNode('浏览器版本过低');
audio.appendChild(text);
divs.appendChild(span);
divs.appendChild(button);
div.appendChild(audio);
div.appendChild(divs);
document.body.appendChild(div);
//button.addEventListener('click',function(){} )
button.addEventListener('click',function(){
if(shape){
div.style.width="110px";
div.style.height="110px";
divs.style.width="110px";
audio.style.width="110px";
span.style.opacity="0";}else{
div.style.width="300px";
div.style.height="125px";
divs.style.width="300px";
audio.style.width="300px";
span.style.opacity="1";
}shape=!shape
div.style.transition="width 0.6s ease-out, height 0.4s 0.7s";
})
div.style=`
position:fixed;
border-radius:30px;
width:300px;
height:125px;
background-color:#ddd;
border:6px solid black;
top:120px;
left:10px;
`
divs.style=`
border-radius:25px;
width:300px;
height:110px;
cursor: grab;
background-color: #ddd;
padding-top: 15px;
box-sizing: border-box;
transition: width 0.6s ease-out;
`
audio.style=`position:absolute;
bottom:0;
left:0;
z-index:90;
transition: width 0.6s ease-out;
`
button.style=`
position:absolute;
top:8px;
right:8px;
height:40px;
width:40px;
border:none;
font-size:20px;
z-index:11;
background-color: #ddd;
cursor: pointer;
font-weight:bold;
`
span.style=`
font-size:20px;
position:absolute;
left:10px;
z-index:10;
transition:opacity 0.4s 0.7s;
user-select:none;
max-height:100px;
overflow:hidden;
`
//鼠标拖动功能
let startX, startY;
// 定义变量，记录div元素的初始位置
let initialX, initialY;
// 定义变量，记录是否处于拖动状态
let isDragging = false;
// 鼠标按下事件监听器
divs.addEventListener('mousedown', function(e) {
// 记录鼠标按下时的位置
startX = e.clientX;
startY = e.clientY;
// 记录div元素的初始位置
const rect = div.getBoundingClientRect();
initialX = rect.left;
initialY = rect.top;
// 将状态设置为拖动状态
isDragging = true;
});
// 鼠标移动事件监听器
document.addEventListener('mousemove', function(e) {
// 如果不处于拖动状态，则直接返回
if (!isDragging) return;
div.style.transition="";
// 计算div元素的新位置
const dx = e.clientX - startX;
const dy = e.clientY - startY;
const newX = initialX + dx;
const newY = initialY + dy;
// 将div元素移到新位置
div.style.left = newX + 'px';
div.style.top = newY + 'px';
});
// 鼠标松开事件监听器
document.addEventListener('mouseup', function() {
// 将状态设置为非拖动状态
if(isDragging){
div.style.transition="top 0.3s ease-out,left 0.3s ease-out ";//过渡动画之间的配合和设计非常巧妙
if(div.getBoundingClientRect().top<110){div.style.top="110px"}
if(div.getBoundingClientRect().top>window.innerHeight-180){div.style.top=window.innerHeight-180+"px"}
if(div.getBoundingClientRect().left>window.innerWidth-160){div.style.left=window.innerWidth-160+"px"}
if(div.getBoundingClientRect().left<0){div.style.left=0+"px"}
localStorage.setItem("boxx", div.style.left);//保存
localStorage.setItem("boxy", div.style.top);//保存
// setTimeout(function(){div.style.transition="";},400)
isDragging = false;}
});
window.addEventListener('resize', function() {
if(div.getBoundingClientRect().top>window.innerHeight-180){div.style.top=window.innerHeight-180+"px"}
if(div.getBoundingClientRect().left>window.innerWidth-160){div.style.left=window.innerWidth-160+"px"}
});
var boxx = localStorage.getItem("boxx");//读取
var boxy = localStorage.getItem("boxy");//读取
if(boxx){
div.style.left = boxx;
div.style.top = boxy;}
//数据获取
var currentUrl = window.location.href;
//console.log(currentUrl);
var id = new URL(currentUrl).searchParams.get("id");
//console.log(id);
if(id){
var apiUrl = "https://api.paugram.com/netease/?id=" + id;
GM_xmlhttpRequest({
method: "GET",
url: apiUrl,
onload: function(response) {
var json = JSON.parse(response.responseText);
title = json.title;
url = json.link;
// console.log(title,url);
if(title){
span.textContent = title;}
audio.src =url;
}
});}