模板:APlayer：修订间差异

可视化wikitext

@@ 第1行： / 第1行： @@
-<noinclude>
+<includeonly>
-{{Documentation}}
+<!-- 引入国内CDN加速的APlayer资源 -->
-</noinclude>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
-<div id="aplayer-{{{1|default}}}" class="aplayer"></div>
+<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() {
-  // 确保APlayer加载完成
+    // 收集歌曲数据
-  function initAPlayer() {
+    var songs = [];
-     if (typeof APlayer === 'undefined') {
+    var box = document.querySelector('.aplayer-box');
-      setTimeout(initAPlayer, 100);
-      return;
+    // 处理多首歌曲参数
+     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 songs = [];
-    {{#forargs: song
-      | {{{songs|}}}
-      | {{#if: {{#pos:{{#var:key}}|song}}
-          | songs.push({
-              name: "{{#explode:{{#var:value}}|;|0}}",
-              artist: "{{#explode:{{#var:value}}|;|1}}",
-              url: "{{#explode:{{#var:value}}|;|2}}",
-              cover: "{{#explode:{{#var:value}}|;|3|https://placehold.co/80x80?text=No+Cover}}"
-            });
-        }}
-    }}
      // 初始化播放器
-     new APlayer({
+     var ap = new APlayer({
-      container: document.getElementById('aplayer-{{{1|default}}}'),
+        container: box,
-      audio: songs,
+        audio: songs,
-      lrcType: 0,
+        fixed: false,
-      fixed: false,
+        listFolded: true,
-      mini: false,
+        lrcType: 0,
-      theme: '#2980b9'
+        theme: '#2980b9'
      });
-  }
-  // 等待DOM加载完成后执行
-  document.addEventListener('DOMContentLoaded', initAPlayer);
 })();
 </script>
+</includeonly>

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