|
|
| Line 1: |
Line 1: |
| <includeonly> | | <includeonly> |
| <div id="player-{{{1|replace:https://tuyin.online/images/,}}}" data-audio-url="{{{1}}}" data-caption="{{{2|Audio File}}}"> | | <div id="audioplayer-{{{id|1}}}"></div> |
| <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 class="audio-play-btn" 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 class="audio-progress" 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>
| |
| </div> | |
| | |
| <script> | | <script> |
| (function() { | | (function() { |
| var players = document.querySelectorAll('[id^="player-"]');
| | var audio = document.createElement("audio"); |
| players.forEach(function(player) {
| | audio.setAttribute("controls", ""); |
| var btn = player.querySelector('.audio-play-btn');
| | audio.setAttribute("preload", "metadata"); |
| var progress = player.querySelector('.audio-progress');
| | audio.style.maxWidth = "240px"; |
| var audioUrl = player.getAttribute('data-audio-url');
| | |
| var audio = new Audio(audioUrl);
| | var source = document.createElement("source"); |
| var isPlaying = false;
| | source.src = "https://morrisjb18.github.io/tuyinhost/{{{file}}}"; |
|
| | source.type = "audio/ogg"; |
| btn.onclick = function() {
| | |
| if (isPlaying) {
| | audio.appendChild(source); |
| audio.pause();
| | document.getElementById("audioplayer-{{{id|1}}}").appendChild(audio); |
| btn.innerHTML = '▶️';
| | })(); |
| isPlaying = false;
| | </script> |
| } else {
| | </includeonly> |
| audio.play();
| |
| btn.innerHTML = '⏸️';
| |
| isPlaying = true;
| |
| }
| |
| };
| |
|
| |
| audio.ontimeupdate = function() {
| |
| if (audio.duration) {
| |
| var percentage = (audio.currentTime / audio.duration) * 100;
| |
| progress.style.width = percentage + '%';
| |
| }
| |
| };
| |
|
| |
| audio.onended = function() {
| |
