|
|
| (15 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| <html> | | <includeonly>{{#tag:div|Loading audio player...|class=audioplayer|data-filename={{{1}}}|data-caption={{{2|Audio File}}}}}</includeonly> |
| <script>
| |
| (function(){
| |
| var playerId = 'player_' + Math.random().toString(36).substr(2, 9);
| |
| var audioFile = new Audio();
| |
| | |
| // Set a single file source. For multiple formats, you'd need separate fallback logic.
| |
| audioFile.src = 'https://tuyin.online/images/{{{1}}}';
| |
| audioFile.preload = 'metadata';
| |
| | |
| window['toggle_' + playerId] = function() {
| |
| var button = document.getElementById(playerId + '_btn');
| |
| if (audioFile.paused) {
| |
| audioFile.play().then(function() {
| |
| button.innerHTML = '⏸️';
| |
| }).catch(function(e) {
| |
| console.error('Play failed:', e);
| |
| alert('Could not play audio: ' + e.message);
| |
| });
| |
| } else {
| |
| audioFile.pause();
| |
| button.innerHTML = '▶️';
| |
| }
| |
| };
| |
| | |
| audioFile.addEventListener('timeupdate', function() {
| |
| var progress = document.getElementById(playerId + '_progress');
| |
| if (progress && audioFile.duration) {
| |
| progress.style.width = ((audioFile.currentTime / audioFile.duration) * 100) + '%';
| |
| }
| |
| });
| |
| | |
| audioFile.addEventListener('ended', function() {
| |
| var btn = document.getElementById(playerId + '_btn');
| |
| if (btn) btn.innerHTML = '▶️';
| |
| var progress = document.getElementById(playerId + '_progress');
| |
| if (progress) progress.style.width = '0%';
| |
| });
| |
| | |
| document.addEventListener('DOMContentLoaded', function() {
| |
| document.getElementById(playerId + '_btn').onclick = window['toggle_' + playerId];
| |
| });
| |
| | |
| document.write(`
| |
| <div style="display:inline-flex; align-items:center; gap:12px;">
| |
| <div style="border:1px solid #8B7355; padding:8px; display:inline-block; border-radius:4px; background-color:#F5F0E8; width:200px;">
| |
| <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="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>
| |
| <span style="color:#8B7355; font-style:italic;">{{{2|Audio File}}}</span>
| |
| </div>
| |
| `);
| |
| })(); | |
| </script>
| |
| </html> | |
