左下脚音乐优化,可拉进度,可缩小

This commit is contained in:
1152958806@qq.com 2023-07-05 22:50:48 +08:00
parent 93c6e93780
commit eb8305c96f
6 changed files with 146 additions and 92 deletions

View File

@ -1,5 +1,8 @@
let heo_cookiesTime = null;
let heo_musicPlaying = false;
// 第一次播放音乐
var heo_musicFirst = false;
// 音乐播放状态
var heo_musicPlaying = false;
let heo_keyboard = false;
let heo_intype = false;
// 私有函数
@ -354,35 +357,66 @@ var heo = {
},
//切换音乐播放状态
musicToggle: function() {
heo_musicPlaying ? (document.querySelector("#nav-music").classList.remove("playing"),
document.getElementById("menu-music-toggle").innerHTML = '<i class="anzhiyufont anzhiyu-icon-play"></i><span>播放音乐</span>',
document.getElementById("nav-music-hoverTips").innerHTML = "音乐已暂停",
document.querySelector("#consoleMusic").classList.remove("on"),
btf.snackbarShow("暂停音乐", false, 2000),
heo_musicPlaying = !1) : (document.querySelector("#nav-music").classList.add("playing"),
document.getElementById("menu-music-toggle").innerHTML = '<i class="anzhiyufont anzhiyu-icon-pause"></i><span>暂停音乐</span>',
document.querySelector("#consoleMusic").classList.add("on"),
btf.snackbarShow("播放音乐", false, 2000),
heo_musicPlaying = !0),
document.querySelector("meting-js").aplayer.toggle(),
rm.hideRightMenu()
musicToggle: function (changePaly = true) {
const navMusicEl = document.getElementById("nav-music");
if (!heo_musicFirst) {
heo.musicBindEvent();
heo_musicFirst = true;
}
let msgPlay = '<i class="anzhiyufont anzhiyu-icon-play"></i><span>播放音乐</span>';
let msgPause = '<i class="anzhiyufont anzhiyu-icon-pause"></i><span>暂停音乐</span>';
if (heo_musicPlaying) {
navMusicEl.classList.remove("playing");
document.getElementById("menu-music-toggle").innerHTML = msgPlay;
document.getElementById("nav-music-hoverTips").innerHTML = "音乐已暂停";
document.querySelector("#consoleMusic").classList.remove("on");
heo_musicPlaying = false;
navMusicEl.classList.remove("stretch");
} else {
navMusicEl.classList.add("playing");
document.getElementById("menu-music-toggle").innerHTML = msgPause;
document.querySelector("#consoleMusic").classList.add("on");
heo_musicPlaying = true;
navMusicEl.classList.add("stretch");
}
if (changePaly) document.querySelector("#nav-music meting-js").aplayer.toggle();
rm.hideRightMenu();
},
// 音乐绑定事件
musicBindEvent: function () {
document.querySelector("#nav-music .aplayer-music").addEventListener("click", function () {
heo.musicTelescopic();
});
document.querySelector("#nav-music .aplayer-button").addEventListener("click", function () {
heo.musicToggle(false);
});
},
// 音乐伸缩
musicTelescopic: function () {
const navMusicEl = document.getElementById("nav-music");
if (navMusicEl.classList.contains("stretch")) {
navMusicEl.classList.remove("stretch");
} else {
navMusicEl.classList.add("stretch");
}
},
//音乐上一曲
musicSkipBack: function() {
musicSkipBack: function () {
document.querySelector("meting-js").aplayer.skipBack(),
rm.hideRightMenu()
},
//音乐下一曲
musicSkipForward: function() {
musicSkipForward: function () {
document.querySelector("meting-js").aplayer.skipForward(),
rm.hideRightMenu()
},
//获取音乐中的名称
musicGetName: function() {
musicGetName: function () {
for (var e = $(".aplayer-title"), t = [], o = e.length - 1; o >= 0; o--)
t[o] = e[o].innerText;
return t[0]

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
"use strict";function _objectSpread(a){for(var b=1;b<arguments.length;b++){var c=null==arguments[b]?{}:arguments[b],d=Object.keys(c);"function"==typeof Object.getOwnPropertySymbols&&(d=d.concat(Object.getOwnPropertySymbols(c).filter(function(a){return Object.getOwnPropertyDescriptor(c,a).enumerable}))),d.forEach(function(b){_defineProperty(a,b,c[b])})}return a}function _defineProperty(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}class MetingJSElement extends HTMLElement{connectedCallback(){window.APlayer&&window.fetch&&(this._init(),this._parse())}disconnectedCallback(){this.lock||this.aplayer.destroy()}_camelize(a){return a.replace(/^[_.\- ]+/,"").toLowerCase().replace(/[_.\- ]+(\w|$)/g,(a,b)=>b.toUpperCase())}_init(){let a={};for(let b=0;b<this.attributes.length;b+=1)a[this._camelize(this.attributes[b].name)]=this.attributes[b].value;let b=["server","type","id","api","auth","auto","lock","name","title","artist","author","url","cover","pic","lyric","lrc"];this.meta={};for(var c=0;c<b.length;c++){let d=b[c];this.meta[d]=a[d],delete a[d]}this.config=a,this.api=this.meta.api||window.meting_api||"https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r",this.meta.auto&&this._parse_link()}_parse_link(){let a=[["music.163.com.*song.*id=(\\d+)","netease","song"],["music.163.com.*album.*id=(\\d+)","netease","album"],["music.163.com.*artist.*id=(\\d+)","netease","artist"],["music.163.com.*playlist.*id=(\\d+)","netease","playlist"],["music.163.com.*discover/toplist.*id=(\\d+)","netease","playlist"],["y.qq.com.*song/(\\w+).html","tencent","song"],["y.qq.com.*album/(\\w+).html","tencent","album"],["y.qq.com.*singer/(\\w+).html","tencent","artist"],["y.qq.com.*playsquare/(\\w+).html","tencent","playlist"],["y.qq.com.*playlist/(\\w+).html","tencent","playlist"],["xiami.com.*song/(\\w+)","xiami","song"],["xiami.com.*album/(\\w+)","xiami","album"],["xiami.com.*artist/(\\w+)","xiami","artist"],["xiami.com.*collect/(\\w+)","xiami","playlist"]];for(var b=0;b<a.length;b++){let c=a[b],d=new RegExp(c[0]),e=d.exec(this.meta.auto);if(null!==e)return this.meta.server=c[1],this.meta.type=c[2],void(this.meta.id=e[1])}}_parse(){if(this.meta.url){let a={name:this.meta.name||this.meta.title||"Audio name",artist:this.meta.artist||this.meta.author||"Audio artist",url:this.meta.url,cover:this.meta.cover||this.meta.pic,lrc:this.meta.lrc||this.meta.lyric||"",type:this.meta.type||"auto"};return a.lrc||(this.meta.lrcType=0),this.innerText&&(a.lrc=this.innerText,this.meta.lrcType=2),void this._loadPlayer([a])}let a=this.api.replace(":server",this.meta.server).replace(":type",this.meta.type).replace(":id",this.meta.id).replace(":auth",this.meta.auth).replace(":r",Math.random());fetch(a).then(a=>a.json()).then(a=>this._loadPlayer(a))}_loadPlayer(a){let b={audio:a,mutex:!0,lrcType:this.meta.lrcType||3,storageName:"metingjs"};if(a.length){let a=_objectSpread({},b,this.config);for(let b in a)("true"===a[b]||"false"===a[b])&&(a[b]="true"===a[b]);let c=document.createElement("div");a.container=c,this.appendChild(c),this.aplayer=new APlayer(a)}}}window.customElements&&!window.customElements.get("meting-js")&&(window.MetingJSElement=MetingJSElement,window.customElements.define("meting-js",MetingJSElement));
"use strict";function _objectSpread(a){for(var b=1;b<arguments.length;b++){var c=null==arguments[b]?{}:arguments[b],d=Object.keys(c);"function"==typeof Object.getOwnPropertySymbols&&(d=d.concat(Object.getOwnPropertySymbols(c).filter(function(a){return Object.getOwnPropertyDescriptor(c,a).enumerable}))),d.forEach(function(b){_defineProperty(a,b,c[b])})}return a}function _defineProperty(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}class MetingJSElement extends HTMLElement{connectedCallback(){window.APlayer&&window.fetch&&(this._init(),this._parse())}disconnectedCallback(){this.lock||this.aplayer.destroy()}_camelize(a){return a.replace(/^[_.\- ]+/,"").toLowerCase().replace(/[_.\- ]+(\w|$)/g,(a,b)=>b.toUpperCase())}_init(){let a={};for(let b=0;b<this.attributes.length;b+=1)a[this._camelize(this.attributes[b].name)]=this.attributes[b].value;let b=["server","type","id","api","auth","auto","lock","name","title","artist","author","url","cover","pic","lyric","lrc"];this.meta={};for(var c=0;c<b.length;c++){let d=b[c];this.meta[d]=a[d],delete a[d]}this.config=a,this.api=this.meta.api||window.meting_api||"https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r",this.meta.auto&&this._parse_link()}_parse_link(){let a=[["music.163.com.*song.*id=(\\d+)","netease","song"],["music.163.com.*album.*id=(\\d+)","netease","album"],["music.163.com.*artist.*id=(\\d+)","netease","artist"],["music.163.com.*playlist.*id=(\\d+)","netease","playlist"],["music.163.com.*discover/toplist.*id=(\\d+)","netease","playlist"],["y.qq.com.*song/(\\w+).html","tencent","song"],["y.qq.com.*album/(\\w+).html","tencent","album"],["y.qq.com.*singer/(\\w+).html","tencent","artist"],["y.qq.com.*playsquare/(\\w+).html","tencent","playlist"],["y.qq.com.*playlist/(\\w+).html","tencent","playlist"],["xiami.com.*song/(\\w+)","xiami","song"],["xiami.com.*album/(\\w+)","xiami","album"],["xiami.com.*artist/(\\w+)","xiami","artist"],["xiami.com.*collect/(\\w+)","xiami","playlist"]];for(var b=0;b<a.length;b++){let c=a[b],d=new RegExp(c[0]),e=d.exec(this.meta.auto);if(null!==e)return this.meta.server=c[1],this.meta.type=c[2],void(this.meta.id=e[1])}}_parse(){if(this.meta.url){let a={name:this.meta.name||this.meta.title||"Audio name",artist:this.meta.artist||this.meta.author||"Audio artist",url:this.meta.url,cover:this.meta.cover||this.meta.pic,lrc:this.meta.lrc||this.meta.lyric||"",type:this.meta.type||"auto"};return a.lrc||(this.meta.lrcType=0),this.innerText&&(a.lrc=this.innerText,this.meta.lrcType=2),void this._loadPlayer([a])}let a=this.api.replace(":server",this.meta.server).replace(":type",this.meta.type).replace(":id",this.meta.id).replace(":auth",this.meta.auth).replace(":r",Math.random());fetch(a).then(a=>a.json()).then(a=>this._loadPlayer(a))}_loadPlayer(a){let b={audio:a,mutex:!0,lrcType:this.meta.lrcType||3,storageName:"metingjs"};if(a.length){let a=_objectSpread({},b,this.config);for(let b in a)("true"===a[b]||"false"===a[b])&&(a[b]="true"===a[b]);let c=document.createElement("div");a.container=c,this.appendChild(c),this.aplayer=new APlayer(a)}}}console.log("\n %c MetingJS v2.0.1 %c https://github.com/metowolf/MetingJS \n","color: #fadfa3; background: #030307; padding:5px 0;","background: #fadfa3; padding:5px 0;"),window.customElements&&!window.customElements.get("meting-js")&&(window.MetingJSElement=MetingJSElement,window.customElements.define("meting-js",MetingJSElement));

View File

@ -6154,8 +6154,16 @@ html {
}
}
/* 音乐播放器 */
.aplayer.aplayer-narrow .aplayer-body,
.aplayer.aplayer-narrow .aplayer-pic {
height: 66px;
width: 66px;
}
/* 导航栏音乐 */
@media screen and (max-width: 798px) {
@media screen and (max-width: 1200px) {
#nav-music {
display: none !important;
}
@ -6164,35 +6172,31 @@ html {
#nav-music {
display: flex;
align-items: center;
z-index: 1001;
z-index: 9;
position: fixed;
bottom: 20px;
left: 20px;
cursor: pointer;
transition: 0.3s;
transition: all 0.5s, left 0s;
transform-origin: left bottom;
box-shadow: var(--heo-shadow-border);
border-radius: 40px;
overflow: hidden;
user-select: none;
}
#nav-music span {
user-select: none;
}
#nav-music div {
user-select: none;
#nav-music:active {
transform: scale(0.97);
}
#nav-music.playing {
border: var(--style-border);
box-shadow: 0 0px 12px -3px var(--heo-none);
-webkit-animation: playingShadow 5s linear infinite;
animation: playingShadow 5s linear infinite;
}
@-webkit-keyframes playingShadow {
@keyframes playingShadow {
0% {
box-shadow: 0 0px 12px -6px var(--heo-none);
box-shadow: 0 0px 12px -3px var(--heo-none);
}
50% {
@ -6200,7 +6204,7 @@ html {
}
100% {
box-shadow: 0 0px 12px -6px var(--heo-none);
box-shadow: 0 0px 12px -3px var(--heo-none);
}
}
@ -6210,43 +6214,42 @@ html {
border-radius: 40px;
z-index: 1;
transition: 0.3s;
-webkit-transform: rotate(0deg)scale(1);
transform: rotate(0deg) scale(1);
border: var(--style-border-always);
-webkit-animation: changeright 24s linear infinite;
animation: changeright 24s linear infinite;
animation-play-state: paused;
}
#nav-music.playing .aplayer.aplayer-withlrc .aplayer-pic {
box-shadow: 0 0 14px #ffffffa6;
-webkit-transform: rotate(0deg)scale(1.1);
transform: rotate(0deg) scale(1.1);
border-color: var(--heo-white);
animation-play-state: running;
}
@-webkit-keyframes changeright {
@keyframes changeright {
0% {
-webkit-transform: rotate(0deg)scale(1.1);
transform: rotate(0deg) scale(1.1);
box-shadow: 0 0 2px #ffffff00;
}
25% {
-webkit-transform: rotate(90deg)scale(1.1);
box-shadow: 0 0 10px #ffffff;
transform: rotate(90deg) scale(1.1);
box-shadow: 0 0 14px #ffffff;
}
50% {
-webkit-transform: rotate(180deg)scale(1.1);
transform: rotate(180deg) scale(1.1);
box-shadow: 0 0 2px #ffffff00;
}
75% {
-webkit-transform: rotate(270deg)scale(1.1);
box-shadow: 0 0 10px #ffffff;
transform: rotate(270deg) scale(1.1);
box-shadow: 0 0 14px #ffffff;
}
100% {
-webkit-transform: rotate(360deg)scale(1.1);
transform: rotate(360deg) scale(1.1);
box-shadow: 0 0 2px #ffffff00;
}
}
@ -6254,7 +6257,7 @@ html {
#nav-music .aplayer.aplayer-withlrc .aplayer-info {
height: 100%;
color: var(--heo-fontcolor);
margin-left: 8px;
margin: 0;
padding: 0;
display: flex;
align-items: center;
@ -6264,6 +6267,10 @@ html {
color: var(--heo-white);
}
#nav-music.playing #nav-music-hoverTips {
width: 0;
opacity: 0;
}
#nav-music #nav-music-hoverTips {
color: var(--heo-white);
background: var(--heo-main);
@ -6278,9 +6285,7 @@ html {
border-radius: 40px;
opacity: 0;
font-size: 12px;
transition: 0s;
z-index: 2;
pointer-events: none;
transition: 0.3s;
}
@ -6288,27 +6293,33 @@ html {
opacity: 1;
}
#nav-music.playing #nav-music-hoverTips {
opacity: 0;
#nav-music
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-bar-wrap:hover
.aplayer-bar
.aplayer-played
.aplayer-thumb {
display: none;
}
#nav-music .aplayer {
background: var(--heo-card-bg);
background: var(--card-bg);
border-radius: 60px;
height: 41px;
display: flex;
margin: 0;
pointer-events: none;
transition: 0.3s;
border: var(--style-border);
box-shadow: none;
}
#nav-music.playing .aplayer {
background: var(--heo-main-op-deep);
background: var(--heo-main);
border: var(--style-border-hover);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
transform: translateZ(0);
}
@ -6324,12 +6335,6 @@ html {
position: relative;
display: flex;
align-items: center;
padding: 0 8px;
padding-right: 12px;
}
#nav-music .aplayer .aplayer-pic .aplayer-play {
opacity: 0;
}
#nav-music .aplayer-list {
@ -6340,8 +6345,10 @@ html {
margin: 0;
display: flex;
align-items: center;
padding: 0;
padding: 0 12px 0 8px;
cursor: pointer;
z-index: 1;
height: 100%;
}
#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-time {
@ -6356,10 +6363,20 @@ html {
border: none;
}
#nav-music .aplayer .aplayer-pic div {
display: none;
#nav-music .aplayer .aplayer-pic .aplayer-button {
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
margin: 0;
transition: 0.3s;
}
#nav-music .aplayer .aplayer-pic:has(.aplayer-button.aplayer-play) {
animation-play-state: paused;
transform: rotate(0deg) scale(1) !important;
}
#nav-music .aplayer.aplayer-withlrc .aplayer-pic {
margin-left: 8px;
}
#nav-music .aplayer .aplayer-info .aplayer-music .aplayer-title {
cursor: pointer;
line-height: 1;
@ -6369,6 +6386,7 @@ html {
overflow: hidden;
text-overflow: ellipsis;
transition: 0.3s;
user-select: none;
}
#nav-music .aplayer .aplayer-info .aplayer-controller {
@ -6386,12 +6404,7 @@ html {
#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
height: 100%;
background: none;
opacity: 0;
}
#nav-music.playing .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
opacity: 1;
background: 0 0;
}
#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
@ -6402,7 +6415,7 @@ html {
height: 100%;
opacity: 0.1;
background-color: var(--heo-white) !important;
-webkit-animation: lightBar 5s ease infinite;
animation: lightBar 5s ease infinite;
animation-play-state: paused;
}
@ -6410,8 +6423,7 @@ html {
animation-play-state: running;
}
@-webkit-keyframes lightBar {
@keyframes lightBar {
0% {
opacity: 0.1;
}
@ -6430,31 +6442,42 @@ html {
width: 0;
opacity: 0;
transition: 0.3s;
margin-left: 8px;
margin-top: -2px;
padding: 5px 0;
}
#nav-music.playing .aplayer.aplayer-withlrc .aplayer-lrc {
#nav-music.stretch .aplayer.aplayer-withlrc .aplayer-lrc {
width: 200px;
margin-bottom: 0;
margin-left: 8px;
opacity: 1;
}
#nav-music .aplayer .aplayer-lrc p {
color: #ffffffb3;
filter: blur(0.8px);
}
#nav-music .aplayer .aplayer-lrc p.aplayer-lrc-current {
color: var(--heo-white);
border: none;
filter: blur(0px);
min-height: 20px;
}
#nav-music .aplayer .aplayer-lrc:after, #nav-music .aplayer .aplayer-lrc:before {
#nav-music .aplayer .aplayer-lrc:after,
#nav-music .aplayer .aplayer-lrc:before {
display: none;
}
#nav-music .aplayer .aplayer-lrc p {
color: #ffffffb3;
line-height: 40px !important;
height: 40px !important;
margin: 0px 0;
vertical-align: top;
/* display: inline-block; */
}
#nav-music .aplayer .aplayer-pic {
pointer-events: none;
}
#nav-music .aplayer .aplayer-pic .aplayer-button {
pointer-events: all;
}
/* 导航栏隐藏文字 */
/* #menus > div.menus_items > div > a > span{
display: none;

View File

@ -2,10 +2,10 @@
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 音乐 -->
<div th:fragment="nav-music" class="needEndHide" id="nav-music" onclick="heo.musicToggle()">
<div id="nav-music-hoverTips">播放音乐</div>
<meting-js th:id="${theme.config.other.nav_music.id}" th:server="${theme.config.other.nav_music.server}" type="playlist" mutex="true" preload="none" theme="var(--heo-main)" data-lrctype="0" order="random">
</meting-js>
<div th:fragment="nav-music" class="needEndHide" id="nav-music" >
<a id="nav-music-hoverTips" onclick="heo.musicToggle()" accesskey="m">播放音乐</a>
<div id="console-music-bg"></div><meting-js th:id="${theme.config.other.nav_music.id}" th:server="${theme.config.other.nav_music.server}" type="playlist" mutex="true"
preload="none" theme="var(--heo-main)" data-lrctype="0" order="random"></meting-js>
</div>
</html>