Widget:AudioPlayer: Difference between revisions

From Tuyin Archives
← Older editNewer edit →
VisualWikitext
No edit summary
No edit summary
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>

Revision as of 19:45, 23 July 2025

   <button id="playBtn-{{{filename}}}" style="padding: 4px 8px; margin-right: 8px; font-size: 12px; border: 1px solid #8B7355; background: #D4C4A8; color: #5D4E37;">▶️</button>

 Audio File
Retrieved from "https://tuyin.online/wiki/index.php?title=Widget:AudioPlayer&oldid=1349"