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 class="audioplayer" data-audio="{{{1}}}" data-label="{{{2|Audio File}}}"></div>
<div class="audioplayer" data-filename="{{{1}}}" data-label="{{{2|Audio File}}}"></div>


<script>
<script>
(function(){
document.addEventListener('DOMContentLoaded', function () {
   document.addEventListener('DOMContentLoaded', function() {
   document.querySelectorAll('.audioplayer').forEach(function(container) {
     var container = document.querySelector('.audioplayer[data-audio]');
     const file = container.dataset.filename;
     if (!container) return;
    const label = container.dataset.label;
    const playerId = 'player_' + Math.random().toString(36).substr(2, 9);
   
    const oggUrl = 'https://tuyin.online/images/' + file;
     const mp3Url = oggUrl.replace('.ogg', '.mp3');


     var fileName = container.getAttribute('data-audio');
     const audio = new Audio();
    var labelText = container.getAttribute('data-label');
     audio.preload = 'metadata';
 
     if (audio.canPlayType('audio/ogg')) {
    var oggUrl = 'https://tuyin.online/images/' + fileName;
       audio.src = oggUrl;
    var mp3Url = oggUrl.replace('.ogg', '.mp3');
     } else if (audio.canPlayType('audio/mpeg')) {
 
       audio.src = mp3Url;
    var playerId = 'player_' + Math.random().toString(36).substr(2, 9);
    var audioFile = new Audio();
     audioFile.preload = 'metadata';
 
     if (audioFile.canPlayType('audio/ogg')) {
       audioFile.src = oggUrl;
     } else if (audioFile.canPlayType('audio/mpeg')) {
       audioFile.src = mp3Url;
     } else {
     } else {
       container.innerHTML = '<span style="color:red">Your browser cannot play this audio.</span>';
       container.innerHTML = '<span style="color:red">Browser cannot play audio.</span>';
       return;
       return;
     }
     }


     // Create UI
     // Build UI
     var outer = document.createElement('div');
     const wrapper = document.createElement('div');
     outer.style.display = 'inline-flex';
     wrapper.style.display = 'inline-flex';
     outer.style.alignItems = 'center';
     wrapper.style.alignItems = 'center';
     outer.style.gap = '12px';
     wrapper.style.gap = '12px';


     var box = document.createElement('div');
     const box = document.createElement('div');
     box.style.border = '1px solid #8B7355';
     box.style.border = '1px solid #8B7355';
     box.style.padding = '8px';
     box.style.padding = '8px';
    box.style.display = 'inline-block';
     box.style.borderRadius = '4px';
     box.style.borderRadius = '4px';
     box.style.backgroundColor = '#F5F0E8';
     box.style.backgroundColor = '#F5F0E8';
     box.style.width = '200px';
     box.style.width = '200px';


     var button = document.createElement('button');
     const btn = document.createElement('button');
     button.id = playerId + '_btn';
     btn.id = playerId + '_btn';
     button.innerHTML = '▶️';
     btn.innerHTML = '▶️';
     button.style.padding = '4px 8px';
     btn.style.padding = '4px 8px';
     button.style.marginRight = '8px';
     btn.style.marginRight = '8px';
     button.style.fontSize = '12px';
     btn.style.fontSize = '12px';
     button.style.border = '1px solid #8B7355';
     btn.style.border = '1px solid #8B7355';
     button.style.background = '#D4C4A8';
     btn.style.background = '#D4C4A8';
     button.style.color = '#5D4E37';
     btn.style.color = '#5D4E37';


     var progressOuter = document.createElement('div');
     const barWrap = document.createElement('div');
     progressOuter.style.display = 'inline-block';
     barWrap.style.display = 'inline-block';
     progressOuter.style.width = '120px';
     barWrap.style.width = '120px';
     progressOuter.style.height = '6px';
     barWrap.style.height = '6px';
     progressOuter.style.backgroundColor = '#D4C4A8';
     barWrap.style.backgroundColor = '#D4C4A8';
     progressOuter.style.borderRadius = '3px';
     barWrap.style.borderRadius = '3px';
    progressOuter.style.verticalAlign = 'middle';


     var progress = document.createElement('div');
     const progress = document.createElement('div');
     progress.id = playerId + '_progress';
     progress.id = playerId + '_progress';
     progress.style.height = '100%';
     progress.style.height = '100%';
Line 67: Line 61:
     progress.style.transition = 'width 0.1s';
     progress.style.transition = 'width 0.1s';


     progressOuter.appendChild(progress);
     barWrap.appendChild(progress);
     box.appendChild(button);
     box.appendChild(btn);
     box.appendChild(progressOuter);
     box.appendChild(barWrap);
     outer.appendChild(box);
     wrapper.appendChild(box);


     var label = document.createElement('span');
     const text = document.createElement('span');
     label.style.color = '#8B7355';
     text.style.color = '#8B7355';
     label.style.fontStyle = 'italic';
     text.style.fontStyle = 'italic';
     label.textContent = labelText;
     text.innerText = label;
     outer.appendChild(label);
     wrapper.appendChild(text);


     container.appendChild(outer);
     container.appendChild(wrapper);


     button.addEventListener('click', function () {
     // Events
       if (audioFile.paused || audioFile.ended) {
    btn.addEventListener('click', function () {
         audioFile.play().then(() => {
       if (audio.paused || audio.ended) {
           button.innerHTML = '⏸️';
         audio.play().then(() => {
           btn.innerHTML = '⏸️';
         }).catch((e) => {
         }).catch((e) => {
           alert("Could not play audio: " + e.message);
           alert("Could not play audio: " + e.message);
         });
         });
       } else {
       } else {
         audioFile.pause();
         audio.pause();
         button.innerHTML = '▶️';
         btn.innerHTML = '▶️';
       }
       }
     });
     });


     audioFile.addEventListener('timeupdate', function () {
     audio.addEventListener('timeupdate', () => {
       if (audioFile.duration) {
       if (audio.duration) {
         progress.style.width = ((audioFile.currentTime / audioFile.duration) * 100) + '%';
         progress.style.width = (audio.currentTime / audio.duration) * 100 + '%';
       }
       }
     });
     });


     audioFile.addEventListener('ended', function () {
     audio.addEventListener('ended', () => {
       button.innerHTML = '▶️';
       btn.innerHTML = '▶️';
       progress.style.width = '0%';
       progress.style.width = '0%';
     });
     });
   });
   });
})();
});
</script>
</script>
</html>
</html>

Revision as of 20:03, 23 July 2025

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