Template:AudioPlayer: Difference between revisions

From Tuyin Archives
← Older editNewer edit →
VisualWikitext
No edit summary
Tag: Reverted
No edit summary
Tag: Manual revert
Line 1: Line 1:
<includeonly>
<html>
<div id="audioplayer-{{{id|1}}}"></div>
<script>
<script>
(function() {
var audio{{{1}}} = new Audio('https://tuvin.online/images/{{{1}}}');
  var audio = document.createElement("audio");
var isPlaying{{{1}}} = false;
  audio.setAttribute("controls", "");
  audio.setAttribute("preload", "metadata");
  audio.style.maxWidth = "240px";


  var source = document.createElement("source");
function togglePlay{{{1}}}() {
  source.src = "https://morrisjb18.github.io/tuyinhost/{{{file}}}";
    var button = document.getElementById('playBtn{{{1}}}');
  source.type = "audio/ogg";
    if (isPlaying{{{1}}}) {
        audio{{{1}}}.pause();
        button.innerHTML = '▶️';
        isPlaying{{{1}}} = false;
    } else {
        audio{{{1}}}.play();
        button.innerHTML = '⏸️';
        isPlaying{{{1}}} = true;
    }
}


  audio.appendChild(source);
audio{{{1}}}.addEventListener('timeupdate', function() {
  document.getElementById("audioplayer-{{{id|1}}}").appendChild(audio);
    var progress = document.getElementById('progress{{{1}}}');
})();
    var percentage = (audio{{{1}}}.currentTime / audio{{{1}}}.duration) * 100;
    progress.style.width = percentage + '%';
});
 
audio{{{1}}}.addEventListener('ended', function() {
    document.getElementById('playBtn{{{1}}}').innerHTML = '▶️';
    isPlaying{{{1}}} = false;
    document.getElementById('progress{{{1}}}').style.width = '0%';
});
</script>
</script>
</includeonly>
 
<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;">
        <button id="playBtn{{{1}}}" onclick="togglePlay{{{1}}}()" 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;">
            <div id="progress{{{1}}}" style="height: 100%; background-color: #8B7355; border-radius: 3px; width: 0%; transition: width 0.1s;"></div>
        </div>
    </div>
    <span style="color: #8B7355; font-style: italic;">{{{2|Audio File}}}</span>
</div>
</html>

Revision as of 19:34, 23 July 2025

{{{2|Audio File}}}

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