Template:AudioPlayer: Difference between revisions

From Tuyin Archives
← Older editNewer edit →
VisualWikitext
No edit summary
No edit summary
Line 1: Line 1:
<html>
<html>
<div id="audioplayer-container-{{{1}}}"></div>
<script>
<script>
(function(){
(function(){
Line 8: Line 9:


   document.addEventListener('DOMContentLoaded', function() {
   document.addEventListener('DOMContentLoaded', function() {
    // Create container
     var container = document.getElementById('audioplayer-container-{{{1}}}');
     var container = document.createElement('div');
     if (!container) return;
    container.style.display = 'inline-flex';
     container.style.alignItems = 'center';
    container.style.gap = '12px';


    // Create player box
     var outer = document.createElement('div');
     var playerBox = document.createElement('div');
     outer.style.display = 'inline-flex';
     playerBox.style.border = '1px solid #8B7355';
     outer.style.alignItems = 'center';
    playerBox.style.padding = '8px';
     outer.style.gap = '12px';
    playerBox.style.display = 'inline-block';
    playerBox.style.borderRadius = '4px';
     playerBox.style.backgroundColor = '#F5F0E8';
     playerBox.style.width = '200px';


    // Create play button
     var box = document.createElement('div');
     var playButton = document.createElement('button');
     box.style.border = '1px solid #8B7355';
     playButton.id = playerId + '_btn';
     box.style.padding = '8px';
    playButton.innerHTML = '▶️';
     box.style.display = 'inline-block';
     playButton.style.padding = '4px 8px';
     box.style.borderRadius = '4px';
    playButton.style.marginRight = '8px';
     box.style.backgroundColor = '#F5F0E8';
     playButton.style.fontSize = '12px';
     box.style.width = '200px';
     playButton.style.border = '1px solid #8B7355';
     playButton.style.background = '#D4C4A8';
     playButton.style.color = '#5D4E37';


    // Create progress bar container
     var button = document.createElement('button');
     var progressContainer = document.createElement('div');
     button.id = playerId + '_btn';
     progressContainer.style.display = 'inline-block';
    button.innerHTML = '▶️';
     progressContainer.style.width = '120px';
    button.style.padding = '4px 8px';
     progressContainer.style.height = '6px';
     button.style.marginRight = '8px';
     progressContainer.style.backgroundColor = '#D4C4A8';
     button.style.fontSize = '12px';
     progressContainer.style.borderRadius = '3px';
     button.style.border = '1px solid #8B7355';
     progressContainer.style.verticalAlign = 'middle';
     button.style.background = '#D4C4A8';
     button.style.color = '#5D4E37';


    // Create progress bar inner
     var progressOuter = document.createElement('div');
     var progressBar = document.createElement('div');
     progressOuter.style.display = 'inline-block';
     progressBar.id = playerId + '_progress';
     progressOuter.style.width = '120px';
     progressBar.style.height = '100%';
     progressOuter.style.height = '6px';
     progressBar.style.backgroundColor = '#8B7355';
     progressOuter.style.backgroundColor = '#D4C4A8';
     progressBar.style.borderRadius = '3px';
     progressOuter.style.borderRadius = '3px';
     progressBar.style.width = '0%';
     progressOuter.style.verticalAlign = 'middle';
     progressBar.style.transition = 'width 0.1s';


     // Assemble
     var progress = document.createElement('div');
     progressContainer.appendChild(progressBar);
    progress.id = playerId + '_progress';
     playerBox.appendChild(playButton);
    progress.style.height = '100%';
     playerBox.appendChild(progressContainer);
    progress.style.backgroundColor = '#8B7355';
     container.appendChild(playerBox);
    progress.style.borderRadius = '3px';
    progress.style.width = '0%';
    progress.style.transition = 'width 0.1s';
 
     progressOuter.appendChild(progress);
     box.appendChild(button);
     box.appendChild(progressOuter);
     outer.appendChild(box);


     var label = document.createElement('span');
     var label = document.createElement('span');
     label.style.color = '#8B7355';
     label.style.color = '#8B7355';
     label.style.fontStyle = 'italic';
     label.style.fontStyle = 'italic';
     label.innerText = '{{{2|Audio File}}}';
     label.textContent = '{{{2|Audio File}}}';
     container.appendChild(label);
     outer.appendChild(label);


     // Append to current script's parent
     container.appendChild(outer);
    var scriptTag = document.currentScript;
    scriptTag.parentNode.insertBefore(container, scriptTag.nextSibling);


     // Setup button
     button.addEventListener('click', function () {
    playButton.addEventListener('click', function () {
       if (audioFile.paused || audioFile.ended) {
       if (audioFile.paused || audioFile.ended) {
         audioFile.play().then(() => {
         audioFile.play().then(() => {
           playButton.innerHTML = '⏸️';
           button.innerHTML = '⏸️';
         }).catch((e) => {
         }).catch((e) => {
           alert("Could not play audio: " + e.message);
           alert("Could not play audio: " + e.message);
Line 78: Line 73:
       } else {
       } else {
         audioFile.pause();
         audioFile.pause();
         playButton.innerHTML = '▶️';
         button.innerHTML = '▶️';
       }
       }
     });
     });
Line 84: Line 79:
     audioFile.addEventListener('timeupdate', function () {
     audioFile.addEventListener('timeupdate', function () {
       if (audioFile.duration) {
       if (audioFile.duration) {
         progressBar.style.width = ((audioFile.currentTime / audioFile.duration) * 100) + '%';
         progress.style.width = ((audioFile.currentTime / audioFile.duration) * 100) + '%';
       }
       }
     });
     });


     audioFile.addEventListener('ended', function () {
     audioFile.addEventListener('ended', function () {
       playButton.innerHTML = '▶️';
       button.innerHTML = '▶️';
       progressBar.style.width = '0%';
       progress.style.width = '0%';
     });
     });
   });
   });

Revision as of 19:58, 23 July 2025

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