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>
<audio id="myAudio" preload="auto">
<div id="player-{{{1|replace:https://tuyin.online/images/,}}}" data-audio-url="{{{1}}}" data-caption="{{{2|Audio File}}}">
  <source src="{{{1}}}" type="audio/ogg">
     <div style="display: inline-flex; align-items: center; gap: 12px;">
  <source src="{{{1}}}" type="audio/mpeg">
        <div style="border: 1px solid #8B7355; padding: 8px; display: inline-block; border-radius: 4px; background-color: #F5F0E8; width: 200px;">
</audio>
            <button class="audio-play-btn" 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;">
<script>
                <div class="audio-progress" style="height: 100%; background-color: #8B7355; border-radius: 3px; width: 0%; transition: width 0.1s;"></div>
function togglePlay() {
            </div>
    var audio = document.getElementById('myAudio');
    var button = document.getElementById('playBtn');
   
    if (audio.paused) {
        audio.play();
        button.innerHTML = '⏸️';
    } else {
        audio.pause();
        button.innerHTML = '▶️';
    }
}
 
document.getElementById('myAudio').addEventListener('timeupdate', function() {
    var audio = document.getElementById('myAudio');
    var progress = document.getElementById('progress');
    if (audio.duration) {
        var percentage = (audio.currentTime / audio.duration) * 100;
        progress.style.width = percentage + '%';
    }
});
 
document.getElementById('myAudio').addEventListener('ended', function() {
     document.getElementById('playBtn').innerHTML = '▶️';
    document.getElementById('progress').style.width = '0%';
});
</script>
 
<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" onclick="togglePlay()" 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" 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>
     </div>
    <span style="color: #8B7355; font-style: italic;">{{{2|Audio File}}}</span>
</div>
</div>
</html></includeonly>
 
<script>
(function() {
    var players = document.querySelectorAll('[id^="player-"]');
    players.forEach(function(player) {
        var btn = player.querySelector('.audio-play-btn');
        var progress = player.querySelector('.audio-progress');
        var audioUrl = player.getAttribute('data-audio-url');
        var audio = new Audio(audioUrl);
        var isPlaying = false;
       
        btn.onclick = function() {
            if (isPlaying) {
                audio.pause();
                btn.innerHTML = '▶️';
                isPlaying = false;
            } else {
                audio.play();
                btn.innerHTML = '⏸️';
                isPlaying = true;
            }
        };
       
        audio.ontimeupdate = function() {
            if (audio.duration) {
                var percentage = (audio.currentTime / audio.duration) * 100;
                progress.style.width = percentage + '%';
            }
        };
       
        audio.onended = function() {

Revision as of 19:30, 23 July 2025

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