Template:AudioPlayer: Difference between revisions

From Tuyin Archives
← Older editNewer edit →
VisualWikitext
No edit summary
No edit summary
Line 1: Line 1:
<html>
<html>
<script>
<script>
var audioFile = new Audio();
(function(){
var isPlayingFile = false;
  var playerId = 'player_' + Math.random().toString(36).substr(2, 9);
var playerId = 'player_' + Math.random().toString(36).substr(2, 9);
  var audioFile = new Audio();


// Try multiple formats
  // Try multiple formats
audioFile.innerHTML = '<source src="https://tuyin.online/images/{{{1}}}" type="audio/ogg"><source src="https://tuyin.online/images/{{{1|replace:.ogg,.mp3}}}" type="audio/mpeg">';
  audioFile.innerHTML = '<source src="https://tuyin.online/images/{{{1}}}" type="audio/ogg">'
                      + '<source src="https://tuyin.online/images/{{{1|replace:.ogg,.mp3}}}" type="audio/mpeg">';


function togglePlayFile() {
  window['toggle_' + playerId] = function() {
     var button = document.getElementById(playerId + '_btn');
     var button = document.getElementById(playerId + '_btn');
     if (isPlayingFile) {
     if (audioFile.paused) {
        audioFile.pause();
      audioFile.play().then(function() {
         button.innerHTML = '▶️';
         button.innerHTML = '⏸️';
         isPlayingFile = false;
      }).catch(function(e) {
         alert('Could not play audio: ' + e.message);
      });
     } else {
     } else {
        audioFile.play().then(function() {
      audioFile.pause();
            button.innerHTML = '⏸️';
      button.innerHTML = '▶️';
            isPlayingFile = true;
        }).catch(function(error) {
            console.log('Play failed:', error);
            alert('Could not play audio: ' + error.message);
        });
     }
     }
}
  };


audioFile.addEventListener('timeupdate', function() {
  audioFile.addEventListener('timeupdate', function() {
     var progress = document.getElementById(playerId + '_progress');
     var progress = document.getElementById(playerId + '_progress');
     if (progress) {
     if (progress) {
        var percentage = (audioFile.currentTime / audioFile.duration) * 100;
      progress.style.width = ((audioFile.currentTime / audioFile.duration) * 100) + '%';
        progress.style.width = percentage + '%';
     }
     }
});
  });


audioFile.addEventListener('ended', function() {
  audioFile.addEventListener('ended', function() {
     var button = document.getElementById(playerId + '_btn');
     document.getElementById(playerId + '_btn').innerHTML = '▶️';
    if (button) {
    document.getElementById(playerId + '_progress').style.width = '0%';
        button.innerHTML = '▶️';
  });
        isPlayingFile = false;
 
        document.getElementById(playerId + '_progress').style.width = '0%';
  document.addEventListener('DOMContentLoaded', function() {
     }
     document.getElementById(playerId + '_btn').onclick = window['toggle_' + playerId];
});
  });
</script>


<div style="display: inline-flex; align-items: center; gap: 12px;">
  document.write(`
    <div style="border: 1px solid #8B7355; padding: 8px; display: inline-block; border-radius: 4px; background-color: #F5F0E8; width: 200px;">
    <div style="display:inline-flex; align-items:center; gap:12px;">
         <button onclick="togglePlayFile()" style="padding: 4px 8px; margin-right: 8px; font-size: 12px; border: 1px solid #8B7355; background: #D4C4A8; color: #5D4E37;">▶️</button>
      <div style="border:1px solid #8B7355; padding:8px; display:inline-block; border-radius:4px; background-color:#F5F0E8; width:200px;">
         <div style="display: inline-block; width: 120px; height: 6px; background-color: #D4C4A8; border-radius: 3px; vertical-align: middle;">
         <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="height: 100%; background-color: #8B7355; border-radius: 3px; width: 0%; transition: width 0.1s;"></div>
         <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>
      </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>
})();
 
<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>
</script>
</html>
</html>

Revision as of 19:54, 23 July 2025

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