模板:APlayer：修订间差异

可视化wikitext

@@ 第1行： / 第1行： @@
-<div id="aplayer-{{#var:id}}" class="aplayer"></div>
+<includeonly>
+<!-- 引入国内CDN加速的APlayer资源 -->
+<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>
+<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() {
+    // 收集歌曲数据
+    var songs = [];
+    var box = document.querySelector('.aplayer-box');
+    // 处理多首歌曲参数
+    for(var i = 1; ; i++) {
+        var prefix = "song" + i;
+        var data = {
+            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);
+    }
+    // 初始化播放器
      var ap = new APlayer({
-         container: document.getElementById('aplayer-{{#var:id}}'),
+         container: box,
-         theme: '{{#var:theme | #f5f5f5}}', // 默认主题
+         audio: songs,
-         loop: '{{#var:loop | all}}',       // 默认循环播放
+         fixed: false,
-         preload: '{{#var:preload | auto}}', // 默认自动预加载
+         listFolded: true,
-         volume: {{#var:volume | 0.7}},      // 默认音量
+         lrcType: 0,
-         mutex: true,                        // 互斥播放
+         theme: '#2980b9'
-        listFolded: {{#var:listFolded | false}}, // 默认不折叠列表
-        listMaxHeight: '{{#var:listMaxHeight | 300px}}', // 列表最大高度
-        audio: [
-            {{#forargs:song|index|value|
-                {
-                    name: '{{#var:song{{index}}_name}}',
-                    artist: '{{#var:song{{index}}_artist}}',
-                    url: '{{#var:song{{index}}_url}}',
-                    cover: '{{#var:song{{index}}_cover}}',
-                },
-            }}
-        ]
      });
-    // Widgets 集成 (如果需要)
-    if (window.Widget) {
-        Widget.instance.registerAPlayer(ap);
-    }
 })();
 </script>
-<noinclude>
+</includeonly>
-{{Documentation}}
-</noinclude>

2025年3月23日 (日) 00:15的最新版本