Template:AudioPlayer: Difference between revisions

From Tuyin Archives
No edit summary
No edit summary
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>

Revision as of 20:17, 23 July 2025