Template:AudioPlayer: Difference between revisions

From Tuyin Archives
← Older editNewer edit →
VisualWikitext
No edit summary
No edit summary
Line 1: Line 1:
<includeonly>
{{#tag:html|
{{#tag:html|
<div class="audioplayer" data-filename="{{{1}}}" data-label="{{{2|Audio File}}}"></div>
<div class="audioplayer" data-filename="{{{1}}}" data-label="{{{2|Audio File}}}"></div>
<script>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.addEventListener('DOMContentLoaded', function () {
Line 7: Line 7:
     const file = container.dataset.filename;
     const file = container.dataset.filename;
     const label = container.dataset.label;
     const label = container.dataset.label;
     const playerId = 'player_' + Math.random().toString(36).substr(2, 9);
      
 
    // Debug: show what we're getting
    console.log('Filename:', file);
    console.log('Label:', label);
   
    if (!file || file === '{{{1}}}') {
      container.innerHTML = '<span style="color:red">No filename provided</span>';
      return;
    }
   
     const oggUrl = 'https://tuyin.online/images/' + file;
     const oggUrl = 'https://tuyin.online/images/' + file;
     const mp3Url = oggUrl.replace('.ogg', '.mp3');
     const mp3Url = oggUrl.replace('.ogg', '.mp3');
 
   
    // Debug: show URLs
    console.log('OGG URL:', oggUrl);
    console.log('MP3 URL:', mp3Url);
   
     const audio = new Audio();
     const audio = new Audio();
     audio.preload = 'metadata';
     audio.preload = 'metadata';
   
     if (audio.canPlayType('audio/ogg')) {
     if (audio.canPlayType('audio/ogg')) {
       audio.src = oggUrl;
       audio.src = oggUrl;
Line 22: Line 35:
       return;
       return;
     }
     }
 
   
     // Build UI
     // Rest of your code stays the same...
     const wrapper = document.createElement('div');
     const wrapper = document.createElement('div');
     wrapper.style.display = 'inline-flex';
     wrapper.style.display = 'inline-flex';
     wrapper.style.alignItems = 'center';
     wrapper.style.alignItems = 'center';
     wrapper.style.gap = '12px';
     wrapper.style.gap = '12px';
     const box = document.createElement('div');
     const box = document.createElement('div');
     box.style.border = '1px solid #8B7355';
     box.style.border = '1px solid #8B7355';
Line 35: Line 47:
     box.style.backgroundColor = '#F5F0E8';
     box.style.backgroundColor = '#F5F0E8';
     box.style.width = '200px';
     box.style.width = '200px';
     const btn = document.createElement('button');
     const btn = document.createElement('button');
     btn.innerHTML = '▶️';
     btn.innerHTML = '▶️';
Line 44: Line 55:
     btn.style.background = '#D4C4A8';
     btn.style.background = '#D4C4A8';
     btn.style.color = '#5D4E37';
     btn.style.color = '#5D4E37';
     const barWrap = document.createElement('div');
     const barWrap = document.createElement('div');
     barWrap.style.width = '120px';
     barWrap.style.width = '120px';
Line 50: Line 60:
     barWrap.style.backgroundColor = '#D4C4A8';
     barWrap.style.backgroundColor = '#D4C4A8';
     barWrap.style.borderRadius = '3px';
     barWrap.style.borderRadius = '3px';
     const progress = document.createElement('div');
     const progress = document.createElement('div');
     progress.style.height = '100%';
     progress.style.height = '100%';
Line 57: Line 66:
     progress.style.width = '0%';
     progress.style.width = '0%';
     progress.style.transition = 'width 0.1s';
     progress.style.transition = 'width 0.1s';
     barWrap.appendChild(progress);
     barWrap.appendChild(progress);
     box.appendChild(btn);
     box.appendChild(btn);
     box.appendChild(barWrap);
     box.appendChild(barWrap);
     wrapper.appendChild(box);
     wrapper.appendChild(box);
     const text = document.createElement('span');
     const text = document.createElement('span');
     text.style.color = '#8B7355';
     text.style.color = '#8B7355';
Line 68: Line 75:
     text.innerText = label;
     text.innerText = label;
     wrapper.appendChild(text);
     wrapper.appendChild(text);
     container.appendChild(wrapper);
     container.appendChild(wrapper);
 
      
     // Audio controls
     btn.addEventListener('click', function () {
     btn.addEventListener('click', function () {
       if (audio.paused || audio.ended) {
       if (audio.paused || audio.ended) {
Line 84: Line 89:
       }
       }
     });
     });
     audio.addEventListener('timeupdate', () => {
     audio.addEventListener('timeupdate', () => {
       if (audio.duration) {
       if (audio.duration) {
Line 90: Line 94:
       }
       }
     });
     });
     audio.addEventListener('ended', () => {
     audio.addEventListener('ended', () => {
       btn.innerHTML = '▶️';
       btn.innerHTML = '▶️';
Line 99: Line 102:
</script>
</script>
}}
}}
</includeonly>

Revision as of 20:08, 23 July 2025

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