Template:AudioPlayer: Difference between revisions

From Tuyin Archives
← Older editNewer edit →
VisualWikitext
No edit summary
No edit summary
Line 7: Line 7:
   audioFile.preload = 'metadata';
   audioFile.preload = 'metadata';


   function updateProgress() {
   document.addEventListener('DOMContentLoaded', function() {
     var progress = document.getElementById(playerId + '_progress');
    // Create container
     if (progress && audioFile.duration) {
     var container = document.createElement('div');
      progress.style.width = ((audioFile.currentTime / audioFile.duration) * 100) + '%';
     container.style.display = 'inline-flex';
     }
    container.style.alignItems = 'center';
  }
    container.style.gap = '12px';
 
    // Create player box
    var playerBox = document.createElement('div');
    playerBox.style.border = '1px solid #8B7355';
    playerBox.style.padding = '8px';
    playerBox.style.display = 'inline-block';
    playerBox.style.borderRadius = '4px';
    playerBox.style.backgroundColor = '#F5F0E8';
    playerBox.style.width = '200px';
 
    // Create play button
    var playButton = document.createElement('button');
    playButton.id = playerId + '_btn';
    playButton.innerHTML = '▶️';
    playButton.style.padding = '4px 8px';
     playButton.style.marginRight = '8px';
    playButton.style.fontSize = '12px';
    playButton.style.border = '1px solid #8B7355';
    playButton.style.background = '#D4C4A8';
    playButton.style.color = '#5D4E37';


  function resetPlayer() {
    // Create progress bar container
     document.getElementById(playerId + '_btn').innerHTML = '▶️';
     var progressContainer = document.createElement('div');
     document.getElementById(playerId + '_progress').style.width = '0%';
    progressContainer.style.display = 'inline-block';
  }
    progressContainer.style.width = '120px';
    progressContainer.style.height = '6px';
     progressContainer.style.backgroundColor = '#D4C4A8';
    progressContainer.style.borderRadius = '3px';
    progressContainer.style.verticalAlign = 'middle';


  document.addEventListener('DOMContentLoaded', function() {
    // Create progress bar inner
     var button = document.getElementById(playerId + '_btn');
    var progressBar = document.createElement('div');
     button.addEventListener('click', function() {
    progressBar.id = playerId + '_progress';
    progressBar.style.height = '100%';
    progressBar.style.backgroundColor = '#8B7355';
    progressBar.style.borderRadius = '3px';
    progressBar.style.width = '0%';
    progressBar.style.transition = 'width 0.1s';
 
    // Assemble
    progressContainer.appendChild(progressBar);
    playerBox.appendChild(playButton);
    playerBox.appendChild(progressContainer);
    container.appendChild(playerBox);
 
     var label = document.createElement('span');
    label.style.color = '#8B7355';
    label.style.fontStyle = 'italic';
    label.innerText = '{{{2|Audio File}}}';
    container.appendChild(label);
 
     // Append to current script's parent
    var scriptTag = document.currentScript;
    scriptTag.parentNode.insertBefore(container, scriptTag.nextSibling);
 
    // Setup button
    playButton.addEventListener('click', function () {
       if (audioFile.paused || audioFile.ended) {
       if (audioFile.paused || audioFile.ended) {
         audioFile.play().then(() => {
         audioFile.play().then(() => {
           button.innerHTML = '⏸️';
           playButton.innerHTML = '⏸️';
         }).catch((e) => {
         }).catch((e) => {
           alert("Could not play audio: " + e.message);
           alert("Could not play audio: " + e.message);
Line 30: Line 78:
       } else {
       } else {
         audioFile.pause();
         audioFile.pause();
         button.innerHTML = '▶️';
         playButton.innerHTML = '▶️';
      }
    });
 
    audioFile.addEventListener('timeupdate', function () {
      if (audioFile.duration) {
        progressBar.style.width = ((audioFile.currentTime / audioFile.duration) * 100) + '%';
       }
       }
     });
     });


     audioFile.addEventListener('timeupdate', updateProgress);
     audioFile.addEventListener('ended', function () {
    audioFile.addEventListener('ended', resetPlayer);
      playButton.innerHTML = '▶️';
      progressBar.style.width = '0%';
    });
   });
   });
  document.write(`
    <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="${playerId}_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;">
          <div id="${playerId}_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>
  `);
})();
})();
</script>
</script>
</html>
</html>

Revision as of 19:57, 23 July 2025

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