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 System
$(document).ready(function() {
    // Initialize all audio players on page load
    $('.audioplayer').each(function() {
        var container = $(this);
        var filename = container.data('filename');
        var caption = container.data('caption') || 'Audio File';
        
        if (!filename) return;
        
        // Create unique ID for this player
        var playerId = 'player_' + Math.random().toString(36).substr(2, 9);
        
        // Build the player HTML
        var playerHTML = 
            '<div style="display: inline-flex; align-items: center; gap: 12px;">' +
                '<div style="border: 1px solid #8B7355; padding: 8px; border-radius: 4px; background-color: #F5F0E8; width: 200px;">' +
                    '<button id="' + playerId + '_btn" onclick="window.toggleAudioPlayer(\'' + playerId + '\', \'' + filename + '\')" 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 id="' + playerId + '_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;">' + caption + '</span>' +
            '</div>';
        
        container.html(playerHTML);
    });
});

// Global function to handle audio playback
window.toggleAudioPlayer = function(playerId, filename) {
    var button = document.getElementById(playerId + '_btn');
    var progress = document.getElementById(playerId + '_progress');
    
    // Create or get existing audio element
    if (!button.audioElement) {
        button.audioElement = new Audio('https://tuyin.online/images/' + filename);
        
        // Set up progress tracking
        button.audioElement.addEventListener('timeupdate', function() {
            if (this.duration) {
                var percentage = (this.currentTime / this.duration) * 100;
                progress.style.width = percentage + '%';
            }
        });
        
        // Handle when audio ends
        button.audioElement.addEventListener('ended', function() {
            button.innerHTML = '▶️';
            progress.style.width = '0%';
        });
    }
    
    var audio = button.audioElement;
    
    if (audio.paused) {
        audio.play().then(function() {
            button.innerHTML = '⏸️';
        }).catch(function(error) {
            alert('Could not play audio: ' + error.message);
        });
    } else {
        audio.pause();
        button.innerHTML = '▶️';
    }
};