Subiendo cliente web de BaI Radio

5 files changed, 731 insertions, 0 deletions

diff --git a/bairadio.css b/bairadio.css
new file mode 100644
index 0000000..369c386
--- /dev/null
+++ b/bairadio.css
@@ -0,0 +1,313 @@
+* {
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  word-wrap: break-word;
+  cursor: url(data:image/x-win-bitmap;base64,AAACAAEAICAAAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAgAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAgICAAMDAwAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB4gAAAAAAAAAAAAAAAAAAAf4AAAAAAAAAAAAAAAAAAB/gAAAAAAAAAAAAAAAAAAAf4AAAAAAAAAAAAAAAAcAB/gAAAAAAAAAAAAAAAAHgAf4AAAAAAAAAAAAAAAAB/gPgAAAAAAAAAAAAAAAAAf/gAAAAAAAAAAAAAAAAAAH//iIiAAAAAAAAAAAAAAAB//4iIAAAAAAAAAAAAAAAAf/iIgAAAAAAAAAAAAAAAAH/4iAAAAAAAAAAAAAAAAAB/iIAAAAAAAAAAAAAAAAAAf4gAAAAAAAAAAAAAAAAAAHiAAAAAAAAAAAAAAAAAAAB4AAAAAAAAAAAAAAAAAAAAcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////////////////////////////////////////////////////////////////////j////w////8P///+H///3h///8w////EP///wH///8AH///AD///wB///8A////Af///wP///8H////D////x////8/////f////w==),auto;
+}
+
+html, body {
+  background: #000;
+  color: #fff;
+  font-family: Arial, sans-serif;
+  font-size: 16px;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+
+a, a:visited, a:hover {
+  color: #3833a1;
+}
+
+a:active {
+  color: #f00;
+}
+
+h1 {
+  margin: 16px 0;
+}
+
+.outer {
+  border: 1px solid #0d0d14;
+  background: #13141d;
+  background: linear-gradient(to right, #13141d, #28273e);
+  width: 600px;
+  display: inline-block;
+}
+
+.inner {
+  border-top: 1px solid #5c5c64;
+  border-left: 1px solid #5c5c64;
+  padding: 4px;
+}
+
+.content {
+  border: 2px solid #0f0f16;
+  box-shadow: 1px 1px #646471, 1px 1px #646471 inset;
+  padding: 4px;
+}
+
+.line {
+  margin: 0;
+  margin-bottom: 4px;
+  padding: 0;
+  vertical-align: middle;
+}
+
+.line:last-child {
+  margin-bottom: 0;
+}
+
+.block {
+  display: inline-block;
+}
+
+.box {
+  background: #000;
+  border-top: 1px solid #242337;
+  border-right: 1px solid #737388;
+  border-bottom: 1px solid #737388;
+  border-left: 1px solid #242337;
+  color: #0f0;
+  display: inline-block;
+  padding: 2px;
+}
+
+.boxtitle {
+  font-weight: bold;
+  text-shadow: 1px 1px #000;
+}
+
+.collapse .inner {
+  display: flex;
+  display: -moz-flex;
+  display: -ms-flex;
+  display: -webkit-flex;
+  align-items: center;
+}
+
+.collapse .content {
+  border: 0;
+  box-shadow: none;
+  flex-grow: 1;
+  -ms-flex-grow: 1;
+  -moz-flex-grow: 1;
+  -webkit-flex-grow: 1;
+  margin-left: 4px;
+  padding: 0;
+}
+
+#box-history.collapse .content {
+  width: 400px;
+}
+
+.collapse #history {
+  height: 1.4em;
+  overflow-y: hidden;
+}
+
+.collapse .pastsong:hover {
+  background: none;
+}
+
+#main {
+  display: flex;
+  display: -moz-flex;
+  display: -ms-flex;
+  display: -webkit-flex;
+}
+
+.main-sep {
+  width: 4px;
+}
+
+#main-cont {
+  flex: 1;
+  -ms-flex: 1;
+  -moz-flex: 1;
+  -webkit-flex: 1;
+  flex-grow: 1;
+  -ms-flex-grow: 1;
+  -moz-flex-grow: 1;
+  -webkit-flex-grow: 1;
+}
+
+#nowplaying {
+  display: block;
+  font-size: 21px;
+  text-shadow: 0 0 5px;
+  width: 482px;
+  white-space: nowrap;
+  overflow: hidden;
+  padding: 4px 2px;
+}
+
+#nowplaying-txt {
+  display: inline-block;
+}
+
+#nowplaying-txt:hover {
+  animation-play-state: paused;
+  -moz-animation-play-state: paused;
+  -webkit-animation-play-state: paused;
+}
+
+#artist {
+  font-weight: bold;
+}
+
+#details {
+  font-size: 14px;
+}
+
+#details .box {
+  margin: 0 2px;
+  padding: 1px 2px;
+}
+
+#server_name {
+  max-width: 450px;
+}
+
+#volume {
+  cursor: url(data:image/x-win-bitmap;base64,AAACAAEAICAAAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAgAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAwMDAAICAgAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACHcAAAAAAAAAAAAAAAAAAAj3AAAAAAAAAAAAAAAAAACPcAAHAAAAAHAAAAAAAAAAj3AAdwAHcAB3AAAAAAgACPcAAP8AD/AA/wAAAAAIcAj3AAAPAAAAAPAAAAAACPcPcAAAAAAAAAAAAAAAAAj/cAAAAAAAAAAAAAAAAAAI//d3dwAAAAAAAAAAAAAACP/3d3AAAAAAAAAAAAAAAAj/d3cAAAAAAAAAAAAAAAAI/3dwAAAAAAAAAAAAAAAACPd3AAAAAAAAAAAAAAAAAAj3cAAAAAAAAAAAAAAAAAAIdwAAAAAAAAAAAAAAAAAACHAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////////////////////////////////////////////////////////////////////j////w////8M/P/+GMx/3hCEP8wwhD/EOMx/wHz8/8AH///AD///wB///8A////Af///wP///8H////D////x////8/////f////w==),auto;
+}
+
+#history {
+  display: block;
+  min-height: 1em;
+  max-height: 5em;
+  overflow-y: auto;
+  text-align: left;
+}
+
+.pastsong {
+  padding: 0 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pastsong:hover {
+  background: #00f;
+}
+
+#chat-count {
+  font-weight: initial;
+}
+
+#chat-all {
+  display: block;
+  height: 10em;
+  min-height: 5em;
+  text-align: left;
+  overflow-y: auto;
+}
+
+#chat-all .msg {
+  border-bottom: 1px solid;
+  padding: 4px 2px;
+}
+
+#chat-all .msg:last-child {
+  border-bottom: 0;
+}
+
+#msg_cont {
+  display: flex;
+  display: -moz-flex;
+  display: -ms-flex;
+  display: -webkit-flex;
+  margin-top: 4px;
+}
+
+#msg_type {
+  background: none;
+  border-top: 2px solid #100f18;
+  border-left: 2px solid #100f18;
+  border-right: 2px solid #6a6a7a;
+  border-bottom: 2px solid #6a6a7a;
+  color: #fff;
+  flex: 1;
+  -ms-flex: 1;
+  -moz-flex: 1;
+  -webkit-flex: 1;
+  margin-right: 4px;
+  padding: 2px;
+  width: 100%;
+}
+
+#msg_send {
+  background: #bdced6;
+  border-top: 1px solid #f9feff;
+  border-left: 1px solid #f9feff;
+  border-right: 1px solid #adb5c6;
+  border-bottom: 1px solid #adb5c6;
+  color: #2f374d;
+  flex-shrink: 0;
+  font-size: 10px;
+  margin: 1px;
+  padding: 0 4px;
+  text-transform: uppercase;
+  outline: 1px outset #adb5c6;
+}
+
+#msg_send:active {
+  background: #7b8c9c;
+  border: 1px solid #adbdc6;
+  color: #000;
+  outline: 1px solid #000;
+}
+
+#msg_send:disabled {
+  background: #444;
+  border-top: 1px solid #7f7f7f;
+  border-left: 1px solid #7f7f7f;
+  border-right: 1px solid #333;
+  border-bottom: 1px solid #333;
+  color: #111;
+  outline: 1px outset #5a5a5a;
+}
+
+#vis-cont {
+  display: inline-block;
+  max-height: 91px;
+  max-width: 91px;
+  width: 91px;
+}
+
+#vis {
+  display: block;
+  height: 85px;
+  width: 85px;
+}
+
+#vis.show-play-btn {
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAZCAYAAADqrKTxAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bS0VaBO0g4pChOrUgKuKoVShChVArtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEydFJ0UVK/F9SaBHjwXE/3t173L0D/M0qU82ecUDVLCOTSgq5/KoQekUAQQwggrjETH1OFNPwHF/38PH1LsGzvM/9OSJKwWSATyCeZbphEW8QT29aOud94igrSwrxOXHcoAsSP3JddvmNc8lhP8+MGtnMPHGUWCh1sdzFrGyoxFPEMUXVKN+fc1nhvMVZrdZZ+578heGCtrLMdZojSGERSxAhQEYdFVRhIUGrRoqJDO0nPfzDjl8kl0yuChg5FlCDCsnxg//B727N4uSEmxROAsEX2/4YBUK7QKth29/Htt06AQLPwJXW8deawMwn6Y2OFjsC+reBi+uOJu8BlzvA0JMuGZIjBWj6i0Xg/Yy+KQ8M3gJ9a25v7X2cPgBZ6ip9AxwcAmMlyl73eHdvd2//nmn39wM5PnKQmgaw4AAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAHFJREFUOMud1EsOwCAIBNBx7n9nu7GNH5CZslLMi6hEoKPDDAKAC/mNDMhlJkIeGQEyzBaQ6coF8lpHAlmeOoCU7niDlF90grT6Z8D2v/ecaGh0gbfTADqagIY2UKMA3FECcnQBMSrAiQSwIhHYv9AbD4kSHCjuBbjMAAAAAElFTkSuQmCC) no-repeat center;
+}
+
+#resize {
+   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bS0VaBO0g4pChOrUgKuKoVShChVArtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEydFJ0UVK/F9SaBHjwXE/3t173L0D/M0qU82ecUDVLCOTSgq5/KoQekUAQQwggrjETH1OFNPwHF/38PH1LsGzvM/9OSJKwWSATyCeZbphEW8QT29aOud94igrSwrxOXHcoAsSP3JddvmNc8lhP8+MGtnMPHGUWCh1sdzFrGyoxFPEMUXVKN+fc1nhvMVZrdZZ+578heGCtrLMdZojSGERSxAhQEYdFVRhIUGrRoqJDO0nPfzDjl8kl0yuChg5FlCDCsnxg//B727N4uSEmxROAsEX2/4YBUK7QKth29/Htt06AQLPwJXW8deawMwn6Y2OFjsC+reBi+uOJu8BlzvA0JMuGZIjBWj6i0Xg/Yy+KQ8M3gJ9a25v7X2cPgBZ6ip9AxwcAmMlyl73eHdvd2//nmn39wM5PnKQmgaw4AAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAGFJREFUCNdlzMENAjEMRNGflLMXQCJ7xem/CM9UYg6bIAS+vj9uxzGhit8b56M6AK39gZX0VgtWsCElOsAOviFi0j+LcS9bSCZiYiW9KJ7nrWyjFK8IbF1vx9iQC64oYvIGzlo/pBk1ZaEAAAAASUVORK5CYII=) no-repeat center;
+   float: right;
+   position: relative;
+   right: -10px;
+   height: 10px;
+   width: 10px;
+}
+
+#resize:hover {
+  cursor: url(data:image/x-win-bitmap;base64,AAACAAEAICAAAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAgAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAwMDAAICAgAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPcAAAAAAAAAAAAAAAAAAA/3cAAAAAAAAAAAAACHcAAAAAAAAAAAAAAAAAAAj3AAAAAAAAAAAAAAAAAACPcAAAAAAAAAAAAAAAAAAAj3AAAA9wAAAAAAAAAAgACPcAAAAPcAAAAAAAAAAIcAj3AAAAAAAAAAAAAAAACPcPcAAAAAAAAAAAAAAAAAj/cAAAAAAAAAAAAAAAAAAI//d3dwAA/3cAAAAAAAAACP/3d3AAAA9wAAAAAAAAAAj/d3cAAAAAAAAAAAAAAAAI/3dwAAAAAAAAAAAAAAAACPd3AAAAAAAAAAAAAAAAAAj3cAAAAAAAAAAAAAAAAAAIdwAAAAAAAAAAAAAAAAAACHAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD////////////////////////////////////////////////////////////8////+H///jA///wwP//8P///+Hz//3h4f/8w+H//EPz//wH///8AED//ADA//wB4f/8A/P//Af///wP///8H////D////x////8/////f////w==),auto;
+}
+
+.outer, #footer {
+  margin-bottom: 16px;
+}
+
+#footer {
+  font-size: smaller;
+}
+
+.bar {
+  fill: #0f0;
+}
diff --git a/bairadio.js b/bairadio.js
new file mode 100644
index 0000000..2e1eafe
--- /dev/null
+++ b/bairadio.js
@@ -0,0 +1,342 @@
+var radionum = 0;
+
+function updateSelect() {
+  var req = new XMLHttpRequest();
+  var url = "https://bienvenidoainternet.org:8443";
+  req.open("GET", url+"/status-json.xsl", true);
+  req.send();
+  req.onreadystatechange = function() {
+    if (this.readyState === 4 && this.status === 200) {
+      var resp = JSON.parse(req.response);
+      resp = resp.icestats.source;
+      
+      var sel = document.getElementById("server_name");
+      sel.innerHTML = "";
+      if (resp.length > 1) {
+        for (var i = -1; ++i < resp.length;) {
+          var o = document.createElement("option");
+          o.value = i;
+          o.textContent = resp[i].server_name;
+          if (resp[i].server_description) {
+            o.textContent += ": " + resp[i].server_description;
+          }
+          if (i == radionum) { o.defaultSelected = true; }
+          sel.appendChild(o);
+        }
+        resp = resp[radionum];
+      } else {
+        var o = document.createElement("option");
+        o.value = 0;
+        o.textContent = resp.server_name;
+        if (resp.server_description) {
+          o.textContent += ": " + resp.server_description;
+        }
+        sel.appendChild(o);
+      }
+    }
+  }
+}
+
+function update(first) {
+  var first = first || false;
+  
+  var req = new XMLHttpRequest();
+  var url = "https://bienvenidoainternet.org:8443";
+  req.open("GET", url+"/status-json.xsl", true);
+  req.send();
+  req.onreadystatechange = function() {
+    if (this.readyState === 4 && this.status === 200) {
+      if (first) { document.getElementById("status").textContent = ""; }
+
+      var resp = JSON.parse(req.response);
+      resp = resp.icestats.source;
+      if (resp.length > 1) {
+        resp = resp[radionum];
+      }
+      
+      var audio = document.getElementById("stream");
+      resp.listenurl = resp.listenurl.replace("http://bienvenidoainternet.org:8000", "https://bienvenidoainternet.org:8443");
+      if (audio.src != resp.listenurl) {
+        audio.src = resp.listenurl;
+        if (!first) { playPause(); }
+      }
+      
+      var current = document.getElementById("artist").textContent + document.getElementById("title").textContent;
+      
+      if (resp.artist) {
+        resp.artist = resp.artist.trim();
+        var artist = document.getElementById("artist");
+        if (!artist.textContent.startsWith(resp.artist)) {
+          artist.textContent = resp.artist + " - ";
+        }
+      } else {
+        document.getElementById("artist").textContent = "";
+      }
+
+      if (resp.title) {
+        resp.title = resp.title.trim();
+        var title = document.getElementById("title");
+        if (title.textContent != resp.title) {
+          if (title.textContent != "" && title.textContent != resp.title) {
+            var history = document.getElementById("history");
+            history.innerHTML += '<div class="pastsong">' + current + '</div>';
+            history.scrollTop = history.scrollHeight;
+          }
+          
+          title.textContent = resp.title;
+          document.title = resp.title + ((resp.artist) ? (" - "+resp.artist) : "") + " @ Radio B.a.I.";
+          
+          checkLong();
+        }
+      } else {
+        document.getElementById("title").textContent = "(Sin título)";
+        document.title = "(Sin título) @ Radio B.a.I.";
+      }
+      
+      if (resp.listeners) {
+        var listeners = document.getElementById("listeners");
+        if (listeners.textContent != resp.listeners) {
+          listeners.textContent = resp.listeners;
+        }
+      }
+      
+      if (resp["ice-bitrate"]) {
+        var bitrate = document.getElementById("bitrate");
+        if (bitrate.textContent != resp["ice-bitrate"]) {
+          bitrate.textContent = resp["ice-bitrate"];
+        }
+      }
+      
+      if (resp.audio_samplerate) {
+        var audio_samplerate = document.getElementById("audio_samplerate");
+        audio_samplerate.textContent = Math.round(resp.audio_samplerate / 1000);
+      }
+    }
+  }
+}
+
+function startVisualization() {
+  var ctx = new AudioContext();  
+  var audio = document.getElementById("stream");
+  var src = ctx.createMediaElementSource(audio);
+  var anal = ctx.createAnalyser();
+  src.connect(anal);
+  src.connect(ctx.destination);
+  var freq = new Uint8Array(anal.frequencyBinCount);
+  
+  function renderVis() {
+    requestAnimationFrame(renderVis);
+    anal.getByteFrequencyData(freq);
+    
+    var vis = document.getElementById("vis");
+    vis.innerHTML = "";
+    var div = 3;
+    
+    for (var i = 0; i < 900; i += 20) {
+      var h = (freq[i] / div);
+      vis.innerHTML += '<rect class="bar"' +
+        'height="' + h + '" ' +
+        'width="1"' +
+        'x="' + (i / 10) + '" ' +
+        'y="' + ((255 / div) - h) + '" />';
+    }
+  }
+  
+  renderVis();
+}
+
+function checkLong() {
+  var strip = document.getElementById("nowplaying-txt");
+  
+  var marquee = document.getElementById("marqueeStyle");
+  if (marquee) marquee.parentElement.removeChild(marquee);
+  
+  if (strip.clientWidth > 480) { // #nowplaying width = 480px
+    var travel = strip.clientWidth - 475;
+    var style = document.createElement("style");
+    style.id = "marqueeStyle";
+    style.textContent = "#nowplaying-txt {animation: marquee " + Math.round(travel/10) + "s linear infinite;}";
+    style.textContent += "@keyframes marquee {";
+    style.textContent += "10% { transform: translateX(0); }";
+    style.textContent += "45% { transform: translateX(-" + travel + "px); }";
+    style.textContent += "55% { transform: translateX(-" + travel + "px); }";
+    style.textContent += "90% { transform: translateX(0); }";
+    style.textContent += "}";
+    document.getElementsByTagName("head")[0].appendChild(style);
+  }
+}
+
+function playPause() {
+  var radio = document.getElementById("stream");
+  var vis = document.getElementById("vis");
+  if (radio.paused) {
+    radio.play();
+    vis.removeAttribute("class")
+  } else {
+    vis.setAttribute("class", "show-play-btn");
+    radio.pause();
+  }
+}
+
+function changeVolume(e) {
+  var mousepos = e.x;
+  document.addEventListener("mousemove", setVolume);
+  document.addEventListener("mouseup", function() {
+    document.removeEventListener("mousemove", setVolume);
+  });
+  
+  function setVolume(e) {
+    var audio = document.getElementById("stream");
+    var dx = mousepos - e.x;
+    mousepos = e.x;
+
+    var vol = document.getElementById("volume");
+    var newvol = Math.round(parseInt(vol.textContent) + (dx * -1));
+    if (newvol < 0) { newvol = 0; }
+    else if (newvol > 100) { newvol = 100; }
+    
+    vol.textContent = (newvol < 10) ? ("0" + newvol) : newvol;
+    audio.volume = newvol / 100;
+    
+    removeSel();
+  }
+}
+
+function collapseHistory() {
+  var box = document.getElementById("box-history");
+  
+  if (box.className == "outer") {
+    box.classList.add("collapse");
+  } else {
+    box.classList.remove("collapse");
+  }
+  
+  removeSel();
+}
+
+function resizeChat(e) {
+  var mousepos = e.y;
+  document.addEventListener("mousemove", calcResize);
+  document.addEventListener("mouseup", function() {
+    document.removeEventListener("mousemove", calcResize);
+  });
+  
+  function calcResize(e) {
+    var chat = document.getElementById("chat-all");
+    var dx = mousepos - e.y;
+    mousepos = e.y;
+    chat.style.height = (parseInt(getComputedStyle(chat, "").height) - dx) + "px";
+    chat.scrollTop = chat.scrollHeight;
+    removeSel();
+  }
+}
+
+function removeSel() {
+  if (document.selection) { document.selection.empty(); }
+  else { window.getSelection().removeAllRanges(); }
+}
+
+var chatConnected = false;
+var antiFlood = false;
+const chatMaxChar = 80;
+const chatFloodTime = 1100;
+
+function connect() {
+  sock = new WebSocket("wss://tv.bienvenidoainternet.org/daemon/");
+  sock.addEventListener("open", function(e) {
+    addMsg("Conectado al chat.");
+    chatConnected = true;
+    enableChat();
+  });
+  sock.addEventListener("message", function(e) {
+    interpretNewMsg(e.data);
+  });
+  sock.addEventListener("close", function(e) {
+    addMsg("Desconectado del chat. " + (e.reason ? "Razón: "+e.reason : "Código: "+e.code));
+    document.getElementById("chat-count").textContent = "";
+    chatConnected = false;
+  });
+  
+  document.getElementById("msg_send").addEventListener("click", checkSend);
+}
+
+function enableChat() {
+  antiFlood = false;
+  document.getElementById("msg_send").disabled = false;
+}
+
+function interpretNewMsg(info) {
+  console.log("<<< " + info);
+  var arg = info.split(":");
+  
+  if (arg[0] == "MSG") {
+    var msg = unescapeColon(arg[2]);
+    addMsg(msg);
+  } else if (arg[0] == "COUNT") {
+    document.getElementById("chat-count").textContent = " (Usuarios: " + arg[1] + ")";
+  }
+}
+
+function checkSend(e) {
+  e.preventDefault();
+  if (!chatConnected) return;
+  if (antiFlood) return;
+  
+  var msgField = document.getElementById("msg_type");
+  var msg = msgField.value.trim().substr(0, chatMaxChar);
+  if (!msg) return;
+  
+  if (chatConnected) {
+    sendMsg("MSG:0:" + escapeColon(msg));
+    addMsg(msg);
+  } else return;
+  
+  msgField.value = "";
+  antiFlood = true;
+  document.getElementById("msg_send").disabled = true;
+  setTimeout(enableChat, chatFloodTime);
+}
+
+function escapeColon(msg) {
+  return msg ? msg.replace(/:/g, "%3A") : "";
+}
+function unescapeColon(msg) {
+  return msg ? msg.replace(/%3A/g, ":") : "";
+}
+
+function sendMsg(msg) {
+  console.log(">>> " + msg);
+  sock.send(msg);
+}
+
+function addMsg(msg) {
+  var chat = document.getElementById("chat-all");
+  
+  var line = document.createElement("div");
+  line.className = "msg";
+  var presentTime = new Date();
+  var hh = presentTime.getHours();
+  hh = (hh < 10) ? ("0" + hh) : hh;
+  var mm = presentTime.getMinutes();
+  mm = (mm < 10) ? ("0" + mm) : mm;
+  line.textContent = "[" + hh + ":" + mm + "] ";
+  line.textContent += msg;
+
+  chat.appendChild(line);
+  chat.scrollTop = chat.scrollHeight;
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+  document.getElementById("vis").addEventListener("click", playPause);
+  document.getElementById("volume").addEventListener("mousedown", changeVolume);
+  document.getElementById("server_name").addEventListener("change", function(e) { radionum = this.value; });
+  document.getElementById("box-history-title").addEventListener("dblclick", collapseHistory);
+  document.getElementById("resize").addEventListener("mousedown", resizeChat);
+
+  update(true);
+  updateSelect();
+  startVisualization();
+  setInterval(update, 1000);
+  setInterval(updateSelect, 10000);
+  connect();
+});
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..35404be
--- /dev/null
+++ b/favicon.ico
diff --git a/radio.html b/radio.html
new file mode 100644
index 0000000..f24bfbc
--- /dev/null
+++ b/radio.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="es-ES">
+<head>
+  <meta charset="utf-8">
+  <title>Radio @ Bienvenido a Internet</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="shortcut icon" href="favicon.ico" />
+  <link rel="stylesheet" href="bairadio.css" title="Radio B.a.I." />
+  <script src="bairadio.js"></script>
+</head>
+<body>
+  <h1>Radio B.a.I.</h1>
+
+  <div id="box-main" class="outer">
+    <div class="inner">
+      <div id="main" class="content">
+        <div id="vis-cont" class="box"><svg id="vis" class="show-play-btn"></svg></div>
+        <div class="main-sep"></div>
+        <div id="main-cont">
+          <audio id="stream" src="https://bienvenidoainternet.org:8443/bai.ogg"></audio>
+          <div class="line">
+            <div id="nowplaying" class="box">
+              <div id="nowplaying-txt"><span id="artist"></span><span id="title"></span><span id="status">*** La radio está OFFLINE ***</span></div>
+            </div>
+          </div>
+          <div id="details">
+            <div class="line">
+              <div class="block">Show:<select id="server_name" class="box"></select></div>
+            </div>
+            <div class="line">
+              <div class="block">Volumen:<span id="volume" class="box">100</span></div>
+              <div class="block">Bitrate:<span id="bitrate" class="box">--</span></div>
+              <div class="block">KHz:<span id="audio_samplerate" class="box">--</span></div>
+              <div class="block">Oyentes:<span id="listeners" class="box">0</span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <br>
+
+  <div id="box-history" class="outer">
+    <div class="inner">
+      <div id="box-history-title" class="boxtitle">Historial</div>
+      <div class="content">
+        <div id="history" class="box"></div>
+      </div>
+    </div>
+  </div>
+  
+  <br>
+
+  <div id="box-chat" class="outer chat">
+    <div class="inner">
+      <div id="box-chat-title" class="boxtitle">Chat<span id="chat-count"></span></div>
+      <div class="content">
+        <div id="chat-all" class="box"></div>
+          <form autocomplete="off" id="msg_cont">
+            <input id="msg_type" type="text" placeholder="Escribe un mensaje aquí" autofocus="autofocus" />
+            <input id="msg_send" value="Enviar" type="submit" disabled="disabled" />
+          </form>
+        <span id="resize"></span>
+      </div>
+    </div>
+  </div>
+  
+  <br>
+
+  <div id="footer">
+    <a href="/bai.ogg.m3u" target="_blank">Archivo M3U</a> ★
+    <a href="/bai.ogg.xspf" target="_blank">Archivo XSPF</a> ★
+    Bienvenido a Internet ★ 2010-2020
+  </div>
+</body>
diff --git a/test b/test
deleted file mode 100644
index e69de29..0000000
--- a/test
+++ /dev/null