|
|
| (16 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();
| |
| | |
| // 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">';
| |
| | |
| window['toggle_' + playerId] = function() {
| |
| var button = document.getElementById(playerId + '_btn');
| |
| if (audioFile.paused) {
| |
| audioFile.play().then(function() {
| |
| button.innerHTML = '⏸️';
| |
| }).catch(function(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) {
| |
| progress.style.width = ((audioFile.currentTime / audioFile.duration) * 100) + '%';
| |
| }
| |
| });
| |
| | |
| audioFile.addEventListener('ended', function() {
| |
| document.getElementById(playerId + '_btn').innerHTML = '▶️';
| |
| document.getElementById(playerId + '_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> | |
