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="myAudio" preload="auto"> | |||
<source src="{{{1}}}" type="audio/ogg"> | |||
<source src="{{{1}}}" type="audio/mpeg"> | |||
</audio> | |||
<script> | <script> | ||
function togglePlay() { | function togglePlay() { | ||
var audio = document.getElementById('myAudio'); | |||
var button = document.getElementById('playBtn'); | var button = document.getElementById('playBtn'); | ||
if ( | |||
if (audio.paused) { | |||
audio.play(); | |||
button.innerHTML = '⏸️'; | |||
} else { | |||
audio.pause(); | audio.pause(); | ||
button.innerHTML = '▶️'; | button.innerHTML = '▶️'; | ||
} | } | ||
} | } | ||
document.getElementById('myAudio').addEventListener('timeupdate', function() { | |||
var audio = document.getElementById('myAudio'); | |||
var progress = document.getElementById('progress'); | var progress = document.getElementById('progress'); | ||
var percentage = (audio.currentTime / audio.duration) * 100; | if (audio.duration) { | ||
var percentage = (audio.currentTime / audio.duration) * 100; | |||
progress.style.width = percentage + '%'; | |||
} | |||
}); | }); | ||
document.getElementById('myAudio').addEventListener('ended', function() { | |||
document.getElementById('playBtn').innerHTML = '▶️'; | document.getElementById('playBtn').innerHTML = '▶️'; | ||
document.getElementById('progress').style.width = '0%'; | document.getElementById('progress').style.width = '0%'; | ||
}); | }); | ||
