|
|
| Line 1: |
Line 1: |
| /* Any JavaScript here will be loaded for all users on every page load. */ | | /* Any JavaScript here will be loaded for all users on every page load. */ |
| /**
| |
| /**
| |
| * Audio Player Script
| |
| * Enables interactive audio players via the {{AudioPlayer}} template.
| |
| * Requires matching HTML IDs: playBtn-<filename> and progress-<filename>
| |
| * Expects audio files to be hosted at https://tuyin.online/images/<filename>
| |
| */
| |
|
| |
| mw.hook('wikipage.content').add(function($content) {
| |
| $content.find('[id^="playBtn-"]').each(function() {
| |
| var btn = this;
| |
| var id = btn.id.replace('playBtn-', '');
| |
| var audio = new Audio('https://tuyin.online/images/' + id);
| |
| var isPlaying = false;
| |
| var progress = document.getElementById('progress-' + id);
| |
|
| |
| btn.addEventListener('click', function () {
| |
| if (isPlaying) {
| |
| audio.pause();
| |
| btn.textContent = '▶️';
| |
| } else {
| |
| audio.play();
| |
| btn.textContent = '⏸️';
| |
| }
| |
| isPlaying = !isPlaying;
| |
| });
| |
|
| |
| audio.addEventListener('timeupdate', function () {
| |
| var percentage = (audio.currentTime / audio.duration) * 100;
| |
| if (progress) progress.style.width = percentage + '%';
| |
| });
| |
|
| |
| audio.addEventListener('ended', function () {
| |
| btn.textContent = '▶️';
| |
| isPlaying = false;
| |
| if (progress) progress.style.width = '0%';
| |
| });
| |
| });
| |
| });
| |
Revision as of 19:49, 23 July 2025
/* Any JavaScript here will be loaded for all users on every page load. */
