Template:AudioPlayer

<script> document.addEventListener('DOMContentLoaded', function () {

 document.querySelectorAll('.audioplayer[data-filename]:not(.initialized)').forEach(function(container) {
   container.classList.add('initialized');
   const file = container.dataset.filename;
   const label = container.dataset.label;
   
   if (!file) {
     container.innerHTML = 'No filename provided';
     return;
   }
   
   const oggUrl = 'https://tuyin.online/images/' + file;
   const mp3Url = oggUrl.replace('.ogg', '.mp3');
   const audio = new Audio();
   audio.preload = 'metadata';
   
   if (audio.canPlayType('audio/ogg')) {
     audio.src = oggUrl;
   } else if (audio.canPlayType('audio/mpeg')) {
     audio.src = mp3Url;
   } else {
     container.innerHTML = 'Browser cannot play audio.';
     return;
   }
   
   const wrapper = document.createElement('div');
   wrapper.style.display = 'inline-flex';
   wrapper.style.alignItems = 'center';
   wrapper.style.gap = '12px';
   const box = document.createElement('div');
   box.style.border = '1px solid #8B7355';
   box.style.padding = '8px';
   box.style.borderRadius = '4px';
   box.style.backgroundColor = '#F5F0E8';
   box.style.width = '200px';
   const btn = document.createElement('button');
   btn.innerHTML = '▶️';
   btn.style.padding = '4px 8px';
   btn.style.marginRight = '8px';
   btn.style.fontSize = '12px';
   btn.style.border = '1px solid #8B7355';
   btn.style.background = '#D4C4A8';
   btn.style.color = '#5D4E37';
   const barWrap = document.createElement('div');
   barWrap.style.width = '120px';
   barWrap.style.height = '6px';
   barWrap.style.backgroundColor = '#D4C4A8';
   barWrap.style.borderRadius = '3px';
   const progress = document.createElement('div');
   progress.style.height = '100%';
   progress.style.backgroundColor = '#8B7355';
   progress.style.borderRadius = '3px';
   progress.style.width = '0%';
   progress.style.transition = 'width 0.1s';
   barWrap.appendChild(progress);
   box.appendChild(btn);
   box.appendChild(barWrap);
   wrapper.appendChild(box);
   const text = document.createElement('span');
   text.style.color = '#8B7355';
   text.style.fontStyle = 'italic';
   text.innerText = label;
   wrapper.appendChild(text);
   container.appendChild(wrapper);
   
   btn.addEventListener('click', function () {
     if (audio.paused || audio.ended) {
       audio.play().then(() => {
         btn.innerHTML = '⏸️';
       }).catch((e) => {
         alert("Could not play audio: " + e.message);
       });
     } else {
       audio.pause();
       btn.innerHTML = '▶️';
     }
   });
   audio.addEventListener('timeupdate', () => {
     if (audio.duration) {
       progress.style.width = (audio.currentTime / audio.duration) * 100 + '%';
     }
   });
   audio.addEventListener('ended', () => {
     btn.innerHTML = '▶️';
     progress.style.width = '0%';
   });
 });

}); </script>