|
|
| Line 1: |
Line 1: |
| <includeonly> | | <includeonly> |
| <div class="audioplayer" data-filename="{{{1}}}" data-label="{{{2|Audio File}}}"></div> | | <div id="audioplayer-{{{1|replace:.,-}}}" style="display: inline-flex; align-items: center; gap: 12px;"> |
| | | <div style="border: 1px solid #8B7355; padding: 8px; border-radius: 4px; background-color: #F5F0E8; width: 200px;"> |
| <script>
| | <button onclick=" |
| document.addEventListener('DOMContentLoaded', function () {
| | var audio = this.audioElement || (this.audioElement = new Audio('https://tuyin.online/images/{{{1}}}')); |
| document.querySelectorAll('.audioplayer[data-filename]:not(.initialized)').forEach(function(container) {
| | if (this.innerHTML === '▶️') { |
| container.classList.add('initialized');
| | audio.play(); |
| const file = container.dataset.filename;
| | this.innerHTML = '⏸️'; |
| const label = container.dataset.label; | | var btn = this; |
|
| | audio.onended = function() { btn.innerHTML = '▶️'; }; |
| if (!file) {
| | } else { |
| container.innerHTML = '<span style="color:red">No filename provided</span>';
| | audio.pause(); |
| return;
| | this.innerHTML = '▶️'; |
| }
| | } |
|
| | " style="padding: 4px 8px; margin-right: 8px; font-size: 12px; border: 1px solid #8B7355; background: #D4C4A8; color: #5D4E37;">▶️</button> |
| const oggUrl = 'https://tuyin.online/images/' + file;
| | <span style="color: #8B7355; font-size: 11px;">Simple Player</span> |
| const mp3Url = oggUrl.replace('.ogg', '.mp3');
| | </div> |
| const audio = new Audio();
| | <span style="color: #8B7355; font-style: italic;">{{{2|Audio File}}}</span> |
| audio.preload = 'metadata';
| | </div> |
|
| |
| 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;
| |
| }
| |
|
| |
| 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);
| |
|
| |
| 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> | |
| </includeonly> | | </includeonly> |
