Template:AudioPlayer: Difference between revisions

From Tuyin Archives
← Older editNewer edit →
VisualWikitext
No edit summary
No edit summary
Line 4: Line 4:
   var playerId = 'player_' + Math.random().toString(36).substr(2, 9);
   var playerId = 'player_' + Math.random().toString(36).substr(2, 9);
   var audioFile = new Audio();
   var audioFile = new Audio();
  // Set a single file source. For multiple formats, you'd need separate fallback logic.
   audioFile.src = 'https://tuyin.online/images/{{{1}}}';
   audioFile.src = 'https://tuyin.online/images/{{{1}}}';
   audioFile.preload = 'metadata';
   audioFile.preload = 'metadata';


   window['toggle_' + playerId] = function() {
   function updateProgress() {
    var button = document.getElementById(playerId + '_btn');
    if (audioFile.paused) {
      audioFile.play().then(function() {
        button.innerHTML = '⏸️';
      }).catch(function(e) {
        console.error('Play failed:', e);
        alert('Could not play audio: ' + e.message);
      });
    } else {
      audioFile.pause();
      button.innerHTML = '▶️';
    }
  };
 
  audioFile.addEventListener('timeupdate', function() {
     var progress = document.getElementById(playerId + '_progress');
     var progress = document.getElementById(playerId + '_progress');
     if (progress && audioFile.duration) {
     if (progress && audioFile.duration) {
       progress.style.width = ((audioFile.currentTime / audioFile.duration) * 100) + '%';
       progress.style.width = ((audioFile.currentTime / audioFile.duration) * 100) + '%';
     }
     }
   });
   }


   audioFile.addEventListener('ended', function() {
   function resetPlayer() {
     var btn = document.getElementById(playerId + '_btn');
     document.getElementById(playerId + '_btn').innerHTML = '▶️';
    if (btn) btn.innerHTML = '▶️';
     document.getElementById(playerId + '_progress').style.width = '0%';
     var progress = document.getElementById(playerId + '_progress');
   }
    if (progress) progress.style.width = '0%';
   });


   document.addEventListener('DOMContentLoaded', function() {
   document.addEventListener('DOMContentLoaded', function() {
     document.getElementById(playerId + '_btn').onclick = window['toggle_' + playerId];
     var button = document.getElementById(playerId + '_btn');
    button.addEventListener('click', function() {
      if (audioFile.paused || audioFile.ended) {
        audioFile.play().then(() => {
          button.innerHTML = '⏸️';
        }).catch((e) => {
          alert("Could not play audio: " + e.message);
        });
      } else {
        audioFile.pause();
        button.innerHTML = '▶️';
      }
    });
 
    audioFile.addEventListener('timeupdate', updateProgress);
    audioFile.addEventListener('ended', resetPlayer);
   });
   });


Revision as of 19:56, 23 July 2025

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