|
|
| (13 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();
| |
| audioFile.src = 'https://tuyin.online/images/{{{1}}}';
| |
| audioFile.preload = 'metadata';
| |
| | |
| document.addEventListener('DOMContentLoaded', function() {
| |
| // Create container
| |
| var container = document.createElement('div');
| |
| container.style.display = 'inline-flex';
| |
| container.style.alignItems = 'center';
| |
| container.style.gap = '12px';
| |
| | |
| // Create player box
| |
| var playerBox = document.createElement('div');
| |
| playerBox.style.border = '1px solid #8B7355';
| |
| playerBox.style.padding = '8px';
| |
| playerBox.style.display = 'inline-block';
| |
| playerBox.style.borderRadius = '4px';
| |
| playerBox.style.backgroundColor = '#F5F0E8';
| |
| playerBox.style.width = '200px';
| |
| | |
| // Create play button
| |
| var playButton = document.createElement('button');
| |
| playButton.id = playerId + '_btn';
| |
| playButton.innerHTML = '▶️';
| |
| playButton.style.padding = '4px 8px';
| |
| playButton.style.marginRight = '8px';
| |
| playButton.style.fontSize = '12px';
| |
| playButton.style.border = '1px solid #8B7355';
| |
| playButton.style.background = '#D4C4A8';
| |
| playButton.style.color = '#5D4E37';
| |
| | |
| // Create progress bar container
| |
| var progressContainer = document.createElement('div');
| |
| progressContainer.style.display = 'inline-block';
| |
| progressContainer.style.width = '120px';
| |
| progressContainer.style.height = '6px';
| |
| progressContainer.style.backgroundColor = '#D4C4A8';
| |
| progressContainer.style.borderRadius = '3px';
| |
| progressContainer.style.verticalAlign = 'middle';
| |
| | |
| // Create progress bar inner
| |
| var progressBar = document.createElement('div');
| |
| progressBar.id = playerId + '_progress';
| |
| progressBar.style.height = '100%';
| |
| progressBar.style.backgroundColor = '#8B7355';
| |
| progressBar.style.borderRadius = '3px';
| |
| progressBar.style.width = '0%';
| |
| progressBar.style.transition = 'width 0.1s';
| |
| | |
| // Assemble
| |
| progressContainer.appendChild(progressBar);
| |
| playerBox.appendChild(playButton);
| |
| playerBox.appendChild(progressContainer);
| |
| container.appendChild(playerBox);
| |
| | |
| var label = document.createElement('span');
| |
| label.style.color = '#8B7355';
| |
| label.style.fontStyle = 'italic';
| |
| label.innerText = '{{{2|Audio File}}}';
| |
| container.appendChild(label);
| |
| | |
| // Append to current script's parent
| |
| var scriptTag = document.currentScript;
| |
| scriptTag.parentNode.insertBefore(container, scriptTag.nextSibling);
| |
| | |
| // Setup button
| |
| playButton.addEventListener('click', function () {
| |
| if (audioFile.paused || audioFile.ended) {
| |
| audioFile.play().then(() => {
| |
| playButton.innerHTML = '⏸️';
| |
| }).catch((e) => {
| |
| alert("Could not play audio: " + e.message);
| |
| });
| |
| } else {
| |
| audioFile.pause();
| |
| playButton.innerHTML = '▶️';
| |
| }
| |
| });
| |
| | |
| audioFile.addEventListener('timeupdate', function () {
| |
| if (audioFile.duration) {
| |
| progressBar.style.width = ((audioFile.currentTime / audioFile.duration) * 100) + '%';
| |
| }
| |
| });
| |
| | |
| audioFile.addEventListener('ended', function () {
| |
| playButton.innerHTML = '▶️';
| |
| progressBar.style.width = '0%';
| |
| });
| |
| });
| |
| })(); | |
| </script>
| |
| </html> | |
