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

templates/assets/js/heo.js

@@ -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() {
+    musicToggle: function (changePaly = true) {
-        heo_musicPlaying ? (document.querySelector("#nav-music").classList.remove("playing"),
+        const navMusicEl = document.getElementById("nav-music");
-            document.getElementById("menu-music-toggle").innerHTML = '<i class="anzhiyufont anzhiyu-icon-play"></i><span>播放音乐</span>',
+        if (!heo_musicFirst) {
-            document.getElementById("nav-music-hoverTips").innerHTML = "音乐已暂停",
+            heo.musicBindEvent();
-            document.querySelector("#consoleMusic").classList.remove("on"),
+            heo_musicFirst = true;
-            btf.snackbarShow("暂停音乐", false, 2000),
+        }
-            heo_musicPlaying = !1) : (document.querySelector("#nav-music").classList.add("playing"),
+        let msgPlay = '<i class="anzhiyufont anzhiyu-icon-play"></i><span>播放音乐</span>';
-            document.getElementById("menu-music-toggle").innerHTML = '<i class="anzhiyufont anzhiyu-icon-pause"></i><span>暂停音乐</span>',
+        let msgPause = '<i class="anzhiyufont anzhiyu-icon-pause"></i><span>暂停音乐</span>';
-            document.querySelector("#consoleMusic").classList.add("on"),
+        if (heo_musicPlaying) {
-            btf.snackbarShow("播放音乐", false, 2000),
+            navMusicEl.classList.remove("playing");
-            heo_musicPlaying = !0),
+            document.getElementById("menu-music-toggle").innerHTML = msgPlay;
-            document.querySelector("meting-js").aplayer.toggle(),
+            document.getElementById("nav-music-hoverTips").innerHTML = "音乐已暂停";
-            rm.hideRightMenu()
+            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]

templates/assets/libs/aplayer/Meting2.min.js

@@ -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));

templates/assets/zhheo/zhheoblog.css

@@ -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 {
+#nav-music:active {
-    user-select: none;
+    transform: scale(0.97);
-}
-
-#nav-music  div {
-    user-select: none;
 }
 
 #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);
+        transform: rotate(90deg) scale(1.1);
-        box-shadow: 0 0 10px #ffffff;
+        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);
+        transform: rotate(270deg) scale(1.1);
-        box-shadow: 0 0 10px #ffffff;
+        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 {
+#nav-music
-    opacity: 0;
+.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 {
+#nav-music .aplayer .aplayer-pic .aplayer-button {
-    display: none;
+    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;
+    background: 0 0;
-    opacity: 0;
-}
-
-#nav-music.playing .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
-    opacity: 1;
 }
 
 #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.stretch .aplayer.aplayer-withlrc .aplayer-lrc {
-#nav-music.playing .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;

templates/modules/nav-music.html

@@ -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 th:fragment="nav-music" class="needEndHide" id="nav-music" >
-    <div id="nav-music-hoverTips">播放音乐</div>
+    <a id="nav-music-hoverTips" onclick="heo.musicToggle()" accesskey="m">播放音乐</a>
-    <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">
+    <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"
-    </meting-js>
+                                                preload="none" theme="var(--heo-main)" data-lrctype="0" order="random"></meting-js>
 
 </div>
 </html>