模板:APlayer：修订间差异

可视化wikitext

@@ 第1行： / 第1行： @@
 <includeonly>
-<div id="aplayer-{{{1}}}" class="aplayer"></div>
+<!-- 引入国内CDN加速的APlayer资源 -->
-<script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
-(function() {
+<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
-    var loadResources = function() {
+<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
-        if(typeof APlayer === 'undefined') {
-            // 动态加载CSS
-            var css = document.createElement('link');
-            css.href = 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css';
-            css.rel = 'stylesheet';
-            document.head.appendChild(css);
-            // 动态加载JS
+<style>
-            var js = document.createElement('script');
+/* 移动端适配 */
-            js.src = 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js';
+.aplayer {
-            js.onload = initializePlayer;
+    max-width: 100%;
-            document.body.appendChild(js);
+    margin: 10px auto;
-        } else {
+    font-family: -apple-system, "PingFang SC", "Microsoft YaHei";
-            initializePlayer();
+}
-        }
-    };
-    var initializePlayer = function() {
+/* 小屏幕优化 */
-        new APlayer({
+@media screen and (max-width: 768px) {
-            container: document.getElementById('aplayer-{{{1}}}'),
+    .aplayer-info {
-            audio: [{
+        padding: 8px;
-                name: '{{{2|未命名曲目}}}',
+    }
-                artist: '{{{3|未知艺术家}}}',
+    .aplayer-author {
-                url: '{{{4}}}',
+        font-size: 12px;
-                cover: '{{{5|https://example.com/default-cover.jpg}}}',
+    }
-                lrc: '{{{6|}}}'
+    .aplayer-controller .aplayer-bar {
-            }]
+        margin: 0 5px;
-        });
+    }
-    };
+}
+</style>
-     // 延迟加载防止阻塞页面
+<div class="aplayer-box"
-     if(window.addEventListener) {
+     data-title="{{{1|}}}"
-         window.addEventListener('load', loadResources, false);
+     data-author="{{{2|}}}"
-    } else if(window.attachEvent) {
+     data-pic="{{{3|}}}"
-         window.attachEvent('onload', loadResources);
+     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的最新版本