模板: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">
-   <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>
-   <div id="ap-{{#var:uid}}" class="aplayer-box"></div>
+<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
-   <script>
-   mw.loader.load('https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js').then(function() {
+<style>
-       new APlayer({
+/* 移动端适配 */
-           container: document.getElementById('ap-{{#var:uid}}'),
+.aplayer {
-           audio: [
+    max-width: 100%;
-               {{#loop:i|0|{{#len:{{#lst:audios|@}}}}|{{#ifeq:{{#var:i}}|0||,}}{
+    margin: 10px auto;
-                   url: '{{#lst:audios|{{#var:i}}}}',
+    font-family: -apple-system, "PingFang SC", "Microsoft YaHei";
-                   name: '{{#lst:titles|{{#var:i}}}}',
+}
-                   artist: '{{#lst:artists|{{#var:i}}}}'
-               }}}}
+/* 小屏幕优化 */
-           ]
+@media screen and (max-width: 768px) {
-       });
+    .aplayer-info {
-   });
+        padding: 8px;
-   </script>
+    }
+    .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: box,
+        audio: songs,
+        fixed: false,
+        listFolded: true,
+        lrcType: 0,
+        theme: '#2980b9'
+    });
+})();
+</script>
+</includeonly>

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