|
|
| (9 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| {{#tag:html| | | <includeonly>{{#tag:div|Loading audio player...|class=audioplayer|data-filename={{{1}}}|data-caption={{{2|Audio File}}}}}</includeonly> |
| <div class="audioplayer" data-filename="{{{1}}}" data-label="{{{2|Audio File}}}"></div>
| |
| | |
| <script>
| |
| document.addEventListener('DOMContentLoaded', function () {
| |
| document.querySelectorAll('.audioplayer').forEach(function(container) {
| |
| const file = container.dataset.filename;
| |
| const label = container.dataset.label;
| |
| const playerId = 'player_' + Math.random().toString(36).substr(2, 9);
| |
| | |
| 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 = '<span style="color:red">Browser cannot play audio.</span>';
| |
| return;
| |
| }
| |
| | |
| // Build UI
| |
| 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);
| |
| | |
| // Audio controls
| |
| 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>
| |
| }}
| |
