mlp-episodes/radiowidget/code.js

// Written by LunaSquee

// Radio stream URL
var radioStream = "//radio.djazz.se/stream";
// Player HTML Objects
var player, audio, playstop, playstopinner, mute, muteinner, volumeSeekBar, volumeBar;
// States
var isPlaying = false, isPopped = false, notifications = false, isMuted = false;
// Song data
var songtitle = "", prevSong = "", coverart = "", volume = 1;

// Show a browser notification (IF PERMITTED!) when song fetcher detects a new song.
function notify(note, image, time) {
    if(isPlaying) {
        if(notifications) {
            if (("Notification" in window)) {
                if (Notification.permission === "granted") {
                    var notification = new Notification("Parasprite Radio", {
                        icon: image || "//radio.djazz.se/img/parasprite-radio.png",
                        body: note
                    });
                    if (time !== 0) {
                        notification.onshow = function () { 
                            setTimeout(notification.close.bind(notification), time*1000 || 5000); 
                        }
                    }
                    return notification;
                }
            }
        }
    }
}

function updateSong(song, listenerCount, art, url) {
    if(song != songtitle) {
        prevSong = songtitle;
        songtitle = song;
        coverart = art;
        if(isPopped)
            document.title = "Parasprite Radio: "+songtitle;

        if(url!=null)
            $('#current-song').html("<a href='"+url+"' target='_blank'>"+songtitle+"</a>");
        else
            $('#current-song').text(songtitle);
        
        $('.coverart').attr("src", coverart);
        notify(song, coverart);
    }

    $('#listeners').text(listenerCount);
}

// Fetch the radio provider for current song title and listener count (do NOT double-call this!!!)
function requestSong() {
	setTimeout(requestSong, 10*1000);
	try{
        $.ajax({
            url: '//radio.djazz.se/api/status',
            success: function(data, status, jqXHR){
                if(data.meta.art) 
                    $('.coverclick').attr("href", data.meta.art);
                else
                    $('.coverclick').attr("href", "//radio.djazz.se/api/now/art/full");
                updateSong((data.meta.artist!=null ? data.meta.artist+" - " : "")+data.meta.title, data.info.listeners, 
                    (data.meta.art!=null ? data.meta.art+"?t="+Date.now() : "//radio.djazz.se/api/now/art/small?t="+Date.now()), 
                    data.meta.url);
            }
        });
	} catch(err) {}
}

// Start the player by creating a new audio element and throwing events on it
function startPlayer() {
    stopPlayer();

    playstopinner.removeClass('stop');
    playstopinner.addClass('ajax-loader');

    audio = new Audio();
    audio.muted = isMuted;
    audio.src = radioStream;
    audio.addEventListener('canplay', function() { 
        isPlaying = true;
        playstopinner.removeClass('play ajax-loader');
        playstopinner.addClass('stop');
        audio.play();
    }, false);
    audio.addEventListener('waiting', function() { 
        playstopinner.removeClass('stop');
        playstopinner.addClass('play ajax-loader');
    }, false);
    audio.addEventListener('ended', handleEnded, false);
    audio.addEventListener('error', handleEnded, false);
    audio.addEventListener('stalled', handleEnded, false);

    audio.volume = volume;

    if (("Notification" in window)) {
        if (Notification.permission !== 'denied') {
            Notification.requestPermission(function (permission) {
                if(!('permission' in Notification)) {
                    Notification.permission = permission;
                    if(permission === "granted")
                        notifications = true;
                } else {
                    var permission = Notification.permission;
                    if(permission === "granted")
                        notifications = true;
                    else
                        notifications = false;
                }
            });
        }
    }
}

// Stop the player by destroying the audio element
function stopPlayer() {
    isPlaying = false;
    if(audio){
        playstopinner.removeClass('stop ajax-loader');
        playstopinner.addClass('play');
        audio.removeEventListener('ended', handleEnded);
        audio.removeEventListener('error', handleEnded);
        audio.removeEventListener('stalled', handleEnded);
        audio.removeEventListener('waiting', handleEnded);
        audio.pause();
        audio.src = '';
        audio.load();
        audio = null;
    }
}

// Player toggler
function togglePlay() {
    if(!isPlaying){
        startPlayer();
    } else {
        stopPlayer();
    }
}

// Mute toggler
function toggleMute() {
    if(audio && isPlaying) {
        if(audio.muted){
            muteinner.removeClass('unmute');
            muteinner.addClass('mute');
            audio.muted = false;
        } else {
            muteinner.removeClass('mute');
            muteinner.addClass('unmute');
            audio.muted = true;
        }
        isMuted = audio.muted;
    }
}

// Update the audio volume to newVal and change the volume bar along with it.
function updateVolume(newVal) {
    if(newVal < 0)
        newVal = 0;
    if(newVal > 1)
        newVal = 1;
    if("localStorage" in window)
        localStorage.setItem("volume", newVal);
    volumeBar.css("width", Math.floor(newVal * 100)+"%");
    volume = newVal;
    if(audio && isPlaying) {
        audio.volume = newVal;
        if(audio.muted){
            muteinner.removeClass('mute');
            muteinner.addClass('unmute');
        } else {
            muteinner.removeClass('unmute');
            muteinner.addClass('mute');
        }
    }
}

// Attempt to restart the player if it stops by itself
function handleEnded() {
    setTimeout(function () {
        if (isPlaying) {
            stopPlayer();
            startPlayer();
        }
    }, 1000);
}

// Create a new window with the popout utility
function popout() {
    stopPlayer();
    var win = window.open("http://www.mlp-episodes.tk/radiowidget/radio.html", "_blank", "width=640, height=140, scrollbars=no");
}

// Initialize the player
function initPlayer() {
    var isDraggingSlider = false;
    player = document.getElementById('media-audio-player');
    playstop = $('#btn-play');
    volumeBar = $('.volumeseeker .seek');
    volumeSeekBar = $('.volumeseeker');
    playstopinner = $('#btn-play div');
    mute = $('#btn-mute');
    muteinner = $('#mute-inner');

    if("localStorage" in window)
        if(localStorage.getItem("volume") != null && parseFloat(localStorage.getItem("volume")) !== null)
            updateVolume(parseFloat(localStorage.getItem("volume")));

    if($('#btn-popout')) {
      $('#btn-popout').click(popout);
    }

    playstop.on('click', togglePlay);
    mute.click(function() {
      toggleMute();
    }).children().click(function(e) {
      return false;
    });

    mute.bind('DOMMouseScroll', function(e){
     if(e.originalEvent.detail > 0) {
         if(volume > 0) {
                updateVolume(volume - 0.1);
            }
        } else {
            if(volume < 1) {
                updateVolume(volume + 0.1);
            }
        }
        return false;
    });

    mute.bind('mousewheel', function(e){
     if(e.originalEvent.wheelDelta < 0) {
         if(volume > 0) {
                updateVolume(volume - 0.1);
            }
        } else {
            if(volume < 1) {
                updateVolume(volume + 0.1);
            }
        }
        return false;
    });

    var isDragging = false;
    volumeSeekBar.mousedown(function() {
        volumeSeekBar.mousemove(function(e) {
            isDragging = true;
            volume = (e.pageX - volumeSeekBar.offset().left) / volumeSeekBar.width();
            if(volume > 1)
            	volume = 1;

            volumeBar.css("width", Math.floor(volume * 100)+"%");
            updateVolume(volume);
        });
    })
    .mouseup(function(e) {
        var wasDragging = isDragging;
        isDragging = false;
        volumeSeekBar.unbind("mousemove");
        if (!wasDragging) {
            volume = (e.pageX - volumeSeekBar.offset().left) / volumeSeekBar.width();
            updateVolume(volume);
        }
        return;
    })
    .mouseleave(function(e) {
        isDragging = false;
        volumeSeekBar.unbind("mousemove");
        return;
    })

    muteinner.click(function() {
        toggleMute();
    }).children().click(function(e) {
        return false;
    });

    requestSong();
}

$(document).ready(initPlayer);