Template:AudioPlayer: Difference between revisions
From Tuyin Archives
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
| Line 1: | Line 1: | ||
<includeonly><html> | <includeonly><html> | ||
<audio id="audio_{{{1}}}" preload="auto"> | <audio id="audio_{{{1|replace:https://,}}}" preload="auto"> | ||
<source src=" | <source src="{{{1}}}" type="audio/ogg"> | ||
<source src="{{{1}}}" type="audio/mpeg"> | |||
</audio> | </audio> | ||
<script> | <script> | ||
(function() { | (function() { | ||
var audioId = 'audio_{{{1}}}'; | var audioId = 'audio_{{{1|replace:https://,}}}'; | ||
var btnId = 'btn_{{{1}}}'; | var btnId = 'btn_{{{1|replace:https://,}}}'; | ||
var progId = 'prog_{{{1}}}'; | var progId = 'prog_{{{1|replace:https://,}}}'; | ||
var audio = document.getElementById(audioId); | var audio = document.getElementById(audioId); | ||
var isPlaying = false; | var isPlaying = false; | ||
window | window.togglePlayUrl = function(id) { | ||
var | var button = document.getElementById('btn_' + id); | ||
if ( | var audioEl = document.getElementById('audio_' + id); | ||
var progEl = document.getElementById('prog_' + id); | |||
if (audioEl.paused) { | |||
audioEl.play(); | |||
button.innerHTML = '⏸️'; | |||
} else { | |||
audioEl.pause(); | |||
button.innerHTML = '▶️'; | button.innerHTML = '▶️'; | ||
} | } | ||
}; | }; | ||
| Line 26: | Line 28: | ||
audio.addEventListener('timeupdate', function() { | audio.addEventListener('timeupdate', function() { | ||
var progress = document.getElementById(progId); | var progress = document.getElementById(progId); | ||
var percentage = (audio.currentTime / audio.duration) * 100; | if (progress && audio.duration) { | ||
var percentage = (audio.currentTime / audio.duration) * 100; | |||
progress.style.width = percentage + '%'; | |||
} | |||
}); | }); | ||
audio.addEventListener('ended', function() { | audio.addEventListener('ended', function() { | ||
document.getElementById(btnId).innerHTML = '▶️'; | document.getElementById(btnId).innerHTML = '▶️'; | ||
document.getElementById(progId).style.width = '0%'; | document.getElementById(progId).style.width = '0%'; | ||
}); | }); | ||
| Line 40: | Line 43: | ||
<div style="display: inline-flex; align-items: center; gap: 12px;"> | <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;"> | <div style="border: 1px solid #8B7355; padding: 8px; display: inline-block; border-radius: 4px; background-color: #F5F0E8; width: 200px;"> | ||
<button id="btn_{{{1}}}" onclick=" | <button id="btn_{{{1|replace:https://,}}}" onclick="togglePlayUrl('{{{1|replace:https://,}}}')" 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 style="display: inline-block; width: 120px; height: 6px; background-color: #D4C4A8; border-radius: 3px; vertical-align: middle;"> | ||
<div id="prog_{{{1}}}" style="height: 100%; background-color: #8B7355; border-radius: 3px; width: 0%; transition: width 0.1s;"></div> | <div id="prog_{{{1|replace:https://,}}}" style="height: 100%; background-color: #8B7355; border-radius: 3px; width: 0%; transition: width 0.1s;"></div> | ||
</div> | </div> | ||
</div> | </div> | ||
