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>
<script>
<script>
function playAudio{{{1|replace:.,-}}}() {
var audio = new Audio('{{{1}}}');
    var audio = new Audio('{{{1}}}');
var isPlaying = false;
     var button = document.getElementById('btn{{{1|replace:.,-}}}');
 
      
function togglePlay() {
    if (button.innerHTML === '▶️') {
     var button = document.getElementById('playBtn');
     if (isPlaying) {
        audio.pause();
        button.innerHTML = '▶️';
        isPlaying = false;
    } else {
         audio.play();
         audio.play();
         button.innerHTML = '⏸️';
         button.innerHTML = '⏸️';
          
         isPlaying = true;
        audio.addEventListener('ended', function() {
            button.innerHTML = '▶️';
        });
    } else {
        audio.pause();
        button.innerHTML = '▶️';
     }
     }
}
}
audio.addEventListener('timeupdate', function() {
    var progress = document.getElementById('progress');
    var percentage = (audio.currentTime / audio.duration) * 100;
    progress.style.width = percentage + '%';
});
audio.addEventListener('ended', function() {
    document.getElementById('playBtn').innerHTML = '▶️';
    isPlaying = false;
    document.getElementById('progress').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:.,-}}}" onclick="playAudio{{{1|replace:.,-}}}()" style="padding: 4px 8px; margin-right: 8px; font-size: 12px; border: 1px solid #8B7355; background: #D4C4A8; color: #5D4E37;">▶️</button>
         <button id="playBtn" onclick="togglePlay()" style="padding: 4px 8px; margin-right: 8px; font-size: 12px; border: 1px solid #8B7355; background: #D4C4A8; color: #5D4E37;">▶️</button>
         <span style="margin-left: 8px; color: #8B7355;">Audio Player</span>
         <div style="display: inline-block; width: 120px; height: 6px; background-color: #D4C4A8; border-radius: 3px; vertical-align: middle;">
            <div id="progress" 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:27, 23 July 2025

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