|
|
| (29 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>
| |
| var audioFile = new Audio('https://tuyin.online/images/{{{1}}}');
| |
| var isPlayingFile = false;
| |
| var playerId = 'player_' + Math.random().toString(36).substr(2, 9);
| |
| | |
| function togglePlayFile() {
| |
| var button = document.getElementById(playerId + '_btn');
| |
| if (isPlayingFile) {
| |
| audioFile.pause();
| |
| button.innerHTML = '▶️';
| |
| isPlayingFile = false;
| |
| } else {
| |
| audioFile.play().then(function() {
| |
| button.innerHTML = '⏸️';
| |
| isPlayingFile = true;
| |
| }).catch(function(error) {
| |
| console.log('Play failed:', error);
| |
| alert('Could not play audio: ' + error.message);
| |
| });
| |
| }
| |
| } | |
| | |
| audioFile.addEventListener('timeupdate', function() {
| |
| var progress = document.getElementById(playerId + '_progress');
| |
| if (progress) {
| |
| var percentage = (audioFile.currentTime / audioFile.duration) * 100;
| |
| progress.style.width = percentage + '%';
| |
| }
| |
| });
| |
| | |
| audioFile.addEventListener('ended', function() {
| |
| var button = document.getElementById(playerId + '_btn');
| |
| if (button) {
| |
| button.innerHTML = '▶️';
| |
| isPlayingFile = false;
| |
| document.getElementById(playerId + '_progress').style.width = '0%';
| |
| }
| |
| });
| |
| </script>
| |
| | |
| <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 onclick="togglePlayFile()" 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 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>
| |
| document.addEventListener('DOMContentLoaded', function() {
| |
| var buttons = document.querySelectorAll('button[onclick="togglePlayFile()"]');
| |
| var lastButton = buttons[buttons.length - 1];
| |
| lastButton.id = playerId + '_btn';
| |
|
| |
| var progressBars = document.querySelectorAll('div[style*="width: 0%"]');
| |
| var lastProgress = progressBars[progressBars.length - 1];
| |
| lastProgress.id = playerId + '_progress';
| |
| }); | |
| </script>
| |
| </html> | |
