MediaWiki:Common.js: Difference between revisions

Revision as of 21:26, 23 July 2025

/* Any JavaScript here will be loaded for all users on every page load. */
// Audio Player System
// Audio Player System
/* Any JavaScript here will be loaded for all users on every page load. */
// Audio Player System
mw.hook('wikipage.content').add(function($content) {
    $content.find('.audioplayer').each(function() {
        var $container = $(this);
        var filename = $container.attr('data-filename');
        var caption = $container.attr('data-caption') || 'Audio File';
        
        if (!filename) return;

        // Generate unique ID
        var playerId = 'audio_' + Math.random().toString(36).substr(2, 9);

        // Create player HTML
        var $player = $('<div>').css({
            'display': 'inline-flex',
            'align-items': 'center',
            'gap': '12px'
        });

        var $playerBox = $('<div>').css({
            'border': '1px solid #8B7355',
            'padding': '8px',
            'border-radius': '4px',
            'background-color': '#F5F0E8',
            'width': '200px'
        });

        var $button = $('<button>').attr('id', playerId + '_btn').text('▶️').css({
            'padding': '4px 8px',
            'margin-right': '8px',
            'font-size': '12px',
            'border': '1px solid #8B7355',
            'background': '#D4C4A8',
            'color': '#5D4E37'
        });

        var $progressContainer = $('<div>').css({
            'display': 'inline-block',
            'width': '120px',
            'height': '6px',
            'background-color': '#D4C4A8',
            'border-radius': '3px',
            'vertical-align': 'middle'
        });

        var $progress = $('<div>').attr('id', playerId + '_progress').css({
            'height': '100%',
            'background-color': '#8B7355',
            'border-radius': '3px',
            'width': '0%',
            'transition': 'width 0.1s'
        });

        var $caption = $('<span>').text(caption).css({
            'color': '#8B7355',
            'font-style': 'italic'
        });

        // Build structure
        $progressContainer.append($progress);
        $playerBox.append($button).append($progressContainer);
        $player.append($playerBox).append($caption);

        // Replace container content
        $container.empty().append($player);

        // Set up audio functionality using DOM <audio> tag
        var audioSrc = 'https://tuyin.online/images/' + filename;
        var $realAudio = $('<audio preload="metadata" playsinline style="display:none;">')
            .append($('<source>').attr('src', audioSrc).attr('type', 'audio/ogg'));
        $container.append($realAudio);
        var audio = $realAudio[0];
        var isPlaying = false;

        $button.click(function() {
            audio.load(); // Force load to fix mobile playback
            if (isPlaying) {
                audio.pause();
                $button.text('▶️');
                isPlaying = false;
            } else {
                audio.play().then(function() {
                    $button.text('⏸️');
                    isPlaying = true;
                }).catch(function(error) {
                    alert('Could not play audio: ' + error.message);
                });
            }
        });

        audio.addEventListener('timeupdate', function() {
            if (audio.duration) {
                var percentage = (audio.currentTime / audio.duration) * 100;
                $progress.css('width', percentage + '%');
            }
        });

        audio.addEventListener('ended', function() {
            $button.text('▶️');
            $progress.css('width', '0%');
            isPlaying = false;
        });
    });
});