Template:AudioPlayer: Difference between revisions

From Tuyin Archives
← Older editNewer edit →
VisualWikitext
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 1: Line 1:
<includeonly><html>
<includeonly><html>
<audio id="audio_{{{1|replace:https://,}}}" preload="auto">
  <source src="{{{1}}}" type="audio/ogg">
  <source src="{{{1}}}" type="audio/mpeg">
</audio>
<script>
<script>
(function() {
function playAudio{{{1|replace:.,-}}}() {
    var audioId = 'audio_{{{1|replace:https://,}}}';
     var audio = new Audio('{{{1}}}');
     var btnId = 'btn_{{{1|replace:https://,}}}';
     var button = document.getElementById('btn{{{1|replace:.,-}}}');
     var progId = 'prog_{{{1|replace:https://,}}}';
    var audio = document.getElementById(audioId);
    var isPlaying = false;
      
      
     window.togglePlayUrl = function(id) {
     if (button.innerHTML === '▶️') {
        var button = document.getElementById('btn_' + id);
         audio.play();
         var audioEl = document.getElementById('audio_' + id);
         button.innerHTML = '⏸️';
         var progEl = document.getElementById('prog_' + id);
          
          
         if (audioEl.paused) {
         audio.addEventListener('ended', function() {
            audioEl.play();
            button.innerHTML = '⏸️';
        } else {
            audioEl.pause();
             button.innerHTML = '▶️';
             button.innerHTML = '▶️';
         }
         });
     };
     } else {
   
         audio.pause();
    audio.addEventListener('timeupdate', function() {
         button.innerHTML = '▶️';
         var progress = document.getElementById(progId);
     }
        if (progress && audio.duration) {
}
            var percentage = (audio.currentTime / audio.duration) * 100;
            progress.style.width = percentage + '%';
         }
    });
   
    audio.addEventListener('ended', function() {
        document.getElementById(btnId).innerHTML = '▶️';
        document.getElementById(progId).style.width = '0%';
     });
})();
</script>
</script>


<div style="display: inline-flex; align-items: center; gap: 12px;">
<div style="display: inline-flex; align-items: center; gap: 12px;">
     <div style="border: 1px solid #8B7355; padding: 8px; display: inline-block; border-radius: 4px; background-color: #F5F0E8; width: 200px;">
     <div style="border: 1px solid #8B7355; padding: 8px; display: inline-block; border-radius: 4px; background-color: #F5F0E8; width: 200px;">
         <button id="btn_{{{1|replace:https://,}}}" onclick="togglePlayUrl('{{{1|replace:https://,}}}')" style="padding: 4px 8px; margin-right: 8px; font-size: 12px; border: 1px solid #8B7355; background: #D4C4A8; color: #5D4E37;">▶️</button>
         <button id="btn{{{1|replace:.,-}}}" onclick="playAudio{{{1|replace:.,-}}}()" 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;">
         <span style="margin-left: 8px; color: #8B7355;">Audio Player</span>
            <div id="prog_{{{1|replace:https://,}}}" style="height: 100%; background-color: #8B7355; border-radius: 3px; width: 0%; transition: width 0.1s;"></div>
        </div>
     </div>
     </div>
     <span style="color: #8B7355; font-style: italic;">{{{2|Audio File}}}</span>
     <span style="color: #8B7355; font-style: italic;">{{{2|Audio File}}}</span>
</div>
</div>
</html></includeonly>
</html></includeonly>

Revision as of 19:26, 23 July 2025

Retrieved from "https://tuyin.online/wiki/index.php?title=Template:AudioPlayer&oldid=1334"