287 lines
8.8 KiB
JavaScript
287 lines
8.8 KiB
JavaScript
|
// 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);
|