MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* 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%';
        });
    });
});