模板:APlayer - 版本历史

2025年3月22日 (六) 16:15 卡介菌

2025-03-22T16:15:11Z

@@ 第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">
-<div id="aplayer-{{{id}}}" class="aplayer-box"></div>
+<style>
 <script>
 (function() {
-     // 颜色有效性检测
+     // 收集歌曲数据
-     const isValidColor = (color) => {
+     var songs = [];
-        const style = new Option().style;
+     var box = document.querySelector('.aplayer-box');
-     // 主题色处理
+     // 处理多首歌曲参数
-     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'],
+     }
-     // 播放器配置
+     // 初始化播放器
-     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,
          lrcType: 0,
-         mutex: true
+         theme: '#2980b9'
      });
 })();
 </script>
 </includeonly>

2025年3月22日 (六) 15:48 卡介菌

2025-03-22T15:48:23Z

←上一版本		2025年3月22日 (六) 23:48的版本
第1行：		第1行：
	<div id="aplayer-{{~~#var:~~id}}" class="aplayer"></div>		<includeonly>
			<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.css">
			<script src="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>

			<div id="aplayer-{{{id}}}" class="aplayer-box"></div>

	<script>		<script>
	(function() {		(function() {
	~~var ap~~ = new ~~APlayer~~({		// 颜色有效性检测
	container: document.getElementById('aplayer-{{~~#var:~~id}}'),		const isValidColor = (color) => {
	~~theme:~~ '{{#~~var:theme \| #f5f5f5}}~~', // ~~默认主题~~		const style = new Option().style;
	~~loop:~~ '{{~~#var:loop \| all~~}}'~~, // 默认循环播放~~		style.color = color;
	~~preload:~~ '~~{{#var:preload \| auto}}~~'~~, // 默认自动预加载~~		return style.color !== '';
	~~volume: {{#var:volume \| 0.7~~}}, // ~~默认音量~~		};
	~~mutex: true, // 互斥播放~~
	~~listFolded~~: ~~{{#var:listFolded \| false}}~~, ~~// 默认不折叠列表~~		// 容器配置
	~~listMaxHeight~~: ~~'{{#var:listMaxHeight \| 300px}}'~~, ~~// 列表最大高度~~		const container = document.getElementById('aplayer-{{{id}}}');
	audio: [		const defaultColor = '#2980b9';
	{{~~#forargs:song\|index\|value\|~~
	{		// 主题色处理
	~~name: '{{#var:song{{index~~}}~~_name~~}}',		let themeColor = '{{{theme}}}'.trim();
	~~artist~~: '{~~{#var:song~~{{~~index}~~}~~_artist~~}}',		if (!isValidColor(themeColor)) {
	~~url~~: '{~~{#var:song{{index}}_url~~}}',		themeColor = defaultColor;
	~~cover~~: ~~'{{#var:song{{index}}_cover}}',~~		console.warn('无效的颜色值，已恢复默认');
	},		}
	}}
	]		// 播放器配置
			const ap = new APlayer({
			container: container,
			theme: themeColor,
			audio: JSON.parse({{{songs}}}),
			autoplay: {{{autoplay\|false}}},
			customAudioType: {}, // 防止预加载错误
			lrcType: 0,
			mutex: true
	});		});

	// ~~Widgets 集成~~ (~~如果需要~~)		// 动态应用主题色
	if (window.~~Widget~~) {		const applyTheme = () => {
	~~Widget~~.~~instance~~.~~registerAPlayer~~(ap);		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>		</script>
	<~~noinclude~~>
	{{~~Documentation~~}}		<style>
	</~~noinclude~~>		/* 动态主题色增强 */
			.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月15日 (六) 22:21 卡介菌

2025-03-15T22:21:19Z

←上一版本		2025年3月16日 (日) 06:21的版本
第1行：		第1行：
	~~<noinclude>~~		<div id="aplayer-{{#var:id}}" class="aplayer"></div>
	~~{{Documentation}}~~
	~~</noinclude>~~
	<div id="aplayer-{{~~{1\|default}~~}}" class="aplayer"></div>
	<script>		<script>
	(function() {		(function() {
	~~// 确保APlayer加载完成~~		var ap = new APlayer({
	~~function initAPlayer~~() {		container: document.getElementById('aplayer-{{#var:id}}'),
	if (~~typeof APlayer ===~~ '~~undefined~~') {		theme: '{{#var:theme \| #f5f5f5}}', // 默认主题
	~~setTimeout(initAPlayer~~, ~~100);~~		loop: '{{#var:loop \| all}}', // 默认循环播放
	~~return;~~		preload: '{{#var:preload \| auto}}', // 默认自动预加载
	}		volume: {{#var:volume \| 0.7}}, // 默认音量
			mutex: true, // 互斥播放
	// ~~解析歌曲参数~~		listFolded: {{#var:listFolded \| false}}, // 默认不折叠列表
	~~var songs = [];~~		listMaxHeight: '{{#var:listMaxHeight \| 300px}}', // 列表最大高度
	{{#~~forargs~~: ~~song~~		audio: [
	~~\| {{{songs~~\|}}}		{{#forargs:song\|index\|value\|
	\| {{#if: ~~{{#pos~~:{{#var:~~key}}~~\|~~song~~}}		{
	~~\| songs.push({~~		name: '{{#var:song{{index}}_name}}',
	~~name~~: "{{#~~explode~~:{{#var:~~value}}~~\|~~;\|0~~}}",		artist: '{{#var:song{{index}}_artist}}',
	~~artist~~: "{{#~~explode~~:{{#var:~~value~~}}~~\|;\|1~~}}",		url: '{{#var:song{{index}}_url}}',
	~~url~~: "{{#~~explode~~:{{~~#var:value~~}}~~\|;\|2~~}}",		cover: '{{#var:song{{index}}_cover}}',
	~~cover~~: "{{#~~explode~~:{{~~#var:value~~}}~~\|;\|3\|https://placehold.co/80x80?text=No+Cover~~}}"		},
	~~});~~		}}
	}}		]
	}}

	~~// 初始化播放器~~
	~~new APlayer({~~
	~~container~~: ~~document.getElementById(~~'~~aplayer-~~{{{~~1\|default~~}}}'),
	~~audio: songs~~,
	~~lrcType: 0,~~
	~~fixed: false,~~
	~~mini: false,~~
	~~theme: '#2980b9'~~
	});		});
	}

	// ~~等待DOM加载完成后执行~~		// Widgets 集成 (如果需要)
	~~document~~.~~addEventListener~~(~~'DOMContentLoaded', initAPlayer~~);		if (window.Widget) {
			Widget.instance.registerAPlayer(ap);
			}
	})();		})();
	</script>		</script>
			<noinclude>
			{{Documentation}}
			</noinclude>

2025年3月15日 (六) 22:05 卡介菌

2025-03-15T22:05:15Z

←上一版本		2025年3月16日 (日) 06:05的版本
第1行：		第1行：
	<~~includeonly~~>		<noinclude>
	<div id="aplayer-{{{1}}}" class="aplayer"></div>		{{Documentation}}
			</noinclude>
			<div id="aplayer-{{{1\|default}}}" class="aplayer"></div>
	<script>		<script>
	(function() {		(function() {
	~~var loadResources =~~ function() {		// 确保APlayer加载完成
	if(typeof APlayer === 'undefined') {		function initAPlayer() {
	~~// 动态加载CSS~~		if (typeof APlayer === 'undefined') {
	~~var css = document.createElement~~(~~'link'~~);		setTimeout(initAPlayer, 100);
	~~css.href = 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css'~~;		return;
	~~css.rel = 'stylesheet';~~		}
	~~document.head.appendChild(css);~~

	// ~~动态加载JS~~		// 解析歌曲参数
	var js = ~~document~~.~~createElement~~(~~'script')~~;		var songs = [];
	~~js.src = '~~https://~~cdn.jsdelivr~~.~~net/npm/aplayer/dist~~/~~APlayer.min.js';~~		{{#forargs: song
	~~js.onload~~ = ~~initializePlayer;~~		\| {{{songs\|}}}
	~~document.body.appendChild(js~~);		\| {{#if: {{#pos:{{#var:key}}\|song}}
	} ~~else {~~		\| songs.push({
	~~initializePlayer();~~		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}}"
			});
			}}
			}}

	~~var initializePlayer = function() {~~		// 初始化播放器
	new APlayer({		new APlayer({
	container: document.getElementById('aplayer-{{{1}}}'),		container: document.getElementById('aplayer-{{{1\|default}}}'),
	audio: [{		audio: songs,
	~~name: '{{{2\|未命名曲目}}}'~~,		lrcType: 0,
	~~artist~~: ~~'{{{3\|未知艺术家}}}'~~,		fixed: false,
	~~url~~: ~~'{{{4}}}'~~,		mini: false,
	~~cover~~: ~~'{{{5\|https://example.com/default-cover.jpg}}}'~~,		theme: '#2980b9'
	~~lrc~~: '~~{{{6\|}}}~~'		});
	}]		}
	});
	};

	// ~~延迟加载防止阻塞页面~~		// 等待DOM加载完成后执行
	~~if(window.addEventListener) {~~		document.addEventListener('DOMContentLoaded', initAPlayer);
	~~window~~.addEventListener('~~load~~', ~~loadResources, false~~);
	~~} else if(window.attachEvent) {~~
	~~window.attachEvent('onload', loadResources);~~
	}
	})();		})();
	</script>		</script>
	~~</includeonly>~~

2025年3月15日 (六) 21:42 卡介菌

2025-03-15T21:42:33Z

←上一版本		2025年3月16日 (日) 05:42的版本
第1行：		第1行：
	<~~noinclude~~>		<includeonly>
	{{~~Documentation~~}}		<div id="aplayer-{{{1}}}" class="aplayer"></div>
	</~~noinclude~~>		<script>
	<link ~~rel="stylesheet"~~ href="https://cdn.jsdelivr.net/npm/aplayer~~@1.10.1~~/dist/APlayer.min.css">		(function() {
	~~<div id~~=~~"ap-{{#~~var~~:uid}}" class~~=~~"aplayer-box"></div>~~		var loadResources = function() {
	<script>		if(typeof APlayer === 'undefined') {
	mw.~~loader.load(~~'https://cdn.jsdelivr.net/npm/aplayer~~@1.10.1~~/dist/APlayer.min.js')~~.then~~(function() {		// 动态加载CSS
	new APlayer({		var css = document.createElement('link');
	container: document.getElementById('ap-{{~~#var:uid~~}}'),		css.href = 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css';
	audio: [		css.rel = 'stylesheet';
	~~{{#loop~~:~~i\|0\|{~~{~~#len:~~{{~~#lst:audios~~\|@}}}}\|{{~~#ifeq:~~{~~{#var:i~~}}~~\|0\|\|~~,~~}}{~~		document.head.appendChild(css);
	url: '{~~{#lst:audios\|~~{{~~#var:i}~~}}}',
	~~name~~: '{{~~#lst:titles~~\|~~{{#var~~:i}}}}',		// 动态加载JS
	~~artist~~: '{{~~#lst:artists~~\|~~{{#var:i}~~}}}'		var js = document.createElement('script');
	}}}}		js.src = 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js';
	]		js.onload = initializePlayer;
	});		document.body.appendChild(js);
	});		} else {
	</script>		initializePlayer();
			}
			};

			var initializePlayer = function() {
			new APlayer({
			container: document.getElementById('aplayer-{{{1}}}'),
			audio: [{
			name: '{{{2\|未命名曲目}}}',
			artist: '{{{3\|未知艺术家}}}',
			url: '{{{4}}}',
			cover: '{{{5\|https://example.com/default-cover.jpg}}}',
			lrc: '{{{6\|}}}'
			}]
			});
			};

			// 延迟加载防止阻塞页面
			if(window.addEventListener) {
			window.addEventListener('load', loadResources, false);
			} else if(window.attachEvent) {
			window.attachEvent('onload', loadResources);
			}
			})();
			</script>
			</includeonly>

卡介菌：创建页面，内容为“ {{Documentation}}