|
|
| (11 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> |
| <div class="audioplayer" data-audio="{{{1}}}" data-label="{{{2|Audio File}}}"></div>
| |
| | |
| <script>
| |
| (function(){
| |
| document.addEventListener('DOMContentLoaded', function() {
| |
| var container = document.querySelector('.audioplayer[data-audio]');
| |
| if (!container) return;
| |
| | |
| var fileName = container.getAttribute('data-audio');
| |
| var labelText = container.getAttribute('data-label');
| |
| | |
| var oggUrl = 'https://tuyin.online/images/' + fileName;
| |
| var mp3Url = oggUrl.replace('.ogg', '.mp3');
| |
| | |
| var playerId = 'player_' + Math.random().toString(36).substr(2, 9);
| |
| var audioFile = new Audio();
| |
| audioFile.preload = 'metadata';
| |
| | |
| if (audioFile.canPlayType('audio/ogg')) {
| |
| audioFile.src = oggUrl;
| |
| } else if (audioFile.canPlayType('audio/mpeg')) {
| |
| audioFile.src = mp3Url;
| |
| } else {
| |
| container.innerHTML = '<span style="color:red">Your browser cannot play this audio.</span>';
| |
| return;
| |
| }
| |
| | |
| // Create UI
| |
| var outer = document.createElement('div');
| |
| outer.style.display = 'inline-flex';
| |
| outer.style.alignItems = 'center';
| |
| outer.style.gap = '12px';
| |
| | |
| var box = document.createElement('div');
| |
| box.style.border = '1px solid #8B7355';
| |
| box.style.padding = '8px';
| |
| box.style.display = 'inline-block';
| |
| box.style.borderRadius = '4px';
| |
| box.style.backgroundColor = '#F5F0E8';
| |
| box.style.width = '200px';
| |
| | |
| var button = document.createElement('button');
| |
| button.id = playerId + '_btn';
| |
| button.innerHTML = '▶️';
| |
| button.style.padding = '4px 8px';
| |
| button.style.marginRight = '8px';
| |
| button.style.fontSize = '12px';
| |
| button.style.border = '1px solid #8B7355';
| |
| button.style.background = '#D4C4A8';
| |
| button.style.color = '#5D4E37';
| |
| | |
| var progressOuter = document.createElement('div');
| |
| progressOuter.style.display = 'inline-block';
| |
| progressOuter.style.width = '120px';
| |
| progressOuter.style.height = '6px';
| |
| progressOuter.style.backgroundColor = '#D4C4A8';
| |
| progressOuter.style.borderRadius = '3px';
| |
| progressOuter.style.verticalAlign = 'middle';
| |
| | |
| var progress = document.createElement('div');
| |
| progress.id = playerId + '_progress';
| |
| progress.style.height = '100%';
| |
| progress.style.backgroundColor = '#8B7355';
| |
| progress.style.borderRadius = '3px';
| |
| progress.style.width = '0%';
| |
| progress.style.transition = 'width 0.1s';
| |
| | |
| progressOuter.appendChild(progress);
| |
| box.appendChild(button);
| |
| box.appendChild(progressOuter);
| |
| outer.appendChild(box);
| |
| | |
| var label = document.createElement('span');
| |
| label.style.color = '#8B7355';
| |
| label.style.fontStyle = 'italic';
| |
| label.textContent = labelText;
| |
| outer.appendChild(label);
| |
| | |
| container.appendChild(outer);
| |
| | |
| button.addEventListener('click', function () {
| |
| if (audioFile.paused || audioFile.ended) {
| |
| audioFile.play().then(() => {
| |
| button.innerHTML = '⏸️';
| |
| }).catch((e) => {
| |
| alert("Could not play audio: " + e.message);
| |
| });
| |
| } else {
| |
| audioFile.pause();
| |
| button.innerHTML = '▶️';
| |
| }
| |
| });
| |
| | |
| audioFile.addEventListener('timeupdate', function () {
| |
| if (audioFile.duration) {
| |
| progress.style.width = ((audioFile.currentTime / audioFile.duration) * 100) + '%';
| |
| }
| |
| });
| |
| | |
| audioFile.addEventListener('ended', function () {
| |
| button.innerHTML = '▶️';
| |
| progress.style.width = '0%';
| |
| });
| |
| });
| |
| })();
| |
| </script>
| |
| </html> | |
