模板:APlayer：修订间差异

可视化wikitext

@@ 第1行： / 第1行： @@
 <includeonly>
-<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.css">
+<!-- 引入国内CDN加速的APlayer资源 -->
-<script src="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
+<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
-<div id="aplayer-{{{id}}}" class="aplayer-box"></div>
+<style>
+/* 移动端适配 */
+.aplayer {
+    max-width: 100%;
+    margin: 10px auto;
+    font-family: -apple-system, "PingFang SC", "Microsoft YaHei";
+}
+/* 小屏幕优化 */
+@media screen and (max-width: 768px) {
+    .aplayer-info {
+        padding: 8px;
+    }
+    .aplayer-author {
+        font-size: 12px;
+    }
+    .aplayer-controller .aplayer-bar {
+        margin: 0 5px;
+    }
+}
+</style>
+<div class="aplayer-box"
+     data-title="{{{1|}}}"
+     data-author="{{{2|}}}"
+     data-pic="{{{3|}}}"
+     data-url="{{{4|}}}"
+     {{#forargs: song |
+         | data-song-{{#var:key}} = "{{#var:value}}"
+     }}>
+</div>
 <script>
 (function() {
-     // 颜色有效性检测
+     // 收集歌曲数据
-     const isValidColor = (color) => {
+     var songs = [];
-        const style = new Option().style;
+     var box = document.querySelector('.aplayer-box');
-        style.color = color;
-        return style.color !== '';
-    };
-    // 容器配置
-     const container = document.getElementById('aplayer-{{{id}}}');
-    const defaultColor = '#2980b9';
-     // 主题色处理
+     // 处理多首歌曲参数
-     let themeColor = '{{{theme}}}'.trim();
+     for(var i = 1; ; i++) {
-    if (!isValidColor(themeColor)) {
+        var prefix = "song" + i;
-        themeColor = defaultColor;
+        var data = {
-         console.warn('无效的颜色值，已恢复默认');
+            title: box.dataset[prefix + 'title'],
+            author: box.dataset[prefix + 'author'],
+            url: box.dataset[prefix + 'url'],
+            pic: box.dataset[prefix + 'pic']
+        };
+        if(!data.title) break;
+         songs.push(data);
      }
-     // 播放器配置
+     // 初始化播放器
-     const ap = new APlayer({
+     var ap = new APlayer({
-         container: container,
+         container: box,
-        theme: themeColor,
+         audio: songs,
-         audio: JSON.parse({{{songs}}}),
+         fixed: false,
-         autoplay: {{{autoplay|false}}},
+         listFolded: true,
-         customAudioType: {}, // 防止预加载错误
          lrcType: 0,
-         mutex: true
+         theme: '#2980b9'
-    });
-    // 动态应用主题色
-    const applyTheme = () => {
-        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>
-<style>
-/* 动态主题色增强 */
-.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月23日 (日) 00:15的最新版本