MediaWiki:AudioPlayer.js

$(function() {
    // Define utility functionality.
    function str_pad_left(string,pad,length) {
        return (new Array(length + 1).join(pad) + string).slice(-length);
    }
    
    function pretty_print_time(time) {
        return Math.floor(time / 60) + ':' + str_pad_left(Math.floor(time % 60), '0', 2);
    }
    
    // Loop all found audio players on the article.
    $(".audio-player").each(function() {
        var ap = $(this); // Current audio player tag.
        
        // Get widget stats.
        var id = ap.attr("data-id");
        var title = ap.attr("data-title");
        var authors = ap.attr("data-authors");
        var notes = ap.attr("data-notes");
        
        // Replacement widget.
        var widget = $("<div class=\"audio-player\"><div class=\"icon missing\"></div><span class=\"aplayer-title\"></span><span class=\"aplayer-timer\"><span class=\"aplayer-timer-text\">[-:-- / -:--]</span><span class=\"aplayer-tslider\"><span class=\"aplayer-tslider-curr\" style=\"width:0%\"></span></span></span><span class=\"aplayer-notes\"></span></div>");
        var icon = widget.find(".icon");
        
        widget.find(".aplayer-title").text(title + " - " + authors);
        widget.find(".aplayer-notes").text(notes);
        
        // Visual display of time & duration of audio.
        var timer = widget.find(".aplayer-timer-text");
        var slider = widget.find(".aplayer-tslider");
        var slider_curr = slider.find(".aplayer-tslider-curr");
        
        ap.replaceWith(widget);
        
        // Check, because we don't allow playing if there's no audio specified.
        if (id.length > 0 && id != "Youtube video id") {
            // This code loads the Youtube IFrame Player API code asynchronously. Wikia only supports OGG audio files, unfortunately.
            var tag = document.createElement('script');
            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
            
            // Placeholder <div> to store the video. The id is random.
            var videoPlaceholderTag = $("<div id='yt-player-" + Math.floor(1000 + Math.random() * 1999000) + "'></div>");
            videoPlaceholderTag.css({"display": "none"});
            $("body").append(videoPlaceholderTag);
            
            // This is a bit of a hack, but we use this async loop to wait for YT (Youtube API) to become available.
            var loadTimerVar, player, playerTarget;
            var playerIsPlaying = false; // To use outside of our code below.
            var duration;
            loadTimerVar = setInterval(function() {
                if (("YT" in window) && YT.loaded) { // The Youtube API has loaded.
                    clearInterval(loadTimerVar);
                    var playTimer;
                    // Load in the Youtube video element, to prepare playing.
                    player = new YT.Player(videoPlaceholderTag.attr("id"), {
                        height: '0',
                        width: '0',
                        videoId: id,
                        suggestedQuality: "small",
                        events: {
                            'onReady': function(event) {
                                playerTarget = event.target; // Grabs the player instance for later use.
                                duration = playerTarget.getDuration();
                                timer.text("[0:00 / " + pretty_print_time(duration) + "]"); // Init timer.
                                // To save bandwidth, since we don't need any video.
                                playerTarget.setPlaybackQuality("small");
                                // The video is ready, so we show the play icon.
                                icon.removeClass("missing").removeClass("pause").addClass("play");
                                icon.css({"cursor": "pointer"}); // The button can now be clicked.
                            },
                            'onStateChange': function(event) {
                                var isPlaying = event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING; // Either playing or buffering is good to show the pause icon.
                                if (isPlaying != playerIsPlaying) { // Playing state was changed.
                                    playerIsPlaying = isPlaying;
                                    icon.removeClass(!playerIsPlaying ? "pause" : "play").addClass(!playerIsPlaying ? "play" : "pause");
                                    
                                    // Update the timer display loop.
                                    if (isPlaying && playTimer === undefined) {
                                        playTimer = setInterval(function() {
                                            var curr = playerTarget.getCurrentTime();
                                            timer.text("[" + pretty_print_time(curr) + " / " + pretty_print_time(duration) + "]");
                                            slider_curr.css({"width": ((curr / duration) * 100) + "%"});
                                        }, 100);
                                    } else if (!isPlaying && playTimer !== undefined) {
                                        clearInterval(playTimer);
                                        playTimer = undefined;
                                    }
                                }
                            }
                        }
                    });
                }
            }, 100);
            
            // Click listener to toggle playing the audio.
            icon.click(function() {
                if (playerTarget !== undefined) {
                    if (playerIsPlaying) {
                        playerTarget.pauseVideo();
                    } else {
                        playerTarget.playVideo();
                    }
                }
            });
            
            slider.click(function(e) {
                var posX = e.pageX - slider.position().left;
                var p = posX / slider.width();
                
                console.log("posX:", posX, "p:", p, "duration:", duration);
                if (playerTarget !== undefined) {
                    playerTarget.seekTo(p * duration);
                }
            });
        }
    });
});