模板:APlayer：修订间差异

可视化wikitext

@@ 第1行： / 第1行： @@
-<div id="aplayer-{{#var:id}}" class="aplayer"></div>
+<includeonly>
+<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.css">
+<script src="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
+<div id="aplayer-{{{id}}}" class="aplayer-box"></div>
 <script>
 (function() {
-     var ap = new APlayer({
+     // 颜色有效性检测
-         container: document.getElementById('aplayer-{{#var:id}}'),
+    const isValidColor = (color) => {
-        theme: '{{#var:theme | #f5f5f5}}', // 默认主题
+        const style = new Option().style;
-        loop: '{{#var:loop | all}}',       // 默认循环播放
+        style.color = color;
-         preload: '{{#var:preload | auto}}', // 默认自动预加载
+         return style.color !== '';
-        volume: {{#var:volume | 0.7}},      // 默认音量
+    };
-        mutex: true,                        // 互斥播放
-         listFolded: {{#var:listFolded | false}}, // 默认不折叠列表
+    // 容器配置
-         listMaxHeight: '{{#var:listMaxHeight | 300px}}', // 列表最大高度
+    const container = document.getElementById('aplayer-{{{id}}}');
-         audio: [
+    const defaultColor = '#2980b9';
-            {{#forargs:song|index|value|
-                {
+    // 主题色处理
-                    name: '{{#var:song{{index}}_name}}',
+    let themeColor = '{{{theme}}}'.trim();
-                    artist: '{{#var:song{{index}}_artist}}',
+    if (!isValidColor(themeColor)) {
-                    url: '{{#var:song{{index}}_url}}',
+        themeColor = defaultColor;
-                    cover: '{{#var:song{{index}}_cover}}',
+         console.warn('无效的颜色值，已恢复默认');
-                },
+    }
-            }}
-         ]
+    // 播放器配置
+    const ap = new APlayer({
+         container: container,
+         theme: themeColor,
+         audio: JSON.parse({{{songs}}}),
+        autoplay: {{{autoplay|false}}},
+        customAudioType: {}, // 防止预加载错误
+        lrcType: 0,
+         mutex: true
      });
-     // Widgets 集成 (如果需要)
+     // 动态应用主题色
-     if (window.Widget) {
+    const applyTheme = () => {
-        Widget.instance.registerAPlayer(ap);
+        const elements = container.querySelectorAll('.aplayer-bar-wrap, .aplayer-volume-wrap');
-     }
+        elements.forEach(el => {
+            el.style.backgroundColor = `${themeColor}33`; // 添加透明度
+        });
+        container.querySelector('.aplayer-info').style.borderColor = themeColor;
+    };
+    applyTheme();
+    // 窗口变化监听
+     window.addEventListener('resize', () => {
+        if(window.innerWidth <= 768) {
+            ap.list.show();
+        }
+     });
 })();
 </script>
-<noinclude>
-{{Documentation}}
+<style>
-</noinclude>
+/* 动态主题色增强 */
+.aplayer-box .aplayer-time {
+    border-top-color: {{{theme|#2980b9}}} !important;
+}
+.aplayer-box .aplayer-icon path {
+    fill: {{{theme|#2980b9}}};
+}
+@media screen and (max-width: 768px) {
+    .aplayer-box .aplayer-controller {
+        background: linear-gradient(90deg, {{{theme|#2980b9}}} 0%, #{darken({{{theme|#2980b9}}}, 10%)} 100%);
+    }
+}
+</style>
+</includeonly>

2025年3月22日 (六) 23:48的版本