Template:AudioPlayer - Revision history

Morrisj18 at 01:23, 24 July 2025

2025-07-24T01:23:30Z

← Older revision		Revision as of 21:23, 23 July 2025
Line 1:		Line 1:
	<includeonly><div class="audioplayer" data-filename="{{{1}}}" data-caption="{{{2\|Audio File}}}~~"></div>~~</includeonly>		<includeonly>{{#tag:div\|Loading audio player...\|class=audioplayer\|data-filename={{{1}}}\|data-caption={{{2\|Audio File}}}}}</includeonly>

Morrisj18 at 01:22, 24 July 2025

2025-07-24T01:22:17Z

← Older revision		Revision as of 21:22, 23 July 2025
Line 1:		Line 1:
	<includeonly>~~{{#tag:~~div~~\|Loading audio player...\|~~class=audioplayer\|data-filename={{{1}}}\|data-caption={{{2\|Audio File}}}}}</includeonly>		<includeonly><div class="audioplayer" data-filename="{{{1}}}" data-caption="{{{2\|Audio File}}}"></div></includeonly>

Morrisj18 at 01:21, 24 July 2025

2025-07-24T01:21:54Z

← Older revision		Revision as of 21:21, 23 July 2025
Line 1:		Line 1:
	<includeonly>		<includeonly>{{#tag:div\|Loading audio player...\|class=audioplayer\|data-filename={{{1}}}\|data-caption={{{2\|Audio File}}}}}</includeonly>
	{{#tag:div\|
	~~{{#tag:div\|~~
	~~{{#tag:button\|▶️\|onclick=javascript:var~~ audio~~=this~~.~~audioElement~~\|\|~~(this.audioElement~~=~~new Audio('https://tuyin.online/images/~~{{{1}}~~}'));if(this.innerHTML==='▶️'){audio.play();this.innerHTML='⏸️';var btn=this;audio.onended=function(){btn.innerHTML='▶️'};}else{audio.pause();this.innerHTML='▶️';~~}\|~~style=padding: 4px 8px; margin-right: 8px; font~~-~~size: 12px; border: 1px solid #8B7355; background: #D4C4A8; color: #5D4E37;}}~~
	~~{{#tag:span\|Simple Player\|style~~=~~color: #8B7355; font-size: 11px;}}~~
	~~\|style=border: 1px solid #8B7355; padding: 8px; border-radius: 4px; background-color: #F5F0E8; width: 200px;}}~~
	~~{{#tag:span\|~~{{{2\|Audio File}}}~~\|style=color: #8B7355; font-style: italic;}}~~
	~~\|style=display: inline-flex; align-items: center; gap: 12px;~~}}
	</includeonly>

Morrisj18 at 01:17, 24 July 2025

2025-07-24T01:17:31Z

← Older revision		Revision as of 21:17, 23 July 2025
Line 1:		Line 1:
	<includeonly>		<includeonly>
	~~<div id="audioplayer-~~{{{1\|~~replace:.,-}}}" style="display: inline-flex; align-items: center; gap: 12px;">~~		{{#tag:div\|
	~~<div style="border: 1px solid~~ #~~8B7355; padding: 8px; border-radius: 4px; background-color~~: #~~F5F0E8; width~~: ~~200px;">~~		{{#tag:div\|
	<button onclick="		{{#tag:button\|▶️\|onclick=javascript:var audio=this.audioElement\|\|(this.audioElement=new Audio('https://tuyin.online/images/{{{1}}}'));if(this.innerHTML==='▶️'){audio.play();this.innerHTML='⏸️';var btn=this;audio.onended=function(){btn.innerHTML='▶️'};}else{audio.pause();this.innerHTML='▶️';}\|style=padding: 4px 8px; margin-right: 8px; font-size: 12px; border: 1px solid #8B7355; background: #D4C4A8; color: #5D4E37;}}
	var audio = this.audioElement \|\| (this.audioElement = new Audio('https://tuyin.online/images/{{{1}}}'));		{{#tag:span\|Simple Player\|style=color: #8B7355; font-size: 11px;}}
	if (this.innerHTML === '▶️') {		\|style=border: 1px solid #8B7355; padding: 8px; border-radius: 4px; background-color: #F5F0E8; width: 200px;}}
	audio.play();		{{#tag:span\|{{{2\|Audio File}}}\|style=color: #8B7355; font-style: italic;}}
	this.innerHTML = '⏸️';		\|style=display: inline-flex; align-items: center; gap: 12px;}}
	var btn = this;
	audio.onended = function() { btn.innerHTML = '▶️'; };
	} else {
	audio.pause();
	this.innerHTML = '▶️';
	}
	" style="padding: 4px 8px; margin-right: 8px; font-size: 12px; border: 1px solid #8B7355; background: #D4C4A8; color: #5D4E37;~~">▶️</button>~~
	<span style="color: #8B7355; font-size: 11px;~~">Simple Player</span>~~
	~~</div>~~
	~~<span~~ style=~~"color~~: #8B7355; ~~font~~-~~style~~: ~~italic~~;">{{{2\|Audio File}}}~~</span>~~
	~~</div>~~
	</includeonly>		</includeonly>

Morrisj18 at 01:16, 24 July 2025

2025-07-24T01:16:13Z

@@ Line 1: / Line 1: @@
 <includeonly>
-<div class="audioplayer" data-filename="{{{1}}}" data-label="{{{2|Audio File}}}"></div>
+<div id="audioplayer-{{{1|replace:.,-}}}" style="display: inline-flex; align-items: center; gap: 12px;">
+     <div style="border: 1px solid #8B7355; padding: 8px; border-radius: 4px; background-color: #F5F0E8; width: 200px;">
-<script>
+        <button onclick="
-document.addEventListener('DOMContentLoaded', function () {
+            var audio = this.audioElement || (this.audioElement = new Audio('https://tuyin.online/images/{{{1}}}'));
-  document.querySelectorAll('.audioplayer[data-filename]:not(.initialized)').forEach(function(container) {
+            if (this.innerHTML === '▶️') {
-    container.classList.add('initialized');
+                audio.play();
-    const file = container.dataset.filename;
+                this.innerHTML = '⏸️';
-     const label = container.dataset.label;
+                var btn = this;
+                audio.onended = function() { btn.innerHTML = '▶️'; };
-    if (!file) {
+            } else {
-      container.innerHTML = '<span style="color:red">No filename provided</span>';
+                audio.pause();
-      return;
+                this.innerHTML = '▶️';
+            }
+        " style="padding: 4px 8px; margin-right: 8px; font-size: 12px; border: 1px solid #8B7355; background: #D4C4A8; color: #5D4E37;">▶️</button>
-    const oggUrl = 'https://tuyin.online/images/' + file;
+        <span style="color: #8B7355; font-size: 11px;">Simple Player</span>
-    const mp3Url = oggUrl.replace('.ogg', '.mp3');
+     </div>
-    const audio = new Audio();
+     <span style="color: #8B7355; font-style: italic;">{{{2|Audio File}}}</span>
-    audio.preload = 'metadata';
+</div>
 </includeonly>

Morrisj18 at 01:13, 24 July 2025

2025-07-24T01:13:58Z

← Older revision		Revision as of 21:13, 23 July 2025
Line 1:		Line 1:
			<includeonly>
	<div class="audioplayer" data-filename="{{{1}}}" data-label="{{{2\|Audio File}}}"></div>		<div class="audioplayer" data-filename="{{{1}}}" data-label="{{{2\|Audio File}}}"></div>

Line 91:		Line 92:
	});		});
	</script>		</script>
			</includeonly>

Morrisj18 at 01:12, 24 July 2025

2025-07-24T01:12:08Z

← Older revision		Revision as of 21:12, 23 July 2025
Line 1:		Line 1:
	~~Testing template: File is~~ {{{1}}} ~~and caption is~~ {{{2}}}		<div class="audioplayer" data-filename="{{{1}}}" data-label="{{{2\|Audio File}}}"></div>

			<script>
			document.addEventListener('DOMContentLoaded', function () {
			document.querySelectorAll('.audioplayer[data-filename]:not(.initialized)').forEach(function(container) {
			container.classList.add('initialized');
			const file = container.dataset.filename;
			const label = container.dataset.label;

			if (!file) {
			container.innerHTML = '<span style="color:red">No filename provided</span>';
			return;
			}

			const oggUrl = 'https://tuyin.online/images/' + file;
			const mp3Url = oggUrl.replace('.ogg', '.mp3');
			const audio = new Audio();
			audio.preload = 'metadata';

			if (audio.canPlayType('audio/ogg')) {
			audio.src = oggUrl;
			} else if (audio.canPlayType('audio/mpeg')) {
			audio.src = mp3Url;
			} else {
			container.innerHTML = '<span style="color:red">Browser cannot play audio.</span>';
			return;
			}

			const wrapper = document.createElement('div');
			wrapper.style.display = 'inline-flex';
			wrapper.style.alignItems = 'center';
			wrapper.style.gap = '12px';
			const box = document.createElement('div');
			box.style.border = '1px solid #8B7355';
			box.style.padding = '8px';
			box.style.borderRadius = '4px';
			box.style.backgroundColor = '#F5F0E8';
			box.style.width = '200px';
			const btn = document.createElement('button');
			btn.innerHTML = '▶️';
			btn.style.padding = '4px 8px';
			btn.style.marginRight = '8px';
			btn.style.fontSize = '12px';
			btn.style.border = '1px solid #8B7355';
			btn.style.background = '#D4C4A8';
			btn.style.color = '#5D4E37';
			const barWrap = document.createElement('div');
			barWrap.style.width = '120px';
			barWrap.style.height = '6px';
			barWrap.style.backgroundColor = '#D4C4A8';
			barWrap.style.borderRadius = '3px';
			const progress = document.createElement('div');
			progress.style.height = '100%';
			progress.style.backgroundColor = '#8B7355';
			progress.style.borderRadius = '3px';
			progress.style.width = '0%';
			progress.style.transition = 'width 0.1s';
			barWrap.appendChild(progress);
			box.appendChild(btn);
			box.appendChild(barWrap);
			wrapper.appendChild(box);
			const text = document.createElement('span');
			text.style.color = '#8B7355';
			text.style.fontStyle = 'italic';
			text.innerText = label;
			wrapper.appendChild(text);
			container.appendChild(wrapper);

			btn.addEventListener('click', function () {
			if (audio.paused \|\| audio.ended) {
			audio.play().then(() => {
			btn.innerHTML = '⏸️';
			}).catch((e) => {
			alert("Could not play audio: " + e.message);
			});
			} else {
			audio.pause();
			btn.innerHTML = '▶️';
			}
			});
			audio.addEventListener('timeupdate', () => {
			if (audio.duration) {
			progress.style.width = (audio.currentTime / audio.duration) * 100 + '%';
			}
			});
			audio.addEventListener('ended', () => {
			btn.innerHTML = '▶️';
			progress.style.width = '0%';
			});
			});
			});
			</script>

Morrisj18: Replaced content with "Testing template: File is {{{1}}} and caption is {{{2}}}"

2025-07-24T01:11:13Z

Replaced content with "Testing template: File is {{{1}}} and caption is {{{2}}}"

← Older revision		Revision as of 21:11, 23 July 2025
Line 1:		Line 1:
	~~{{#tag~~:~~html\|~~		Testing template: File is {{{1}}} and caption is {{{2}}}
	~~<div class="audioplayer" data-filename="~~{{{1}}}~~" data-label="~~{{{2~~\|Audio File}}}"></div>~~
	~~<script>~~
	~~document.addEventListener('DOMContentLoaded', function () {~~
	~~document.querySelectorAll('.audioplayer').forEach(function(container) {~~
	~~const file = container.dataset.filename;~~
	~~const label = container.dataset.label;~~

	~~// Debug: show what we're getting~~
	~~console.log('Filename from template:', file);~~

	~~if (!file \|\| file === '{{{1}}}') {~~
	~~container.innerHTML = '<span style="color:red">Template parameter not working. File: ' + file + '</span>';~~
	~~return;~~
	}

	~~// Rest of your original code...~~
	~~const oggUrl = 'https://tuyin.online/images/' + file;~~
	~~const mp3Url = oggUrl.replace('.ogg', '.mp3');~~
	~~const audio = new Audio();~~
	~~audio.preload = 'metadata';~~
	~~if (audio.canPlayType('audio/ogg')) {~~
	~~audio.src = oggUrl;~~
	~~} else if (audio.canPlayType('audio/mpeg')) {~~
	~~audio.src = mp3Url;~~
	~~} else {~~
	~~container.innerHTML = '<span style="color:red">Browser cannot play audio.</span>';~~
	~~return;~~
	}

	~~const wrapper = document.createElement('div');~~
	~~wrapper.style.display = 'inline-flex';~~
	~~wrapper.style.alignItems = 'center';~~
	~~wrapper.style.gap = '12px';~~
	~~const box = document.createElement('div');~~
	~~box.style.border = '1px solid #8B7355';~~
	~~box.style.padding = '8px';~~
	~~box.style.borderRadius = '4px';~~
	~~box.style.backgroundColor = '#F5F0E8';~~
	~~box.style.width = '200px';~~
	~~const btn = document.createElement('button');~~
	~~btn.innerHTML = '▶️';~~
	~~btn.style.padding = '4px 8px';~~
	~~btn.style.marginRight = '8px';~~
	~~btn.style.fontSize = '12px';~~
	~~btn.style.border = '1px solid #8B7355';~~
	~~btn.style.background = '#D4C4A8';~~
	~~btn.style.color = '#5D4E37';~~
	~~const barWrap = document.createElement('div');~~
	~~barWrap.style.width = '120px';~~
	~~barWrap.style.height = '6px';~~
	~~barWrap.style.backgroundColor = '#D4C4A8';~~
	~~barWrap.style.borderRadius = '3px';~~
	~~const progress = document.createElement('div');~~
	~~progress.style.height = '100%';~~
	~~progress.style.backgroundColor = '#8B7355';~~
	~~progress.style.borderRadius = '3px';~~
	~~progress.style.width = '0%';~~
	~~progress.style.transition = 'width 0.1s';~~
	~~barWrap.appendChild(progress);~~
	~~box.appendChild(btn);~~
	~~box.appendChild(barWrap);~~
	~~wrapper.appendChild(box);~~
	~~const text = document.createElement('span');~~
	~~text.style.color = '#8B7355';~~
	~~text.style.fontStyle = 'italic';~~
	~~text.innerText = label;~~
	~~wrapper.appendChild(text);~~
	~~container.appendChild(wrapper);~~

	~~btn.addEventListener('click', function () {~~
	~~if (audio.paused \|\| audio.ended) {~~
	~~audio.play().then(() => {~~
	~~btn.innerHTML = '⏸️';~~
	~~}).catch((e) => {~~
	~~alert("Could not play audio: " + e.message);~~
	~~});~~
	~~} else {~~
	~~audio.pause();~~
	~~btn.innerHTML = '▶️';~~
	}
	~~});~~
	~~audio.addEventListener('timeupdate', () => {~~
	~~if (audio.duration) {~~
	~~progress.style.width = (audio.currentTime / audio.duration) * 100 + '%';~~
	}
	~~});~~
	~~audio.addEventListener('ended', () => {~~
	~~btn.innerHTML = '▶️';~~
	~~progress.style.width = '0%';~~
	~~});~~
	~~});~~
	});
	~~</script>~~
	}}

Morrisj18 at 01:09, 24 July 2025

2025-07-24T01:09:55Z

← Older revision		Revision as of 21:09, 23 July 2025
Line 1:		Line 1:
	~~<includeonly>~~
	{{#tag:html\|		{{#tag:html\|
	<div class="audioplayer" data-filename="{{{1}}}" data-label="{{{2\|Audio File}}}"></div>		<div class="audioplayer" data-filename="{{{1}}}" data-label="{{{2\|Audio File}}}"></div>
Line 9:		Line 8:

	// Debug: show what we're getting		// Debug: show what we're getting
	console.log('Filename:', file);		console.log('Filename from template:', file);
	~~console.log('Label:', label~~);

	if (!file \|\| file === '{{{1}}}') {		if (!file \|\| file === '{{{1}}}') {
	container.innerHTML = '<span style="color:red">~~No filename provided~~</span>';		container.innerHTML = '<span style="color:red">Template parameter not working. File: ' + file + '</span>';
	return;		return;
	}		}

			// Rest of your original code...
	const oggUrl = 'https://tuyin.online/images/' + file;		const oggUrl = 'https://tuyin.online/images/' + file;
	const mp3Url = oggUrl.replace('.ogg', '.mp3');		const mp3Url = oggUrl.replace('.ogg', '.mp3');

	~~// Debug: show URLs~~
	~~console.log('OGG URL:', oggUrl);~~
	~~console.log('MP3 URL:', mp3Url);~~

	const audio = new Audio();		const audio = new Audio();
	audio.preload = 'metadata';		audio.preload = 'metadata';

	if (audio.canPlayType('audio/ogg')) {		if (audio.canPlayType('audio/ogg')) {
	audio.src = oggUrl;		audio.src = oggUrl;
Line 36:		Line 29:
	}		}

	~~// Rest of your code stays the same...~~
	const wrapper = document.createElement('div');		const wrapper = document.createElement('div');
	wrapper.style.display = 'inline-flex';		wrapper.style.display = 'inline-flex';
Line 102:		Line 94:
	</script>		</script>
	}}		}}
	~~</includeonly>~~

Morrisj18 at 01:08, 24 July 2025

2025-07-24T01:08:41Z

← Older revision		Revision as of 21:08, 23 July 2025
Line 1:		Line 1:
			<includeonly>
	{{#tag:html\|		{{#tag:html\|
	<div class="audioplayer" data-filename="{{{1}}}" data-label="{{{2\|Audio File}}}"></div>		<div class="audioplayer" data-filename="{{{1}}}" data-label="{{{2\|Audio File}}}"></div>

	<script>		<script>
	document.addEventListener('DOMContentLoaded', function () {		document.addEventListener('DOMContentLoaded', function () {
Line 7:		Line 7:
	const file = container.dataset.filename;		const file = container.dataset.filename;
	const label = container.dataset.label;		const label = container.dataset.label;
	~~const playerId =~~ '~~player_' + Math~~.~~random~~().~~toString~~(36)~~.substr~~(~~2, 9~~);
			// Debug: show what we're getting
			console.log('Filename:', file);
			console.log('Label:', label);

			if (!file \|\| file === '{{{1}}}') {
			container.innerHTML = '<span style="color:red">No filename provided</span>';
			return;
			}

	const oggUrl = 'https://tuyin.online/images/' + file;		const oggUrl = 'https://tuyin.online/images/' + file;
	const mp3Url = oggUrl.replace('.ogg', '.mp3');		const mp3Url = oggUrl.replace('.ogg', '.mp3');

			// Debug: show URLs
			console.log('OGG URL:', oggUrl);
			console.log('MP3 URL:', mp3Url);

	const audio = new Audio();		const audio = new Audio();
	audio.preload = 'metadata';		audio.preload = 'metadata';

	if (audio.canPlayType('audio/ogg')) {		if (audio.canPlayType('audio/ogg')) {
	audio.src = oggUrl;		audio.src = oggUrl;
Line 22:		Line 35:
	return;		return;
	}		}

	// ~~Build UI~~		// Rest of your code stays the same...
	const wrapper = document.createElement('div');		const wrapper = document.createElement('div');
	wrapper.style.display = 'inline-flex';		wrapper.style.display = 'inline-flex';
	wrapper.style.alignItems = 'center';		wrapper.style.alignItems = 'center';
	wrapper.style.gap = '12px';		wrapper.style.gap = '12px';

	const box = document.createElement('div');		const box = document.createElement('div');
	box.style.border = '1px solid #8B7355';		box.style.border = '1px solid #8B7355';
Line 35:		Line 47:
	box.style.backgroundColor = '#F5F0E8';		box.style.backgroundColor = '#F5F0E8';
	box.style.width = '200px';		box.style.width = '200px';

	const btn = document.createElement('button');		const btn = document.createElement('button');
	btn.innerHTML = '▶️';		btn.innerHTML = '▶️';
Line 44:		Line 55:
	btn.style.background = '#D4C4A8';		btn.style.background = '#D4C4A8';
	btn.style.color = '#5D4E37';		btn.style.color = '#5D4E37';

	const barWrap = document.createElement('div');		const barWrap = document.createElement('div');
	barWrap.style.width = '120px';		barWrap.style.width = '120px';
Line 50:		Line 60:
	barWrap.style.backgroundColor = '#D4C4A8';		barWrap.style.backgroundColor = '#D4C4A8';
	barWrap.style.borderRadius = '3px';		barWrap.style.borderRadius = '3px';

	const progress = document.createElement('div');		const progress = document.createElement('div');
	progress.style.height = '100%';		progress.style.height = '100%';
Line 57:		Line 66:
	progress.style.width = '0%';		progress.style.width = '0%';
	progress.style.transition = 'width 0.1s';		progress.style.transition = 'width 0.1s';

	barWrap.appendChild(progress);		barWrap.appendChild(progress);
	box.appendChild(btn);		box.appendChild(btn);
	box.appendChild(barWrap);		box.appendChild(barWrap);
	wrapper.appendChild(box);		wrapper.appendChild(box);

	const text = document.createElement('span');		const text = document.createElement('span');
	text.style.color = '#8B7355';		text.style.color = '#8B7355';
Line 68:		Line 75:
	text.innerText = label;		text.innerText = label;
	wrapper.appendChild(text);		wrapper.appendChild(text);

	container.appendChild(wrapper);		container.appendChild(wrapper);

	~~// Audio controls~~
	btn.addEventListener('click', function () {		btn.addEventListener('click', function () {
	if (audio.paused \|\| audio.ended) {		if (audio.paused \|\| audio.ended) {
Line 84:		Line 89:
	}		}
	});		});

	audio.addEventListener('timeupdate', () => {		audio.addEventListener('timeupdate', () => {
	if (audio.duration) {		if (audio.duration) {
Line 90:		Line 94:
	}		}
	});		});

	audio.addEventListener('ended', () => {		audio.addEventListener('ended', () => {
	btn.innerHTML = '▶️';		btn.innerHTML = '▶️';
Line 99:		Line 102:
	</script>		</script>
	}}		}}
			</includeonly>

← Older revision		Revision as of 21:21, 23 July 2025
Line 1:		Line 1:
	<includeonly>		<includeonly>{{#tag:div\|Loading audio player...\|class=audioplayer\|data-filename={{{1}}}\|data-caption={{{2\|Audio File}}}}}</includeonly>
	{{#tag:div\|
	~~{{#tag:div\|~~
	~~{{#tag:button\|▶️\|onclick=javascript:var~~ audio~~=this~~.~~audioElement~~\|\|~~(this.audioElement~~=~~new Audio('https://tuyin.online/images/~~{{{1}}~~}'));if(this.innerHTML==='▶️'){audio.play();this.innerHTML='⏸️';var btn=this;audio.onended=function(){btn.innerHTML='▶️'};}else{audio.pause();this.innerHTML='▶️';~~}\|~~style=padding: 4px 8px; margin-right: 8px; font~~-~~size: 12px; border: 1px solid #8B7355; background: #D4C4A8; color: #5D4E37;}}~~
	~~{{#tag:span\|Simple Player\|style~~=~~color: #8B7355; font-size: 11px;}}~~
	~~\|style=border: 1px solid #8B7355; padding: 8px; border-radius: 4px; background-color: #F5F0E8; width: 200px;}}~~
	~~{{#tag:span\|~~{{{2\|Audio File}}}~~\|style=color: #8B7355; font-style: italic;}}~~
	~~\|style=display: inline-flex; align-items: center; gap: 12px;~~}}
	</includeonly>