technically 1.0
This commit is contained in:
310
radio.js
Normal file
310
radio.js
Normal file
@@ -0,0 +1,310 @@
|
||||
/* == wormTuner == */
|
||||
/* The Icecast Radio JS Tuner */
|
||||
|
||||
const nameJs = "wormTuner";
|
||||
const version = "0.3.1";
|
||||
|
||||
const statusJson = "/status-json.xsl";
|
||||
|
||||
// 'mimetype': 'icon-path'
|
||||
const mimeIcons = {
|
||||
// 'audio/aac':'/mime/aac.png',
|
||||
};
|
||||
|
||||
const options = {
|
||||
'json-timer': 2500, // Time (in ms) for each stream update
|
||||
'visualizers': true, // whether to support visualizers
|
||||
'video-support': true, // whether to support video streams
|
||||
'character-overflow': 38, // character count needed to put in marquee.
|
||||
'replace-url': false, // fellow lazies please stand up
|
||||
'url-replacement': ['',''],
|
||||
'crossorigin': true
|
||||
};
|
||||
|
||||
var ajax = new XMLHttpRequest();
|
||||
var sources = [];
|
||||
|
||||
var isFancy = true;
|
||||
var castContainer;
|
||||
var currentStation = "";
|
||||
|
||||
var audioPlayer = document.createElement('video');
|
||||
var audioContext;
|
||||
var audioAnalyser;
|
||||
var visualizer;
|
||||
var visMode = 0;
|
||||
|
||||
var videoMode = false;
|
||||
|
||||
// Timers
|
||||
var volTimer;
|
||||
var visTimer;
|
||||
|
||||
function updateJSON() {
|
||||
ajax.open('GET', statusJson, true);
|
||||
ajax.send();
|
||||
}
|
||||
|
||||
function processListenURL(url) {
|
||||
if (!options['replace-url'] || !url) return url;
|
||||
// Add Date.now() to prevent browser caching. Cache-Control isn't reliable IME
|
||||
return url.replace(options['url-replacement'][0], options['url-replacement'][1])+"?"+Date.now();
|
||||
}
|
||||
|
||||
function setSource(source) {
|
||||
if (!source) return;
|
||||
currentStation = source.listenurl.substr(23);
|
||||
window.location.hash = "#"+currentStation;
|
||||
|
||||
if (options['video-support'] && source.server_type.substr(0, source.server_type.indexOf('/')) == 'video') {
|
||||
visMode = -1;
|
||||
} else if (visMode < 0) visMode = 0;
|
||||
|
||||
audioPlayer.src = processListenURL(source.listenurl);
|
||||
audioPlayer.type = source.server_type;
|
||||
|
||||
if (isFancy) {
|
||||
if (!audioContext || !audioAnalyser) {
|
||||
audioContext = new AudioContext();
|
||||
audioAnalyser = createVisualizer(audioPlayer, audioContext);
|
||||
}
|
||||
setVisualizer(visualizer, audioAnalyser, visMode);
|
||||
} else audioPlayer = document.querySelector("video");
|
||||
|
||||
audioPlayer.play();
|
||||
document.body.scrollTop = 0;
|
||||
updateJSON();
|
||||
}
|
||||
|
||||
function handleVolume(event) {
|
||||
event.preventDefault();
|
||||
var volMeter = document.querySelector('.vol');
|
||||
volMeter.classList.remove('hidden');
|
||||
var volInc = 0.05;
|
||||
|
||||
if (event.deltaY < 0) {
|
||||
if (audioPlayer.volume+volInc > 1) audioPlayer.volume=1;
|
||||
else audioPlayer.volume+=volInc;
|
||||
}
|
||||
else if (event.deltaY > 0) {
|
||||
if (audioPlayer.volume-volInc < 0) audioPlayer.volume=0;
|
||||
else audioPlayer.volume-=volInc;
|
||||
}
|
||||
|
||||
volMeter.innerText = "VOL ["+'='.repeat(((audioPlayer.volume / 1) * 20)).padEnd(20, ' ') + "] "+(Math.round(audioPlayer.volume * 100)+'').padStart(3, ' ')+"%";
|
||||
|
||||
window.clearTimeout(volTimer)
|
||||
volTimer = setTimeout(function(){
|
||||
volMeter.classList.add('hidden');
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
function switchMode() {
|
||||
if (videoMode) return;
|
||||
if (!isFancy) return;
|
||||
if (visMode == modes.length - 1) // - 1 if we count empty.
|
||||
visMode = 0;
|
||||
else visMode++;
|
||||
|
||||
var visCounter = document.querySelector('.vismode');
|
||||
visCounter.classList.remove('hidden');
|
||||
|
||||
visCounter.innerText = modes[visMode]+' '+visMode+'/'+(modes.length - 1);
|
||||
|
||||
setVisualizer(visualizer, audioAnalyser, visMode);
|
||||
|
||||
window.clearTimeout(visTimer)
|
||||
visTimer = setTimeout(function(){
|
||||
visCounter.classList.add('hidden');
|
||||
}, 5000);
|
||||
|
||||
audioPlayer.play();
|
||||
}
|
||||
|
||||
function newEntry(source, i) {
|
||||
var entryContainer = document.createElement('div');
|
||||
entryContainer.classList.add('station');
|
||||
|
||||
entryContainer.name = source.listenurl.substr(23);
|
||||
|
||||
var titlebar = document.createElement('div'),
|
||||
infoBar = document.createElement('div'),
|
||||
descBox = document.createElement('div');
|
||||
|
||||
titlebar.classList.add('titlebar');
|
||||
infoBar.classList.add('infobar');
|
||||
descBox.classList.add('descbox');
|
||||
|
||||
var titleTxt = document.createElement('b'),
|
||||
listenerBox = document.createElement('div');
|
||||
|
||||
titleTxt.innerText = source.server_name;
|
||||
titlebar.appendChild(titleTxt);
|
||||
|
||||
var stationLineHeight = 24;
|
||||
var grower = document.createElement('div');
|
||||
grower.style.flexGrow = "1";
|
||||
titlebar.appendChild(grower);
|
||||
|
||||
var listenerImg = document.createElement('img'),
|
||||
listenerTxt = document.createElement('a');
|
||||
|
||||
|
||||
listenerImg.src = "users.png";
|
||||
listenerImg.width = listenerImg.height = stationLineHeight;
|
||||
listenerTxt.innerText = source.listeners;
|
||||
|
||||
listenerBox.title = source.listeners+" listener"+(source.listeners != 1 ? 's' : '')+" (peak "+source.listener_peak+")";
|
||||
listenerBox.appendChild(listenerImg);
|
||||
listenerBox.appendChild(listenerTxt);
|
||||
titlebar.appendChild(listenerBox);
|
||||
|
||||
entryContainer.appendChild(titlebar);
|
||||
|
||||
entryContainer.appendChild(document.createElement('hr'));
|
||||
|
||||
var bitrateTxt = document.createElement('a'),
|
||||
urlTxt = document.createElement('a'),
|
||||
urlImg = document.createElement('img'),
|
||||
dirTxt = document.createElement('a'),
|
||||
dirImg = document.createElement('img');
|
||||
|
||||
bitrateTxt.classList.add('bitrate');
|
||||
listenerBox.classList.add('listeners');
|
||||
|
||||
if (mimeIcons[source.server_type]) {
|
||||
var formatImg = document.createElement('img');
|
||||
formatImg.classList.add('format');
|
||||
formatImg.height = stationLineHeight;
|
||||
formatImg.alt = formatImg.title = source.server_type.substr(source.server_type.indexOf('/') + 1);
|
||||
formatImg.src = mimeIcons[source.server_type];
|
||||
infoBar.appendChild(formatImg);
|
||||
} else {
|
||||
var formatTxt = document.createElement('a');
|
||||
formatTxt.classList.add('format');
|
||||
formatTxt.innerText = formatTxt.title = source.server_type.substr(source.server_type.indexOf('/') + 1).toUpperCase();
|
||||
infoBar.appendChild(formatTxt);
|
||||
}
|
||||
|
||||
var btr = source.bitrate;
|
||||
if (!source.bitrate && source.audio_bitrate) btr = source.audio_bitrate / 1000;
|
||||
else if (!source.audio_bitrate && !source.bitrate) btr = "???";
|
||||
bitrateTxt.innerHTML = btr + "<font size='1'>kbps</font>";
|
||||
infoBar.appendChild(bitrateTxt);
|
||||
|
||||
if (source.server_url) {
|
||||
urlTxt.href = source.server_url;
|
||||
urlTxt.target = "_blank";
|
||||
urlImg.src = "url.png";
|
||||
urlImg.height = stationLineHeight;
|
||||
urlTxt.appendChild(urlImg);
|
||||
infoBar.appendChild(urlTxt);
|
||||
}
|
||||
|
||||
dirTxt.href = processListenURL(source.listenurl);
|
||||
dirTxt.target = "_blank";
|
||||
dirImg.src = "dir.png";
|
||||
dirImg.height = stationLineHeight;
|
||||
dirTxt.appendChild(dirImg);
|
||||
infoBar.appendChild(dirTxt);
|
||||
|
||||
entryContainer.appendChild(infoBar);
|
||||
|
||||
var descTxt = document.createElement('p');
|
||||
descTxt.innerHTML = source.server_description + " <i>(Genre: "+source.genre+")</i>";
|
||||
descBox.appendChild(descTxt);
|
||||
|
||||
entryContainer.appendChild(descBox);
|
||||
|
||||
if (source.listenurl.substr(23) == currentStation) entryContainer.classList.add("selected");
|
||||
entryContainer.onclick = function() {
|
||||
setSource(sources[i]);
|
||||
this.classList.add("selected");
|
||||
}
|
||||
|
||||
return entryContainer;
|
||||
}
|
||||
|
||||
function setMaybeOverflow(elem, txt) {
|
||||
if (!txt) return;
|
||||
var limit = options['character-overflow'];
|
||||
if (elem.innerText == txt) return;
|
||||
if (txt.length > limit)
|
||||
elem.innerHTML = "<marquee>"+txt+"</marquee>";
|
||||
else if (txt.length <= limit)
|
||||
elem.innerHTML = txt;
|
||||
|
||||
}
|
||||
|
||||
function updateStreamInfo(source) {
|
||||
var stationName = document.querySelector(".textainer .station"),
|
||||
title = document.querySelector(".textainer .track"),
|
||||
genre = document.querySelector(".textainer .genre");
|
||||
if (source) {
|
||||
setMaybeOverflow(stationName,source.server_name);
|
||||
if (source.artist)
|
||||
setMaybeOverflow(title,source.artist+" - "+source.title);
|
||||
else
|
||||
setMaybeOverflow(title,source.title);
|
||||
setMaybeOverflow(genre,source.genre);
|
||||
} else stationName.innerText = title.innerText = genre.innerText = "";
|
||||
}
|
||||
|
||||
ajax.onload = function() {
|
||||
// Clear Container for new stuff.
|
||||
while(castContainer.childElementCount > 0) {
|
||||
castContainer.removeChild(castContainer.lastChild);
|
||||
}
|
||||
|
||||
if (ajax.status == 200) { // OK
|
||||
if (ajax.response.icestats.source) {
|
||||
if (ajax.response.icestats.source.length > 0) sources = ajax.response.icestats.source;
|
||||
else sources = [ ajax.response.icestats.source ];
|
||||
} else sources = [];
|
||||
var index = -1;
|
||||
for (let i = 0; i < sources.length; i++) {
|
||||
castContainer.appendChild(newEntry(sources[i], i));
|
||||
if (sources[i].listenurl.substr(23) == currentStation) index = i;
|
||||
}
|
||||
if (index != -1) updateStreamInfo(sources[index]);
|
||||
if (audioPlayer.paused && currentStation.length > 0)
|
||||
setSource(sources[index]);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
castContainer = document.querySelector(".broadcasts");
|
||||
ajax.responseType = 'json';
|
||||
updateJSON();
|
||||
|
||||
visualizer = document.querySelector('canvas.vis');
|
||||
isFancy = isFancy && (visualizer != null);
|
||||
|
||||
// Detect Visualizer and initialize events
|
||||
if (isFancy) {
|
||||
visualizer.addEventListener('click', (event) => {
|
||||
switchMode();
|
||||
});
|
||||
visualizer.addEventListener('wheel', handleVolume);
|
||||
}
|
||||
|
||||
// #my-stream.ogg -> listenurl: /my-stream.ogg
|
||||
if (window.location.hash.length > 2) currentStation = window.location.hash.substr(1);
|
||||
|
||||
// Handle name and versioning
|
||||
var _nameElem = document.querySelector('.about .name');
|
||||
if (_nameElem) _nameElem.innerText = nameJs;
|
||||
var _versElem = document.querySelector('.about .vers');
|
||||
if (_versElem) _versElem.innerText = 'v'+version;
|
||||
|
||||
setInterval(function() {
|
||||
updateJSON();
|
||||
}, options['json-timer']);
|
||||
|
||||
if (options['crossorigin']) audioPlayer.setAttribute('crossorigin','anonymous');
|
||||
audioPlayer.onended = function () {
|
||||
currentStation = "";
|
||||
console.log("Stream over");
|
||||
updateStreamInfo(null);
|
||||
};
|
||||
});
|
||||
Reference in New Issue
Block a user