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:
<html>
<includeonly><html>
<audio id="audio_{{{1}}}" preload="auto">
  <source src="https://tuyin.online/images/{{{1}}}" type="audio/ogg">
</audio>
<script>
<script>
var audioFile = new Audio('https://tuyin.online/images/{{{1}}}');
(function() {
var isPlayingFile = false;
    var audioId = 'audio_{{{1}}}';
var playerId = 'player_' + Math.random().toString(36).substr(2, 9);
    var btnId = 'btn_{{{1}}}';
 
    var progId = 'prog_{{{1}}}';
function togglePlayFile() {
    var audio = document.getElementById(audioId);
    var button = document.getElementById(playerId + '_btn');
    var isPlaying = false;
    if (isPlayingFile) {
   
        audioFile.pause();
    window['togglePlay_' + '{{{1}}}'.replace(/[^a-zA-Z0-9]/g, '')] = function() {
        button.innerHTML = '▶️';
        var button = document.getElementById(btnId);
        isPlayingFile = false;
        if (isPlaying) {
    } else {
            audio.pause();
        audioFile.play().then(function() {
            button.innerHTML = '▶️';
            isPlaying = false;
        } else {
            audio.play();
             button.innerHTML = '⏸️';
             button.innerHTML = '⏸️';
             isPlayingFile = true;
             isPlaying = true;
         }).catch(function(error) {
         }
            console.log('Play failed:', error);
    };
            alert('Could not play audio: ' + error.message);
      
        });
    audio.addEventListener('timeupdate', function() {
     }
        var progress = document.getElementById(progId);
}
         var percentage = (audio.currentTime / audio.duration) * 100;
 
audioFile.addEventListener('timeupdate', function() {
    var progress = document.getElementById(playerId + '_progress');
    if (progress) {
         var percentage = (audioFile.currentTime / audioFile.duration) * 100;
         progress.style.width = percentage + '%';
         progress.style.width = percentage + '%';
     }
     });
});
   
 
    audio.addEventListener('ended', function() {
audioFile.addEventListener('ended', function() {
        document.getElementById(btnId).innerHTML = '▶️';
    var button = document.getElementById(playerId + '_btn');
         isPlaying = false;
    if (button) {
         document.getElementById(progId).style.width = '0%';
        button.innerHTML = '▶️';
     });
         isPlayingFile = false;
})();
         document.getElementById(playerId + '_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 onclick="togglePlayFile()" style="padding: 4px 8px; margin-right: 8px; font-size: 12px; border: 1px solid #8B7355; background: #D4C4A8; color: #5D4E37;">▶️</button>
         <button id="btn_{{{1}}}" onclick="window['togglePlay_' + '{{{1}}}'.replace(/[^a-zA-Z0-9]/g, '')]();" 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 style="display: inline-block; width: 120px; height: 6px; background-color: #D4C4A8; border-radius: 3px; vertical-align: middle;">
             <div style="height: 100%; background-color: #8B7355; border-radius: 3px; width: 0%; transition: width 0.1s;"></div>
             <div id="prog_{{{1}}}" style="height: 100%; background-color: #8B7355; border-radius: 3px; width: 0%; transition: width 0.1s;"></div>
         </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>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var buttons = document.querySelectorAll('button[onclick="togglePlayFile()"]');
    var lastButton = buttons[buttons.length - 1];
    lastButton.id = playerId + '_btn';
   
    var progressBars = document.querySelectorAll('div[style*="width: 0%"]');
    var lastProgress = progressBars[progressBars.length - 1];
    lastProgress.id = playerId + '_progress';
});
</script>
</html>

Revision as of 19:22, 23 July 2025

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