Widget:AudioPlayer - Revision history

Morrisj18 at 01:19, 24 July 2025

2025-07-24T01:19:43Z

← Older revision		Revision as of 21:19, 23 July 2025
Line 1:		Line 1:
	<~~div style="display: inline-flex; align-items: center; gap: 12px;"~~>		<includeonly><div class="audioplayer" data-filename="{{{1}}}" data-caption="{{{2\|Audio File}}}"></div></includeonly>
	<div ~~style~~="~~border: 1px solid #8B7355; padding: 8px; display: inline-block; border-radius: 4px; background-color: #F5F0E8; width: 200px;">~~
	~~<button id=~~"~~playBtn~~-~~{{{~~filename~~}}}" style="padding: 4px 8px; margin-right: 8px; font-size: 12px; border: 1px solid #8B7355; background: #D4C4A8; color: #5D4E37;">▶️</button>~~
	~~<div style="display: inline-block; width: 120px; height: 6px; background-color: #D4C4A8; border-radius: 3px; vertical-align: middle;">~~
	~~<div id~~="~~progress-~~{{{~~filename~~}}}" ~~style="height: 100%; background~~-~~color: #8B7355; border-radius: 3px; width: 0%; transition: width 0.1s;"></div>~~
	~~</div>~~
	~~</div>~~
	~~<span style~~="~~color: #8B7355; font-style: italic;">~~{{{~~caption~~\|Audio File}}}</~~span~~>
	</~~div~~>

2025-07-24T00:45:02Z

← Older revision		Revision as of 20:45, 23 July 2025
Line 1:		Line 1:
	<~~includeonly~~>		<div style="display: inline-flex; align-items: center; gap: 12px;">
	<div id="~~audioplayer~~-{{{~~id\|1~~}}}"></~~div~~>		<div style="border: 1px solid #8B7355; padding: 8px; display: inline-block; border-radius: 4px; background-color: #F5F0E8; width: 200px;">
	<~~script~~>		<button id="playBtn-{{{filename}}}" style="padding: 4px 8px; margin-right: 8px; font-size: 12px; border: 1px solid #8B7355; background: #D4C4A8; color: #5D4E37;">▶️</button>
	~~(function() {~~		<div style="display: inline-block; width: 120px; height: 6px; background-color: #D4C4A8; border-radius: 3px; vertical-align: middle;">
	~~var container~~ = ~~document.getElementById(~~"~~audioplayer~~-{{{~~id\|1~~}}}");		<div id="progress-{{{filename}}}" style="height: 100%; background-color: #8B7355; border-radius: 3px; width: 0%; transition: width 0.1s;"></div>
	~~if (!container) return~~;		</div>
	~~var audio = document~~.~~createElement(~~"~~audio");~~		</div>
	~~audio.setAttribute("controls", "");~~		<span style="color: #8B7355; font-style: italic;">{{{caption\|Audio File}}}</span>
	~~audio.setAttribute("preload", "metadata");~~		</div>
	~~audio.~~style~~.maxWidth~~ = "~~240px"~~;

	~~var src = document.createElement("source")~~;
	~~src.src =~~ "{{{~~url~~}}}";
	~~src.type = "audio/ogg";~~

	~~audio.appendChild(src);~~
	~~container.appendChild(audio);~~
	~~})();~~
	</~~script~~>
	</~~includeonly~~>

2025-07-24T00:01:59Z

← Older revision		Revision as of 20:01, 23 July 2025
Line 1:		Line 1:
	<includeonly>		<includeonly>
	<div ~~style~~="~~display: inline~~-~~block~~;">		<div id="audioplayer-{{{id\|1}}}"></div>
	<audio controls preload="metadata" style="~~width:200px~~;">		<script>
	~~<source~~ src="{{{url}}}" type="audio/ogg">		(function() {
	~~Your browser does not support the~~ audio ~~element~~.		var container = document.getElementById("audioplayer-{{{id\|1}}}");
	</audio>		if (!container) return;
	</~~div~~>		var audio = document.createElement("audio");
			audio.setAttribute("controls", "");
			audio.setAttribute("preload", "metadata");
			audio.style.maxWidth = "240px";

			var src = document.createElement("source");
			src.src = "{{{url}}}";
			src.type = "audio/ogg";

			audio.appendChild(src);
			container.appendChild(audio);
			})();
			</script>
	</includeonly>		</includeonly>

2025-07-24T00:00:17Z

← Older revision		Revision as of 20:00, 23 July 2025
Line 1:		Line 1:
	<includeonly>		<includeonly>
	<audio controls>		<div style="display: inline-block;">
	<source src="{{{url}}}" type="audio/ogg">		<audio controls preload="metadata" style="width:200px;">
	Your browser does not support the audio element.		<source src="{{{url}}}" type="audio/ogg">
	</audio>		Your browser does not support the audio element.
			</audio>
			</div>
	</includeonly>		</includeonly>

2025-07-23T23:58:16Z

← Older revision		Revision as of 19:58, 23 July 2025
Line 1:		Line 1:
	<includeonly>		<includeonly>
	<audio controls>		<audio controls>
	<source src="{{{url}}}">		<source src="{{{url}}}" type="audio/ogg">
			Your browser does not support the audio element.
	</audio>		</audio>
	</includeonly>		</includeonly>

2025-07-23T23:56:18Z

2025-07-23T23:55:31Z

← Older revision		Revision as of 19:55, 23 July 2025
Line 1:		Line 1:
	<includeonly>		<includeonly>
	<audio controls>		<audio controls>
	<source src="{{{url}}}" type="audio/~~mpeg~~">		<source src="{{{url}}}" type="audio/ogg">
	</audio>		</audio>
	</includeonly>		</includeonly>

2025-07-23T23:42:51Z

← Older revision		Revision as of 19:42, 23 July 2025
Line 1:		Line 1:
	<includeonly>		<includeonly>
	<audio controls>		<audio controls>
	<source src="{{{url}}}" type="audio/~~ogg~~">		<source src="{{{url}}}" type="audio/mpeg">
	</audio>		</audio>
	</includeonly>		</includeonly>

2025-07-23T23:31:33Z

← Older revision		Revision as of 19:31, 23 July 2025
Line 1:		Line 1:
	<includeonly>		<includeonly>
	<audio controls>		<audio controls>
	<source src="~~https://tuyin.online/wiki/images/0/0d/Stoneboundunity.ogg~~" type="audio/ogg">		<source src="{{{url}}}" type="audio/ogg">
	</audio>		</audio>
	</includeonly>		</includeonly>

2025-07-23T23:28:14Z

← Older revision		Revision as of 19:28, 23 July 2025
Line 1:		Line 1:
	<includeonly>		<includeonly>
	<audio controls>		<audio controls>
	<source src="~~{{{url}}}~~" type="audio/ogg">		<source src="https://tuyin.online/wiki/images/0/0d/Stoneboundunity.ogg" type="audio/ogg">
	~~Your browser does not support the audio element.~~
	</audio>		</audio>
	</includeonly>		</includeonly>